Data no showing in UserControl - wpf

When i run the code, no data is shown in the UI. Data is there in the Person object but not showing in UI.
The list is getting populated. There are 10 items in the person object and i can see 10 items being created in the UI but the name and age are not showing.
In visual studio preview i can see data
UserControl XAML
<UserControl x:Class="BlankApp1.Views.PersonUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Name}" Margin="10 3"/>
<TextBlock Text="{Binding Age}" Margin="10 3" Grid.Column="1"/>
</Grid>
</UserControl>
Model
public class PersonModel : ObservableBase
{
private string name;
public string Name
{
get { return name; }
set { Set(ref name, value); }
}
private int age;
public int Age
{
get { return age; }
set { Set(ref age, value); }
}
}
MainViewModel
public class MainWindowViewModel : BindableBase
{
private string _title = "Prism Application";
public string Title
{
get { return _title; }
set { SetProperty(ref _title, value); }
}
public MainWindowViewModel()
{
Mock();
}
public ObservableCollection<PersonModel> Persons { get; set; }
= new ObservableCollection<PersonModel>();
private Random rand = new Random();
private void Mock()
{
for (int i = 0; i < 10; i++)
{
Persons.Add(new PersonModel
{
Name = string.Format("Person {0}", i),
Age = rand.Next(20, 50)
});
}
}
}
MainView XAML
<Window x:Class="BlankApp1.Views.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:prism="http://prismlibrary.com/"
xmlns:local="clr-namespace:BlankApp1.ViewModels"
xmlns:model="clr-namespace:BlankApp1"
xmlns:view="clr-namespace:BlankApp1.Views"
prism:ViewModelLocator.AutoWireViewModel="True"
Title="{Binding Title}" Height="350" Width="525">
<Window.DataContext>
<local:MainWindowViewModel/>
</Window.DataContext>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.Resources>
<DataTemplate DataType="{x:Type model:PersonModel}">
<view:PersonUserControl/>
</DataTemplate>
</Grid.Resources>
<TextBlock Text="ItemsControl Example" FontWeight="Bold" Margin="4 10"/>
<Border BorderThickness="1" BorderBrush="Silver" Margin="4" Grid.Row="1">
<ScrollViewer HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Persons}"/>
</ScrollViewer>
</Border>
<TextBlock Text="ListBox Example" FontWeight="Bold" Margin="4 10" Grid.Column="1"/>
<ListBox ItemsSource="{Binding Persons}" Margin="4" Grid.Row="1" Grid.Column="1">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</Grid>
</Window>

prism:ViewModelLocator.AutoWireViewModel="True" sets the DataContext of the PersonUserControl to a view model which means that the binding to the properties of the PersonModel object that you create in the MainWindowViewModel fails.
So you should remove prism:ViewModelLocator.AutoWireViewModel="True" from the XAML markup.

Related

Prism 7: Can’t display view

I'm trying to display a view with prism region manager. The problem is that Views are added to the RegionManager and ActiveViews is set but nothing is displaying in MainView(StartWindowView).
My Bootstrapper:
public class Bootstrapper: UnityBootstrapper
{
private readonly Action<Window> aR;
public Bootstrapper(Action<Window> AR)
{
aR = AR;
}
protected override DependencyObject CreateShell()
{
return Container.TryResolve<Views.StartWindowView>();
}
protected override void InitializeShell()
{
aR(Container.TryResolve<Views.StartWindowView>());
}
protected override void ConfigureContainer()
{
base.ConfigureContainer();
Container.RegisterType(typeof(object), typeof(Views.TestView),"PlotListView");
Container.RegisterType(typeof(object), typeof(Views.SettingsView), "SettingsView");
Container.RegisterType<IAutoCadService, AutoCadService>
(new ExternallyControlledLifetimeManager());
Container.RegisterType<IPlotListViewModel, PlotListViewModel>
(new ExternallyControlledLifetimeManager());
}
}
My MainWindow(StartWindowView) with RegionManager.RegionName="ContentRegion":
Window x:Class="PlottingFastAutoCAD2016.Views.StartWindowView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Background="LightSkyBlue"
x:Name="window"
xmlns:res="clr-namespace:PlottingFastAutoCAD2016.ViewModels"
d:DataContext="{x:Static res:StartWindowViewModelDesign.Instanc}"
xmlns:prism="http://prismlibrary.com/"
prism:ViewModelLocator.AutoWireViewModel="True"
ResizeMode="NoResize"
SizeToContent="WidthAndHeight"
d:DesignHeight="500"
d:DesignWidth="600">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Button Width="50"
Grid.Column="0"
Padding="0"
HorizontalAlignment="Left"
BorderThickness="0"
Height="Auto"
Click="Button_Click"
Command="{Binding ElementName=window,
Path=DataContext.NavigationCommand}"
CommandParameter="PlotListView"
Background="Transparent">
<StackPanel VerticalAlignment="Stretch"
Margin="3">
<Image Stretch="Fill"
Source="/PlottingFastAutoCAD2016;component/Resources/Icon/printer-.png"/>
<TextBlock Text="Plot"
HorizontalAlignment="Center"
Foreground="White"/>
</StackPanel>
</Button>
<Button Width="50"
Grid.Column="1"
Padding="0"
BorderThickness="0"
Height="Auto"
Command="{Binding ElementName=window,
Path=DataContext.NavigationCommand}"
CommandParameter="SettingsView"
Background="Transparent">
<StackPanel VerticalAlignment="Stretch"
Margin="3">
<Image Stretch="Fill"
Source="/PlottingFastAutoCAD2016;component/Resources/Icon/settings.png"/>
<TextBlock Text="Settings"
HorizontalAlignment="Center"
Foreground="White"/>
</StackPanel>
</Button>
</Grid>
<ItemsControl prism:RegionManager.RegionName="ContentRegion"
Grid.Row="1"
x:Name="contentRegion"
/>
</Grid>
</Window>
My ModelView:
public class StartWindowViewModel : BindableBase, IStartWindowViewModel
{
private readonly IRegionManager regionManager;
public StartWindowViewModel(IRegionManager regionManager)
{
this.regionManager = regionManager;
NavigationCommand = new DelegateCommand<string>(Navigate);
}
private void Navigate(string uri)
{
regionManager.RequestNavigate("ContentRegion", new Uri(uri, UriKind.Relative),
r => {
if (r != null) ;
//MessageBox.Show("Result: "+r.Result);
else MessageBox.Show("Error: " + r.Error.Message);
});
}
public DelegateCommand<string> NavigationCommand { get; set; }
}
Anyone have idea what is going on? I have spent three days to resolve it but no luck.

Custom Data Binding to more than one thing WPF C#

I have a XAML file which has two things,
a Combo Box
a stackpanel
How to I make it such that a change in the combo box will automatically get the stackpanel to switch from one stack panel to another stackpanel.
My comboBox is something like
<ComboBox x:Name="MCbConnect" SelectedIndex="{Binding EnConnectionType}" Loaded="m_cbConnect_Loaded" SelectionChanged="m_cbConnect_SelectionChanged" Width="100"></ComboBox>
where EnConnectionType is a property like this
private ConnectionType _enConnectionType;
public ConnectionType EnConnectionType
{
get { return _enConnectionType; }
set { SetProperty(ref _enConnectionType, value, "EnConnectionType"); }
}
And ConnectionType is
public enum ConnectionType { Rs232 = 0, Can = 1, Ethernet = 2 };
So i have implemented INotifyChanged interface here already. But I dont know how to bind this data with a stackpanel container which will allow me to switch to a different stackpanel view automatically in the background.
Example of a XAML that i would like to switch to is
<GroupBox x:Class="Gui.CtrlCommSocketSettings"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:src="clr-namespace:Akribis.Gui"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
Header="Comm Settings"
mc:Ignorable="d"
d:DesignHeight="80" d:DesignWidth="300">
<Grid Height="70" VerticalAlignment="Top">
<Grid.Resources>
<Style TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Right"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="0,0,3,0"/>
</Style>
<Style TargetType="TextBox">
<Setter Property="Width" Value="120"/>
<Setter Property="Margin" Value="0,1"/>
</Style>
<Style TargetType="CheckBox">
<Setter Property="Margin" Value="0,4"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Server:" Name="MTextBlockServer"/>
<TextBlock Grid.Row="1" Text="Port:"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Server}" Name="MTextBoxServer"/>
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding Port}"/>
</Grid>
with cs file with something like
namespace Gui
{
public partial class CtrlCommSocketSettings
{
public CtrlCommSocketSettings()
{
InitializeComponent();
}
}
}
I dont want to do this programatically as I know i want to avoid coupling between the model and the view together.
example of what i dont want to do but have at the moment:
in the main XAML, I have an empty stackpanel
<StackPanel Orientation="Vertical" Name="MCtrlCommSettings"></StackPanel>
and i am explicitly adding to this stackpanel by doing something like
MCtrlCommSettings.Children.Clear();
MCtrlCommSettings.Children.Add(_serverCtrlCommSettings);
How do i go about doing this automatically? Like how InotifyChanges will update between views and model automatically. Any suggestion will be gladly welcomed.
Reading online, it seems i need to implement some kind of an observable list
I'd suggest to go with DataTemplates and separate ViewModels for each connection type. Just specify DataTemplates with target type of each ViewModel, and after that use ContentControl, with content property binded CurrentConnection property of your main view model, which would depend on the SelectedValue of the ConnectionType combobox.
UPDATE
Source code to illustrate the solution:
XAML
<Window x:Class="MVVMExample.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:MVVMExample"
mc:Ignorable="d"
Title="MainWindow" Height="250" Width="425">
<Window.Resources>
<DataTemplate DataType="{x:Type local:Rs232ConnectionViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Rs232Port:" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding Rs232Port}" />
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:CanConnectionViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="CanParam:" />
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding CanParam}" />
</Grid>
</DataTemplate>
<DataTemplate DataType="{x:Type local:EthernetConnectionViewModel}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="Server:" />
<TextBlock Grid.Row="1" Text="Port:"/>
<TextBox Grid.Row="0" Grid.Column="1" Text="{Binding EthernetServer}" />
<TextBox Grid.Row="1" Grid.Column="1" Text="{Binding EthernetPort}"/>
</Grid>
</DataTemplate>
</Window.Resources>
<Window.DataContext>
<local:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ComboBox x:Name="MCbConnect" SelectedValue="{Binding CurrentConnectionType}" ItemsSource="{Binding ConnectionTypes}">
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ConnectionType}" />
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<ContentControl Grid.Row="1" Content="{Binding CurrentConnectionType}" />
</Grid>
</Window>
C#
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
}
public class MainWindowViewModel : INotifyPropertyChanged
{
ObservableCollection<ConnectionTypeViewModel> _connectionTypes;
public ObservableCollection<ConnectionTypeViewModel> ConnectionTypes
{
get { return _connectionTypes; }
private set { _connectionTypes = value; }
}
public MainWindowViewModel()
{
ConnectionTypes = new ObservableCollection<ConnectionTypeViewModel>(new ConnectionTypeViewModel[]
{
new Rs232ConnectionViewModel() { ConnectionType = ConnectionType.Rs232, Rs232Port="COM1"},
new CanConnectionViewModel() { ConnectionType = ConnectionType.Can},
new EthernetConnectionViewModel() { ConnectionType = ConnectionType.Ethernet, EthernetServer="tcp://xxxx"},
});
CurrentConnectionType = ConnectionTypes[2];
}
private ConnectionTypeViewModel _currentConnectionType;
public ConnectionTypeViewModel CurrentConnectionType
{
get { return _currentConnectionType; }
set
{
_currentConnectionType = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(CurrentConnectionType)));
}
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class ConnectionTypeViewModel : INotifyPropertyChanged
{
private ConnectionType _connectionTypeName;
public ConnectionType ConnectionType
{
get { return _connectionTypeName; }
set { _connectionTypeName = value; OnPropertyChanged(); }
}
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
public event PropertyChangedEventHandler PropertyChanged;
}
public class Rs232ConnectionViewModel : ConnectionTypeViewModel
{
private string _rs232Port;
public string Rs232Port
{
get { return _rs232Port; }
set { _rs232Port = value; OnPropertyChanged(); }
}
}
public class CanConnectionViewModel : ConnectionTypeViewModel
{
private string _canParam;
public string CanParam
{
get { return _canParam; }
set { _canParam = value; OnPropertyChanged(); }
}
}
public class EthernetConnectionViewModel : ConnectionTypeViewModel
{
private string _ethernetServer;
public string EthernetServer
{
get { return _ethernetServer; }
set { _ethernetServer = value; OnPropertyChanged(); }
}
private string _ethernetPort;
public string EthernetPort
{
get { return _ethernetPort; }
set { _ethernetPort = value; OnPropertyChanged(); }
}
}
public enum ConnectionType { Rs232 = 0, Can = 1, Ethernet = 2 };

Silverlight Listbox scrolling only works if i set the height

i have a listbox and i am trying to make the scrolling work without having to set the height, is this possible? Thanks. Below is the code. The scrolling does not work.
<ListBox Name="EmployeeListBox" Background="Transparent"
SelectionMode="Single"
ItemsSource="{Binding Employees, Mode=TwoWay}" >
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold" Text="Name:" />
<TextBlock x:Name="TextBlock1" Grid.Column="1" Grid.Row="0"
Text="{Binding Name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and viewmodel:
public class EmployeeDataContext
{
public List<Employee> Employees { get; set; }
public EmployeeDataContext()
{
GetEmployeeList();
}
private void GetEmployeeList()
{
Employees = new List<Employee>();
for (int i = 0; i < 100; ++i)
{
Employees.Add(new Employee() { Name = "Gema Arterton" });
}
}
}
public class Employee
{
public string Name { get; set; }
}
(sorry for my bad english)
It depends too on what control is the listbox inside. If your listbox is inside a Grid, it should take all the space of that grid - if it is inside a stackpanel it will use the least amount os space possible so you will have to use fixed height/width. Try this:
<UserControl...>
<Grid>
<ListBox HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
</ListBox>
</Grid>
</UserControl/>
The listbox should use all screen size and show vertical scrollbars if there is enough items.
You can set the height in scrollviewer
<ScrollViewer VerticalScrollBarVisibility="Visible" Height="480">
<Grid Margin="0,0,0,50">
</Grid>
</ScrollViewer>

Add Custom control to stackpanel using Viewmodel WPF

I have a customcontrol, need to be added as many times when clicing on a button. This has to achived from MVVM WPF pattern. i have pasted my code here. It will be great if you guys can help on this.
Please help me
<Window x:Class="DOCS_APP_ELEMENT.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:usercontrol="clr-namespace:DOCS_APP_ELEMENT"
xmlns:viewModel="clr-namespace:DOCS_APP_ELEMENT.ViewModels"
Title="MainWindow" Height="350" Width="400">
<Grid Margin="10" Name="myGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="0">
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Label Content="Type:" Margin="20,0,4,0"></Label>
<ComboBox Name="cmbQuestionType" Width="300" Style="{Binding ComboBoxStyle}" Margin="0,5,0,5" IsEnabled="False"> </ComboBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,5">
<Label Content="Question:" Margin="0,0,4,0"></Label>
<TextBox Name="txtQuestion" Width="300" Height="50" Margin="0,2,0,0" AcceptsReturn="True"></TextBox>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="0,5,0,5" >
<Label Content="Answer:" Margin="7,0,4,0"></Label>
<TextBox Name="txtAnswer" Style="{StaticResource TextboxStyle}" Margin="0,2,0,0"></TextBox>
</StackPanel>
</StackPanel>
</Border>
<Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="1" Margin="0,10,0,0" >
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="100">
<StackPanel Name="myCustom" Orientation="Vertical" >
**<!--<ADD CUSTOM CONTROl HERE>-->**
</StackPanel>
</ScrollViewer>
</Border>
<Border CornerRadius="5" BorderBrush="SteelBlue" BorderThickness="2" Grid.Row="2" Margin="0,10,0,0">
<Border.DataContext>
<viewModel:ViewElements/>
</Border.DataContext>
<Button Name="btnAdd" Content="Add" DataContext="{Binding }" Command="{Binding Path=AddInstace}"></Button>
</Border>
</Grid>
I'd do it the following way:
have a ObservableCollection<CustomClass> in your ViewModel. The representation of your CustomClass is a DataTemplate with your above Markup.
Here's a full working example:
<Grid>
<Grid.DataContext>
<local:MyViewModel></local:MyViewModel>
</Grid.DataContext>
<StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto" Height="200">
<ItemsControl ItemsSource="{Binding CustomControls}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="Green">
<StackPanel>
<TextBlock Text="I am a Custom Control"></TextBlock>
<TextBlock Text="{Binding DisplayValue}"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</ScrollViewer>
<Button Width="200" Height="50" Command="{Binding AddControlCommand}">Add Control</Button>
<Button Width="200" Height="50" Command="{Binding RemoveControlCommand}">Remove Control</Button>
</StackPanel>
</Grid>
ViewModel:
public abstract class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
public class RelayCommand : ICommand
{
... look that up yourself if you don't have a derived command class yet in your project...
}
public class MyViewModel : ViewModel
{
public ICommand AddControlCommand
{
get
{
return new RelayCommand(x=>this.AddControl());
}
}
public ICommand RemoveControlCommand
{
get
{
return new RelayCommand(x => this.RemoveControl());
}
}
private void AddControl()
{
CustomControls.Add(new CustomControl() {DisplayValue = "newControl"});
}
private void RemoveControl()
{
if (CustomControls.Count > 0)
{
CustomControls.Remove(CustomControls.Last());
}
}
private ObservableCollection<CustomControl> _customControls;
public ObservableCollection<CustomControl> CustomControls
{
get
{
if (_customControls == null)
{
_customControls = new ObservableCollection<CustomControl>()
{
new CustomControl() {DisplayValue = "Control1"},
new CustomControl() {DisplayValue = "Control2"},
new CustomControl() {DisplayValue = "Control3"}
};
}
return _customControls;
}
}
}
public class CustomControl : ViewModel
{
public string DisplayValue { get; set; }
}
To use the MVVM pattern you'll need a ViewModel that has a list of data objects which are bound to your custom controls. This controls can be generated by an ItemsControl. As I don't know your data I can just give you a general example.
MainWindow.xaml (View)
<ItemsControl ItemsSource="{Binding DataList}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<!-- instead of the TextBlock you would use your control -->
<TextBlock Text="{Binding}" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
MainWindow.xaml.cs (View code-behind)
public MainWindow()
{
DataContext = new MainWindowViewModel();
InitializeComponent();
}
MainWindowViewModel.cs (ViewModel)
public class MainWindowViewModel
{
public ObservableCollection<string> DataList { get; set; }
public MainWindowViewModel()
{
DataList = new ObservableCollection<string>
{
"Data 1",
"Data 2",
"Data 3"
};
}
}
The Binding for the Text property has no path as the DataContext here is the string object of DataList. If you use complex objects, you have to use the Path to the property of the object (e.g. Text={Binding Path=myProperty})

WPF Binding to child of current item not updating

I am currently binding to an ObservableCollection using an ICollectionView, myCollectionView. The contents of that collection are being selected from a ComboBox. Each collection item, myCollectionItem, has a VisualBrush, myVisualBrush, as a child and the CurrentItem's brush is displayed in a preview panel.
The collection item also a child object, myItemChild, which contains a number of its own properties that are used to generate a slider. This slider alters properties on the preview panel.
This all works as expected.
When the CurrentItem of the Collectionview is changed the preview panel updates correctly but the slider continues to show the previous CurrentItem's myItemChild.
The change to myItemChild is not being raised, how should I handle this situation?
Its highly probable I have missed something obvious so any pointers appreciated.
Regards
Rob
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<!-- Combo Box for selection of item-->
<ComboBox Grid.Row="0" ItemsSource="{Binding myCollectionView, Mode=TwoWay}" IsSynchronizedWithCurrentItem="True">
<ComboBox.ItemTemplate>
<DataTemplate DataType="{x:Type vm:myCollectionItem}" >
<StackPanel>
<Rectangle Height="40" Width="40" Fill="{Binding myVisualBrush}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- Panel to preview item-->
<ContentControl Grid.Row="1" Content="{Binding myCollectionView/}">
<ContentControl.ContentTemplate>
<DataTemplate DataType="{x:Type vm:myCollectionItem}" >
<Rectangle Margin="20" Fill="{Binding myVisualBrush}" />
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
<!-- Slider to edit item-->
<ContentControl Grid.Row="2" Content="{Binding myCollectionView/}">
<ContentControl.ContentTemplate>
<DataTemplate DataType="{x:Type vm:myCollectionItem}" >
<ContentControl Content="{Binding myItemChild}">
<ContentControl.ContentTemplate>
<DataTemplate DataType="{x:Type vm:myCollectionItemChild}" >
<StackPanel>
<Label Content="{Binding myValueLabel, Mode=OneWay}"/>
<Slider Value="{Binding myValue, Mode=TwoWay}" Maximum="{Binding myValueMax}" Minimum="{Binding myValueMin}"/>
</StackPanel>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</DataTemplate>
</ContentControl.ContentTemplate>
</ContentControl>
</Grid>
I tried to reproduce your problem, but it works without problems.
Here is my code-behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
var items = new ObservableCollection<myCollectionItem>{
new myCollectionItem(Brushes.Red, new myCollectionItemChild("Red", 15, 0, 80)),
new myCollectionItem(Brushes.Green, new myCollectionItemChild("Green", 0.7, 0, 1)),
new myCollectionItem(Brushes.Purple, new myCollectionItemChild("Purple", 22,11,33))};
this.DataContext = new Model { myCollectionView = items };
}
}
public class Model
{
public ObservableCollection<myCollectionItem> myCollectionView { get; set; }
}
public class myCollectionItem
{
public myCollectionItem(Brush br, myCollectionItemChild child)
{
this.myVisualBrush = br;
this.myItemChild = child;
}
public Brush myVisualBrush { get; set; }
public myCollectionItemChild myItemChild { get; set; }
}
public class myCollectionItemChild
{
public myCollectionItemChild(string label, double val, double min, double max)
{
this.myValueLabel = label;
this.myValue = val;
this.myValueMin = min;
this.myValueMax = max;
}
public string myValueLabel { get; set; }
public double myValue { get; set; }
public double myValueMax { get; set; }
public double myValueMin { get; set; }
}
Also, you don't need to use control templates. It can be written more clearly:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="80"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<!-- Combo Box for selection of item-->
<ComboBox Grid.Row="0" ItemsSource="{Binding myCollectionView, Mode=TwoWay}" IsSynchronizedWithCurrentItem="True">
<ComboBox.ItemTemplate>
<DataTemplate DataType="{x:Type vm:myCollectionItem}" >
<StackPanel>
<Rectangle Height="40" Width="40" Fill="{Binding myVisualBrush}"/>
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
<!-- Panel to preview item-->
<Rectangle Margin="20" Fill="{Binding myCollectionView/myVisualBrush}" Grid.Row="1" />
<!-- Slider to edit item-->
<StackPanel Grid.Row="2" DataContext="{Binding myCollectionView/myItemChild}">
<Label Content="{Binding myValueLabel, Mode=OneWay}"/>
<Slider Value="{Binding myValue, Mode=TwoWay}" Maximum="{Binding myValueMax}" Minimum="{Binding myValueMin}"/>
</StackPanel>
</Grid>

Resources