Adding UserControl dynamically on User interface - wpf

In my WPF application, I need to post n number of my user control in in form of rows and columns. My user control is like
The number of rows can be n, while number of columns will be either 1 or 2 depending on the view user chooses to use.
Here is the collection that contains my UserControls
private Collection<TemplateView> _templates;
public Collection<TemplateView> Templates { get { return _templates; } set { _templates = value; } }
And here is the XAML code that I used.
<ItemsControl ItemsSource="{Binding Templates}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="{Binding NumColumns}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Grid.Column" Value="{Binding ColumnIndex}" />
<Setter Property="Grid.Row" Value="{Binding RowIndex}" />
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<v:TemplateView Content="{Binding }" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
v:TemplateView is the UserControl whose n copied needs to be posted in rows/columns.
Here is some of the XAML showing binding of UserControl's controls.
<Label Content="{Binding Title, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"/>
<Label Content="{Binding Type, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}" />
<TextBlock><Hyperlink Command="{Binding DetailsViewCommand}">Details</Hyperlink>
</TextBlock>
<TextBlock><Hyperlink Command="{Binding AddCommand}">Add</Hyperlink>
And here is my UserControl's VIewModel's code
private ICommand _detailsViewCommand;
public ICommand DetailsViewCommand { get { return _detailsViewCommand ?? (_detailsViewCommand = new RelayCommand(DetailsView)); } }
public void DetailsView()
{
}
private ICommand _addCommand;
public ICommand AddCommand { get { return _addCommand ?? (_addCommand = new RelayCommand(Add)); } }
private void Add()
{
}
private string _layerType;
public string LayerType
{
get { return _layerType; }
set { _layerType = value; }
}
private string _title;
public string Title
{
get { return _title; }
set { _title = value; }
}
All copies of this UserControl will carry different information in labels and Image. So I need to know in the userControl's ViewModel, which UserControls (or which item in Templates Collection) has been clicked when user presses the Details button.
Above XAML and code does not tell me which item/user control was clicked on Details button click. So how should I accomplish the two tasks?

Related

WPF DataGridTemplateColumn MVVM DataContext Property Accessibility Issue

I am trying to get access to a Boolean property value inside each row so I can use it to set a button visibility, however I am having trouble accessing this with a DataGridTemplateColumn. I was able to get the entire row object into a parameter that I pass to the button command, however I can't get just the UseSetting value to pass to the Visibility converter. I tried piggy backing off the text column as shown below, however the converters only seem to fire when the view is first loaded. Using breakpoints I can see that subsequent changes to the UseSetting property do not fire the converters. I do have NotifyOfPropertyChange setup correctly on the custom class used in the DataGrid.
What is the best way to gain access to a row property when using DataGridTemplateColumn? The reason why I am creating my own check boxes inside a DataGridTemplateColumn instead of using a CheckboxColumn is because the CheckboxColumn requires the row to be selected before it can be checked, and I need my checkbox to check upon a single click.
To be clear, there is no code behind for this view. Everything is in the view model, like the data grid's item source which is an ObservableCollection of the custom class "SharedSetting" that I included below.
<DataGrid MaxHeight="400" VerticalScrollBarVisibility="Auto" BorderThickness="1" CanUserAddRows="False" CanUserDeleteRows="False" BorderBrush="{DynamicResource AccentBaseColorBrush}" GridLinesVisibility="Horizontal" AutoGenerateColumns="False" ItemsSource="{Binding SharedSettings, NotifyOnSourceUpdated=True}">
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}" >
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="FontSize" Value="10" />
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>
<DataGridTextColumn Width="250" Header="Setting" Binding="{Binding Setting}" />
<DataGridTextColumn Width="300" Header="Value" ElementStyle="{StaticResource WrapText}" Binding="{Binding Value}" />
<DataGridTextColumn Width="75" Header="Use Setting" Binding="{Binding UseSetting, Mode=TwoWay}" x:Name="stackRowUseSetting" />
<DataGridTemplateColumn Width="50" >
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid Width="30" Height="30" x:Name="stackRow2">
<Button Background="Transparent" Foreground="{StaticResource AccentColorBrush}" ToolTip="Do Not Use Setting" Visibility="{Binding ElementName=stackRowUseSetting, Path=Binding, Converter={StaticResource TrueToVisibleConverter}}" BorderThickness="0" Margin="0,0,0,0" DataContext="{Binding ElementName=MainGrid, Path=DataContext}" Command="{Binding ToggleUseSettingCommand}" CommandParameter="{Binding ElementName=stackRow2,Path=DataContext}">
<iconPacks:PackIconMaterial Kind="CheckCircleOutline" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Button>
<Button Background="Transparent" Foreground="{StaticResource AccentColorBrush}" ToolTip="Use Setting" Visibility="{Binding ElementName=stackRowUseSetting, Path=Binding, Converter={StaticResource FalseToVisibleConverter}}" BorderThickness="0" Margin="0,0,0,0" DataContext="{Binding ElementName=MainGrid, Path=DataContext}" Command="{Binding ToggleUseSettingCommand}" CommandParameter="{Binding ElementName=stackRow2,Path=DataContext}">
<iconPacks:PackIconMaterial Kind="CheckboxBlankCircleOutline" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,0" />
</Button>
</Grid>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
</DataGrid.Columns>
</DataGrid>
Also, the above XAML is just what I have right now. There are most likely some items here that are redundant and not needed. I have added and removed so many things trying to get this to work that it's a bit sloppy at the moment.
Here is the SharedSetting class with INotifyPropertyChanged
public class SharedSetting : INotifyPropertyChanged
{
private bool _useSetting;
private object _o;
private string _value;
private string _setting;
private string _group;
public SharedSetting(string groupName, string settingName, string settingValue, object value, bool use=false)
{
Group = groupName;
Setting = settingName;
Value = settingValue;
Object = value;
UseSetting = use;
}
public SharedSetting()
{
}
public string Group
{
get { return _group; }
set
{
_group = value;
NotifyPropertyChanged();
}
}
public string Setting
{
get { return _setting; }
set
{
_setting = value;
NotifyPropertyChanged();
}
}
public string Value
{
get { return _value; }
set
{
_value = value;
NotifyPropertyChanged();
}
}
public object Object
{
get { return _o; }
set
{
_o = value;
NotifyPropertyChanged();
}
}
public bool UseSetting
{
get { return _useSetting; }
set
{
_useSetting = value;
NotifyPropertyChanged();
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
Here is one of the converters.
public sealed class TrueToVisibleConverter : MarkupExtension, IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var flag = false;
if (value is bool)
{
flag = (bool) value;
}
var visibility = (object) (Visibility) (flag ? 0 : 2);
return visibility;
}
public override object ProvideValue(IServiceProvider serviceProvider)
{
return this;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
if (value is Visibility)
{
var visibility = (object) ((Visibility) value == Visibility.Visible);
return visibility;
}
return (object) false;
}
}
UPDATE 3/14/18
To address the first answer supplied below regarding removing my DataContext setting and using the properties just like all of the other columns, that does not work. That was the first thing I tried long long ago only to learn that DataGridTemplateColumn doesn't inherit the row's data context like the other columns do (the reason for my frustration in my below comment yesterday). I've included a screenshot showing the intellisense error stating that the property doesn't exist, when it is used the same way as the column above it.
You overright DataContext for your Button. DataContext="{Binding ElementName=MainGrid, Path=DataContext}" is wrong, so delete it and bind to the property as you do it in DataGridTextColumn. And for the binding of Command to the command which is not in SharedSetting use ElementName(as you have done it for DataContext) or RelativeSource.
Update:
Should work, but alternatively you can try
<Button Visibility="{Binding DataContext.UseSetting, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=DataGridRow}, Converter={StaticResource TrueToVisibleConverter}}" />

Bindings in ItemsControl aren't working

I have a bunch of different controls (mainly buttons with textblocks inside them) that I just put in an ItemsControl. All the bindings worked correctly before I put the controls in the ItemsControl. Now, none of the commands work, or the Text bindings. Everything just shows up as 0's (I'm binding to doubles). I double-checked to make sure my ObservableCollection was actually filled with items, and that those items' properties actually had data in them. The ItemsControl does properly create a new row for each item in the collection.
Here's my model:
public class VehicleModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private List<double> _nowTime = new List<double>();
public List<double> NowTime
{
get { return _nowTime; }
set { _nowTime = value; OnPropertyChanged("Nowtime"); }
}
private List<double> _VehLat = new List<double>();
public List<double> VehLat
{
get { return _VehLat; }
set { _VehLat = value; OnPropertyChanged("VehLat"); }
}
private int _currentIteration;
public int CurrentIteration //used to hold current index of the list of data fields
{
get { return _currentIteration; }
set
{
_currentIteration = value;
OnPropertyChanged("CurrentIteration");
OnPropertyChanged("CurrentVehLat");
}
}
private double _currentVehLat;
public double CurrentVehLat
{
get { return _currentVehLat; }
set { _currentVehLat = VehLat[CurrentIteration]; OnPropertyChanged("CurrentVehLat"); }
}
}
//Used to loop through the above list and set the currentVehLat equal to
//the current iteration of the list
public void SetData(int i)
{
CurrentIteration = i;
}
In my viewmodel, I have an ObservableCollection holding these VehicleModels:
private ObservableCollection<VehicleModel> _vehicleCollection = new ObservableCollection<VehicleModel>();
public ObservableCollection<VehicleModel> VehicleCollection
{
get
{
return _vehicleCollection;
}
set
{
if (null != value)
{
_vehicleCollection = value;
OnPropertyChanged("VehicleCollection");
}
}
}
private ICommand showTimeWindowCmd;
public ICommand ShowTimeWindowCmd
{
get
{
return showTimeWindowCmd;
}
set
{
showTimeWindowCmd = value;
}
}
public MainWindowViewModel()
{
ShowTimeWindowCmd = new RelayCommand(ShowTimeWindow, param => this.canExecute);
}
public void ShowTimeWindow(object parameter)
{
//do stuff
}
Finally, the .xaml for my ItemsControl. I'm only showing one because there's a lot of them, but the are all exactly the same, just bound to different properties (all doubles like the one showed in the view model). Note: The controls show up properly, just not the bindings:
<ItemsControl Grid.Row="8"
Grid.ColumnSpan="16"
ItemsSource="{Binding VehicleCollection}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
//bunch here
</Grid.ColumnDefinitions>
<Button Grid.ColumnSpan="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ShowTimeWindowCmd}">
<Button.CommandParameter>
<MultiBinding Converter="{StaticResource converter}">
<Binding Path="NowTime" />
<Binding Path="VehLat" />
<Binding Source="FISH Latitude" />
<Binding />
</MultiBinding>
</Button.CommandParameter>
<Button.Template>
<ControlTemplate>
<TextBlock FontSize="17"
Text="{Binding Path=CurrentVehLat,
Mode=TwoWay,
UpdateSourceTrigger=PropertyChanged,
StringFormat={}{0:F7}}"
Visibility="{Binding IsChecked,
ElementName=FishChkBox,
Converter={StaticResource BoolToVisConverter}}" />
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Edit: I am setting my datacontext:
<Window.DataContext>
<viewmodel:MainWindowViewModel />
</Window.DataContext>
Edit 2: Added the command being called in the viewmodel. The first two command parameters are properties of the model.
As the DataContext for the ItemsSource is the collection of Model, for the inners controls this will be its DataContext too, so you need to explicitly specify the Path to point to ViewModel properties:
<Button Grid.ColumnSpan="4"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}},
Path=DataContext.ShowTimeWindowCmd}"
>
The DataContext for each <ItemTemplate> in your ItemsControl is set to the individual item.
So what is being rendered is
<ItemsControl ItemsSource="{Binding VehicleCollection}">
<ContentPresenter> <!-- DataContext is VehicleModel[0] -->
<Grid...>
<!-- DataContext is inherited, so still VehicleModel[0] -->
<Button Command="{Binding ShowTimeWindowCmd}" .. />
...
</Grid>
</ContentPresenter>
<ContentPresenter> <!-- DataContext is VehicleModel[1] -->
<Grid...>
<!-- DataContext is inherited, so still VehicleModel[1] -->
<Button Command="{Binding ShowTimeWindowCmd}" .. />
...
</Grid>
</ContentPresenter>
etc...
</ItemsControl>
You need to change the Source of the command bindings so that instead of pointing to the default DataContext.ShowTimeWindowCmd which results in VehicleModel.ShowTimeWindowCmd, they point to ItemsControl.DataContext.ShowTimeWindowCmd which looks from your code like it should result in MainWindowViewModel.ShowTimeWindowCmd
There's many ways to do that, but easiest to understand is by using the ElementName property of the binding.
<ItemsControl x:Name="MyItemsControl"...>
...
<Button Command="{Binding ElementName=MyItemsControl, Path=DataContext.ShowTimeWindowCmd}" .. />
...
</ItemsControl>
A RelativeSource binding would also work here if you don't want to hardcode a Name like this :
<ItemsControl ...>
...
<Button Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}, Path=DataContext.ShowTimeWindowCmd}" .. />
...
</ItemsControl>

BarButtonItems and BarSubItems on Bound RibbonControl

I am developing a WPF application using DevExpress controls, such as the Ribbon control. I want to be able to place buttons on the ribbon dynamically. I would like to be able to support both regular buttons and drop-down buttons.
I was thinking something similar to below.
WPF View:
<UserControl.Resources>
<DataTemplate x:Key="RibbonCommandTemplate">
<ContentControl>
<dxb:BarButtonItem RibbonStyle="All" Content="{Binding Caption}"
Command="{Binding (dxr:RibbonControl.Ribbon).DataContext.MenuExecuteCommand,
RelativeSource={RelativeSource Self}}"
CommandParameter="{Binding}" />
</ContentControl>
</DataTemplate>
</UserControl.Resources>
<Grid>
<DockPanel>
<dxr:RibbonControl DockPanel.Dock="Top" RibbonStyle="Office2010">
<dxr:RibbonDefaultPageCategory>
<dxr:RibbonPage Caption="Home">
<dxr:RibbonPageGroup Caption="Dynamic Commands"
ItemLinksSource="{Binding DynamicCommands}"
ItemTemplate="{StaticResource RibbonCommandTemplate}" />
</dxr:RibbonPage>
</dxr:RibbonDefaultPageCategory>
</dxr:RibbonControl>
<Grid/>
</DockPanel>
</Grid>
View Model:
public class RibbonCommand
{
public string Caption { get; set; }
public int CommandCode { get; set; }
public ObservableCollection<RibbonCommand> SubItems { get; set; }
public bool HasSubItems
{
get
{
if (SubItems != null)
return (SubItems.Count > 0);
else
return false;
}
}
}
[POCOViewModel]
public class MainViewModel
{
public ObservableCollection<RibbonCommand> DynamicCommands { get; set; }
public MainViewModel()
{
DynamicCommands = new ObservableCollection<RibbonCommand>();
// Regular buttons.
DynamicCommands.Add(new RibbonCommand() { Caption = "Button 1", CommandCode = 1 });
DynamicCommands.Add(new RibbonCommand() { Caption = "Button 2", CommandCode = 2 });
// Drop-down button.
RibbonCommand dropDownCommand = new RibbonCommand() { Caption = "Drop-Down", CommandCode = 3 };
dropDownCommand.SubItems = new ObservableCollection<RibbonCommand>();
dropDownCommand.SubItems.Add(new RibbonCommand() { Caption = "Sub-Item 1", CommandCode = 31 });
dropDownCommand.SubItems.Add(new RibbonCommand() { Caption = "Sub-Item 2", CommandCode = 32 });
dropDownCommand.SubItems.Add(new RibbonCommand() { Caption = "Sub-Item 3", CommandCode = 33 });
DynamicCommands.Add(dropDownCommand);
}
public void MenuExecute(RibbonCommand command)
{
MessageBox.Show(string.Format("You clicked command with ID: {0} (\"{1}\").",
command.CommandCode, command.Caption), "Bound Ribbon Control");
}
}
This code does successfully populate the ribbon with items I added in my DynamicCommands collection, but I would like to support drop-down buttons for items with anything in the SubItems collection (the third button on my example above).
Is there a way to conditionally change the type of control displayed in a DataTemplate. If the object's HasSubItems is true, I would like a BarSubItem placed on the ribbon. If it is false, I will keep the BarButtonItem.
If this is regular WPF rather than UWP, and if the DataContexts of your subitems are of different types, you can define multiple DataTemplates with DataType attributes in the RibbonPageGroup's resources (where they won't be in scope for anything that doesn't need them), and get rid of that ItemTemplate attribute:
<dxr:RibbonPageGroup
Caption="Dynamic Commands"
ItemLinksSource="{Binding DynamicCommands}">
<dxr:RibbonPageGroup.Resources>
<DataTemplate DataType="{x:Type local:RibbonCommand}">
<!-- XAML stuff -->
</DataTemplate>
<DataTemplate DataType="{x:Type local:SpecialRibbonCommand}">
<!-- Totally different XAML stuff -->
</DataTemplate>
</dxr:RibbonPageGroup.Resources>
<!-- etc -->
For another option, you should be able to write a DataTemplateSelector and give it to the RibbonControl's ToolbarItemTemplateSelector property or the RibbonPageGroup's ItemTemplateSelector property.
Lastly, write one complicated DataTemplate with multiple child controls superimposed in a Grid, and a series of triggers that show only the appropriate one based on properties of the DataContext. If you've only got two different options to handle, this may be the quickest and easiest route.
<DataTemplate x:Key="RibbonCommandTemplate">
<Grid>
<Label x:Name="OneThing" />
<Label x:Name="AnotherThing" />
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding HasSubItems}" Value="True">
<Setter TargetName="OneThing" Property="Visibility" Value="Collapsed" />
<Setter TargetName="AnotherThing" Property="Visibility" Value="Visible" />
</DataTrigger>
<!-- Other triggers for HasSubItems == False, whatever -->
</DataTemplate.Triggers>
</DataTemplate>
This seems pretty crude, but I've done it so much in WPF that I'm getting desensitized to it.
I figured out a way to do this using a DataTemplateSelector class:
using System.Windows;
using System.Windows.Controls;
using RibbonDynamicButtons.ViewModels;
namespace RibbonDynamicButtons.Selectors
{
public class RibbonCommandSelector : DataTemplateSelector
{
public DataTemplate CommandTemplate { get; set; }
public DataTemplate SubCommandTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if(item is RibbonCommand)
{
RibbonCommand command = (RibbonCommand)item;
if (command.HasSubItems)
return SubCommandTemplate;
else
return CommandTemplate;
}
return base.SelectTemplate(item, container);
}
}
}
I added my selector to the xaml as follows:
<UserControl
...
xmlns:Selectors="clr-namespace:RibbonDynamicButtons.Selectors">
<UserControlResources>
<DataTemplate x:Key="RibbonSubItemTemplate">
<ContentControl>
<dxb:BarButtonItem RibbonStyle="SmallWithText" Content="{Binding Caption}"
Command="{Binding (dxr:RibbonControl.Ribbon).DataContext.MenuExecuteCommand,
RelativeSource={RelativeSource Self}}" CommandParameter="{Binding}" />
</ContentControl>
</DataTemplate>
<Selectors:RibbonCommandSelector x:Key="RibbonCommandSelector">
<Selectors:RibbonCommandSelector.CommandTemplate>
<DataTemplate>
<ContentControl>
<dxb:BarButtonItem RibbonStyle="All"
Content="{Binding Caption}"
Command="{Binding (dxr:RibbonControl.Ribbon).DataContext.MenuExecuteCommand,
RelativeSource={RelativeSource Self}}"
CommandParameter="{Binding}" />
</ContentControl>
</DataTemplate>
</Selectors:RibbonCommandSelector.CommandTemplate>
<Selectors:RibbonCommandSelector.SubCommandTemplate>
<DataTemplate>
<ContentControl>
<dxb:BarSubItem RibbonStyle="All" Content="{Binding Caption}"
ItemLinksSource="{Binding SubItems}"
ItemTemplate="{StaticResource RibbonSubItemTemplate}" />
</ContentControl>
</DataTemplate>
</Selectors:RibbonCommandSelector.SubCommandTemplate>
</Selectors:RibbonCommandSelector>
</UserControlResources>
I bind the ItemTemplateSelector to my selector on the RibbonPageGroup:
<dxr:RibbonPageGroup Caption="Dynamic Commands" ItemLinksSource="{Binding DynamicCommands}"
ItemTemplateSelector="{StaticResource RibbonCommandSelector}" />
I did not need to make any changes to the View Model I included on my original question.

how to access the label inside datatemplate

hello everybody i have a listbox within which is a datatemplate.Inside it is checkbox,textbox,label...Wat i want is to get the value of the label wen the checkbox is unchecked? or any alternative as to how to access the label value but only wen the checkbox is unselected............PLease help me out.
the code is as
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="sp" Orientation="Horizontal" Margin="3,3,3,3" >
<CheckBox Name="chkSubject" IsChecked="{Binding RelativeSource{RelativeSource AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" VerticalAlignment="Center" Margin="0,0,4,0" Unchecked="chkSubject_Unchecked">
<TextBlock FontSize="11" Text="{Binding subject_name}" />
</CheckBox>
<Label Name="lbl_idOfSub" Content="{Binding subject_id}" Visibility="Visible">
</Label>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Since you're using binding on label, I'd go for accessing subject_id from the object the datatemplate is describing. Like this:
var subjectId = dataBoundItem.subject_id;
That's the correct way to go with MVVM and bindings.
UPDATE:
Here's the basic MVVM approach to solving this problem. First of all, I've cleaned up a bit your listbox declaration and added a trigger that sets IsSelected binding:
<ListBox ItemsSource="{Binding}">
<ListBox.Resources>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
</ListBox.Resources>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Name="sp" Orientation="Horizontal" Margin="3,3,3,3" >
<CheckBox Name="chkSubject" IsChecked="{Binding IsSelected}" VerticalAlignment="Center" Margin="0,0,4,0" Unchecked="chkSubject_Unchecked_1">
<TextBlock FontSize="11" Text="{Binding SubjectName}" />
</CheckBox>
<Label Name="lbl_idOfSub" Content="{Binding SubjectId}" Visibility="Visible"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Here, whenever value IsSelected on individual ListBoxItem changes, the "IsSelected" binding of the viewModel is changed. Here's the model:
public class SelectableItem : INotifyPropertyChanged
{
private string _subjectId;
private bool _isSelected;
private string _subjectName;
public string SubjectId
{
get { return _subjectId; }
set { _subjectId = value; OnPropertyChanged("SubjectId"); }
}
public bool IsSelected
{
get { return _isSelected; }
set { _isSelected = value; OnPropertyChanged("IsSelected"); }
}
public string SubjectName
{
get { return _subjectName; }
set { _subjectName = value; OnPropertyChanged("SubjectName"); }
}
// .. INotifyPropertyChangedImplementation
Your IsSelected will be set to true whenever relevant item is selected and to false whenever it is unselected. You may put your code in to the "set" item of the "IsSelected" property and check (value == false) and execute necessary piece of code as you see fit. This would be MVVM approach to the matter.
Using the event, you can do as follows:
private void chkSubject_Unchecked_1(object sender, RoutedEventArgs e)
{
FrameworkElement control = sender as FrameworkElement;
if (control == null)
return;
SelectableItem item = control.DataContext as SelectableItem;
if (item == null)
return;
string yourValue = item.SubjectId;
}
I strongly recommend you read about MVVM and bindings.
What about using the Checked and UnChecked events of your CheckBox, so that you can retrieve the value of subject_id which is binded to your Label.

Changing the User Control of Window dynamically in WPF (MVVM)

I am working on wpf mvvm pattern.
I have a user control in which i am loading a list of checkboxes in DataGridCheckBoxColumn and binding it to IsSelected property from my viewmodel.
Tha xaml code is like this:
<DataGrid Width="150" Grid.Row="0" Background="LightGray" CanUserAddRows="False" AutoGenerateColumns="False" HorizontalAlignment="Left" Name="dataGridCustomers" ItemsSource="{Binding Path=UsecaseListItems}" CanUserResizeColumns="False" CanUserResizeRows="False">
<DataGrid.Columns>
<DataGridCheckBoxColumn Binding="{Binding Path=IsSelected,UpdateSourceTrigger=PropertyChanged, Mode=TwoWay,IsAsync=True}" Width="50">
<DataGridCheckBoxColumn.HeaderTemplate>
<DataTemplate x:Name="dtAllChkBx">
<CheckBox Name="cbxAll" FontWeight="Bold" Content="All" IsChecked="{Binding Path=DataContext.AllSelected,RelativeSource={RelativeSource AncestorType=UserControl },Mode=TwoWay}"/>
</DataTemplate>
</DataGridCheckBoxColumn.HeaderTemplate>
</DataGridCheckBoxColumn>
<DataGridTextColumn Width="85" Binding="{Binding Path=UsecaseName}" Header="UsecaseName" IsReadOnly="True" >
<DataGridColumn.HeaderStyle>
<Style TargetType="DataGridColumnHeader">
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="Black"></Setter>
</Style>
</DataGridColumn.HeaderStyle>
</DataGridTextColumn>
</DataGrid.Columns>
</DataGrid>
My HomeViewModel is like this:
private bool _IsSelected;
public bool IsSelected
{
get { return _IsSelected; }
set
{
_IsSelected = value;
OnPropertyChanged("IsSelected");
}
}
private Control _someUserControl;
public Control CCS01
{
get { return _someUserControl; }
set { _someUserControl = value; }
}
private UserControl _content;
internal void SetNewContent(UserControl _content)
{
ContentWindow = _content;
}
public UserControl ContentWindow
{
get { return _content; }
set
{
_content = value;
OnPropertyChanged("ContentWindow");
}
}
For my 1st checkbox (CCS01), I have created a view(CCS01.xaml) which contains a few labels and textboxes in grid format.And its corresponding ViewModel is below:
public class CCS01ViewModel: BaseNotifyPropertyChanged
{
HomeViewModel _homeViewModel;
public ICommand OpenUsersCommand { get; private set; }
public CCS01ViewModel(HomeViewModel mainModel)
{
this._homeViewModel = mainModel;
//this._model = model;
OpenUsersCommand = new RelayCommand(OpenUsers, CanOpenUsers);
}
private void OpenUsers(object _param)
{
//UsersPanelViewModel upmodel = new UsersPanelViewModel(_mainModel, _model);
//UsersPanel up = new UsersPanel();
//up.DataContext = upmodel;
//_mainModel.SetNewContent(up);
}
private bool CanOpenUsers(object _param)
{
return true;
}
}
I want to load the selected checkbox view in the main UserControl(ExecutionDetails.xaml) . Currently, I am loading it with the first Checkbox view in it by default like this:
<StackPanel>
<Grid Name="HostGrid">
<ContentControl Content="{Binding ContentWindow}"/>
</Grid>
</StackPanel>
Please suggest me how to bind the view with respective checkboxes user controls dynamically based on the checkbox selection.
The code behind of this(ExecutionDetails.xaml.cs) is like this:
public partial class ExecutionDetails : UserControl
{
public ExecutionDetails()
{
InitializeComponent();
HomeViewModel viewmodel = new HomeViewModel();
CCS01ViewModel ccViewModel = new CCS01ViewModel(viewmodel);
CCS01 obj = new CCS01();
obj.DataContext = ccViewModel;
viewmodel.ContentWindow = obj;
this.DataContext = viewmodel;
}
}

Resources