Develop Reference

Bind MenuItem.IsEnabled to property of a view model

I have an MVVM WPF project with the following code:
MultiplexerVM.cs
public class MultiplexerVM : BaseViewModel
{
public ObservableCollection<MultiplexVM> Multiplexes { get; set; } = new();
public MultiplexVM SelectedMultiplex { get; set; }
public ICommand CheckAll => new CheckBoxCommand(Multiplexes);
}
MultiplexVM.cs
public class MultiplexVM : BaseViewModel
{
public bool IsChecked { get; set; }
}
MultiplexerV.xaml
<UserControl x:Class="MKVStudio.Views.MultiplexerV"
xmlns:vm="clr-namespace:MKVStudio.ViewModels"
xmlns:s="clr-namespace:System;assembly=mscorlib">
<UserControl.Resources>
<s:Boolean x:Key="True">True</s:Boolean>
<s:Boolean x:Key="False">False</s:Boolean>
</UserControl.Resources>
<Grid>
<ListView ItemsSource="{Binding Multiplexes}"
SelectedItem="{Binding SelectedMultiplex}">
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}"Margin="3"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
...
</GridView>
</ListView.View>
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Command="{Binding CheckAll}"
CommandParameter="{StaticResource True}">
<MenuItem.Header>
<TextBlock Text="Check all"/>
</MenuItem.Header>
</MenuItem>
<MenuItem Command="{Binding CheckAll}"
CommandParameter="{StaticResource False}">
<MenuItem.Header>
<TextBlock Text="Uncheck all"/>
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ListView.ContextMenu>
</ListView>
</Grid>
</UserControl>
My goal is to bind IsEnabled of the context menu items to the property IsChecked of MultiplexVM.cs. The idea was to implement an IValueConverter (passing Multiplexes as value and bool as parameter). The converter returns value.Where(m => m.IsChecked == parameter).Count > 0. Essentially, when all Multiplexes are unchecked the menu item Check all is enabled and the menu item Uncheck all is disabled. The reverse thing is happening when all Multiplexes are checked. The problem here is that the converter is invoked only once when it is declared basically, and checking and unchecking the items does not trigger the converter to see what is happening.
I have tried to implement an IMultiValueConverter (but failing to use it correctly) and pass three values like this:
<MenuItem.IsEnabled>
<MultiBinding>
<Binding Source="{Binding Multiplexes.Count}" />
<Binding Source="{Binding Multiplexes}" />
<Binding Source="{StaticResource True}" /> <!--respectivly False to the other menu item-->
</MultiBinding>
</MenuItem.IsEnabled>
This doesn't work. I've tried <Binding Path="Multiplexes.Count" /> and <Binding Path="Multiplexes" />, but also doesn't work (the values passed to the converter are Unset).
Is my idea for using MultiBinding even feasible and what am I doing wrong when using it?

Why do you need to bind IsChecked to IsChecked and IsEnabled at once? This is very strange if you look at it from the Single Responsibility Principle. If you are sure that you are doing it right, you can do it like this:
<CheckBox IsChecked="{Binding IsChecked}"
IsEnabled="{Binding IsEnabled}" />
And make your class look like something like this:
public class MultiplexVM : BaseViewModel
{
public bool IsChecked
{
get => isChecked;
set
{
isChecked = value;
isEnabled = value;
RaisePropertyChanged(nameof(IsChecked));
RaisePropertyChanged(nameof(IsEnabled));
};
}
private bool isChecked;
public bool IsEnabled
{
get => isEnabled;
set
{
isChecked = value;
isEnabled = value;
RaisePropertyChanged(nameof(IsChecked));
RaisePropertyChanged(nameof(IsEnabled));
};
}
private bool isChecked;
}

From what I understand, you want to make an object bound to a "parent" (MenuItem => MultiplexerVM) be dependant on a property of its child collection (CheckBox => MultiplexVM.IsChecked, which is an item in MultiplexerVM.Multiplexes)
In this scenario, a child has to be somehow aware of its parent (when the child changes, it has to "push" the change up to the parent; in other words, the parent has to be informed when the change happens).
I can think of two ways to do it:
on the VM level: in every MultiplexVM, set a reference to the parent view model or collection, then you can update the CanCheckAll / CanUncheckAll functionality (however you implement it) every time the child's IsChecked changes (tedious; I suppose you can also do this with events, but attaching PropertyChanged handler to every child item is also a bit much)
cheat a bit by using the GUI level: you can update the CanCheckAll / CanUncheckAll functionality whenever the CheckBox is clicked
Below is an example of how you can implement the 2nd version.
In your MultiplexerVM:
public bool CanCheckAll => Multiplexes.Any(a => !a.IsChecked);
public bool CanUncheckAll => Multiplexes.Any(a => a.IsChecked);
public void RefreshCheckUncheckAll()
{
NotifyPropertyChanged(nameof(CanCheckAll));
NotifyPropertyChanged(nameof(CanUncheckAll));
}
Then, call RefreshCheckUncheckAll() in CheckAll command implementation and in:
private void CheckBox_Click(object sender, RoutedEventArgs e)
{
((MultiplexerVM)this.DataContext).RefreshCheckUncheckAll();
}
Then, the xaml will look something like this:
<ListView ItemsSource="{Binding Multiplexes}" SelectedItem="{Binding SelectedMultiplex}">
<ListView.ContextMenu>
<ContextMenu>
<MenuItem
Command="{Binding CheckAll}"
CommandParameter="{StaticResource True}"
IsEnabled="{Binding CanCheck}">
<MenuItem.Header>
<TextBlock Text="Check all" />
</MenuItem.Header>
</MenuItem>
<MenuItem
Command="{Binding CheckAll}"
CommandParameter="{StaticResource False}"
IsEnabled="{Binding CanUncheck}">
<MenuItem.Header>
<TextBlock Text="Uncheck all" />
</MenuItem.Header>
</MenuItem>
</ContextMenu>
</ListView.ContextMenu>
<ListView.View>
<GridView>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock Margin="3" Text="{Binding Name}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Margin="3" IsChecked="{Binding IsChecked}" Click="CheckBox_Click" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

Wpf MVVM ComboBox with Checkboxes and Select all Checkbox

I have a ComboBox with CheckBoxes and I would like to implement Select All Option.
I do this in the following way in the XAML:
<ComboBox Text="Select Industry" TextSearch.TextPath ="Industry" Name="industry" IsEditable="True" IsReadOnly="True" >
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem>
<CheckBox x:Name="allIndustry">All</CheckBox>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource industrySource}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="industry" IsChecked="{Binding ElementName=allIndustry, Path=IsChecked, Mode=OneWay}" Content="{Binding Industry}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
I get this functionality in the view using the above code:
But, the issue here is that I used to Bind my IsChecked ComboBox property of the ViewModel Property IsChecked , and implementing this solution I lost this feature.
I would like to move the line
IsChecked="{Binding ElementName=allIndustry, Path=IsChecked, Mode=OneWay}"
Into the
<ComboBoxItem>
<CheckBox x:Name="allIndustry">All</CheckBox>
</ComboBoxItem>
Change the binding to OneWayToSource, and update from the x:Name="allIndustry"
my Selected Items in the CheckBox.
I Should be able to do this only from the XAML View...
After that I would just bind my ComboBox to ViewModel property...
It would look like this:
<ComboBox Text="Select Industry" TextSearch.TextPath ="Industry" Name="industry" IsEditable="True" IsReadOnly="True" >
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem>
<CheckBox x:Name="allIndustry" IsChecked="{Binding ElementName=industry, Path=IsChecked, Mode=OneWayToSource}">All</CheckBox>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource industrySource}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<CheckBox Name="industry" IsChecked="{Binding IsChecked}" Content="{Binding Industry}" />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
But when I implement this change clicking the Select All does not update my ComboBox Items:
This is the property of the ViewModel
private ObservableCollection<IndustryFilter> _industryFilters;
public ObservableCollection<IndustryFilter> IndustryFilters
{
get { return _industryFilters; }
set
{
_industryFilters = value;
PropertyChanged(this, new PropertyChangedEventArgs("IndustryFilters"));
}
}
And this is the Source defined in the upper part of the XAML view
<UserControl x:Class="Digital_Data_House_Bulk_Mailer.View.MailView"
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"
xmlns:local="clr-namespace:Digital_Data_House_Bulk_Mailer.View"
xmlns:Controls="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:model="clr-namespace:Digital_Data_House_Bulk_Mailer.ViewModel"
mc:Ignorable="d"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
>
<UserControl.Resources>
<CollectionViewSource x:Key="industrySource" Source="{Binding IndustryFilters}"/>
</UserControl.Resources>
How to I manage to update All the ComboBoxes named "industry" from the ComboBox.Item Source and keep the "industry" checkbox bound to the ViewModel?
Regards

Without a full working example isn't easy to give a full working example.
You can solve your problem using other approach.
Your IndustryFilters shouldn't be an ObservableCollection<IndustryFilter> but an instance of an object like this:
public class IndustryFilters : INotifyPropertyChanged {
private _isAllChecked;
public IsAllChecked {
get {return _isAllChecked;}
set{
_isAllChecked = value;
foreach(var filter in Filters) {
filter.IsChecked = value;
}
PropertyChanged(...);
}
}
public ObservableCollection<IndustryFilter> Filters
{
get { return _industryFilters; }
set
{
_industryFilters = value;
PropertyChanged(this, new propertyChangedEventArgs("IndustryFilters"));
}
}
}
Then you bind the IsChecked of <CheckBox x:Name="allIndustry">All</CheckBox> to the IsAllChecked property.
Then you will have to find a way to change the source of your ComboBox to IndustryFilters.Filters.
Hope this helps.

With the help of bruno.almeida I have managed to solve this
This is the ViewModel property definition for the State filter - same as the Industry field i asked:
private ObservableCollection<StateFilter> _stateFilters;
public ObservableCollection<StateFilter> StateFilters
{
get { return _stateFilters; }
set
{
_stateFilters = value;
PropertyChanged(this, new PropertyChangedEventArgs("StateFilters"));
}
}
private bool _stateFilter;
public bool StateFilter
{
get { return _stateFilter; }
set
{
_stateFilter = value;
ObservableCollection<StateFilter> local = new ObservableCollection<StateFilter>();
foreach (var filter in StateFilters)
{
filter.IsChecked = _stateFilter;
local.Add(filter);
}
StateFilters = local;
PropertyChanged(this, new PropertyChangedEventArgs("StateFilter"));
}
}
This is the XAML code example:
Resources:
ComboBox:
<ComboBox Text="Select State" TextSearch.TextPath ="State" Name="state" IsEditable="True" IsReadOnly="True" >
<ComboBox.ItemsSource>
<CompositeCollection>
<ComboBoxItem >
<CheckBox Name="all" IsChecked="{Binding StateFilter}">All</CheckBox>
</ComboBoxItem>
<CollectionContainer Collection="{Binding Source={StaticResource stateSource}}"/>
</CompositeCollection>
</ComboBox.ItemsSource>
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox Name="chkTask" IsChecked="{Binding IsChecked}" Content="{Binding State}" ></CheckBox>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>

Cannot Access Command in WPF UserControl's DataGrid Row

I am not able to execute Command (TestCommand) in user control may be because DataGrid of usercontrol using FileDetailsList(List)
The following is the wpf form and i am using MVVM
<Window>
<TabControl>
<TabItem Header="Result">
<USERCONTROL:FileSearchResult></USERCONTROL:FileSearchResult>
</TabItem>
</TabControl>
</Window>
The below is the user control
<UserControl>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions
<DataGrid Grid.Row="0" ItemSource="{Binding FileDetailsList}">
<DataGrid.Columns>
<DataGridTemplateColumn>
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button>View
<Button.ContextMenu>
<ContextMenu FontSize="11">
<MenuItem Command="{Binding TestCommand}" CommandParameter="{Binding FileId}" Header="Splitter Errors"/>
</ContextMenu>
</Button.ContextMenu>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridTextColumn Binding="{Binding FileId}" Header="File ID"/>
<DataGridTextColumn Binding="{Binding FileName}" Header="File Name"/>
<DataGrid.Columns>
<DataGrid Grid.Row="0">
</Grid>
</UserControl>
The below is the view model
public class FileDetailsViewModel : INotifyPropertyChanged
{
private List<FileDetail> _fileDetailsList = new List<FileDetail>();
public RelayCommand<Int32> TestCommand { get; private set; }
public FileDetailsViewModel()
{
TestCommand = new RelayCommand<int>(OpenTestCommand);
}
private void OpenTestCommand(int fileId)
{
///Some code
}
public List<FileDetail> FileDetailsList { get { return _fileDetailsList; } set { _fileDetailsList = value; NotifyPropertyChanged("FileDetailsList"); } }
public event PropertyChangedEventHandler PropertyChanged;
protected void NotifyPropertyChanged(string property)
{
if (PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(property));
}
}
}
Please help solve this issue

you try this it will work 100%,
<Button Tag="{Binding Path=DataContext, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}">
View
<!-- Binding RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Path=DataContext. -->
<Button.ContextMenu>
<ContextMenu FontSize="11">
<MenuItem Command="{Binding Path=PlacementTarget.Tag.TestCommand,
RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}"
CommandParameter="{Binding FileId}"
Header="Splitter Errors" />
</ContextMenu>
</Button.ContextMenu>
</Button>

use menuitem command binding like this,
<MenuItem Command="{Binding DataContext.TestCommand, RelativeSource={RelativeSource AncestorType=DataGrid }}"

WPF rule number 1:
When binding does not work, check your output window!
you would see error saying, that TestCommand does not exist in FileDetails. This is because DataContext of each row in DataGrid and all descendant elements including your ContextMenu is not FileDetailsViewModel but FileDetail
easiest workaround is to move TestCommand to FileDetail class.
alternativelly, you can modify the binding to point to FileDetailsViewModel. Give name to root element in your UserControl or Window, e.g: LayoutRoot. Then use ElementName in the binding:
<MenuItem Command="{Binding LayoutRoot.DataContext.TestCommand, ElementName=LayoutRoot}"
CommandParameter="{Binding FileId}"
Initialized="ContextMenu_Initialized"/>
private void ContextMenu_Initialized(object sender, EventArgs e)
{
NameScope.SetNameScope((ContextMenu)sender, NameScope.GetNameScope(this));
}
another way how to fix the binding is workaround proposed by #jobyjames85, but it is little hacky. On the other side it is plain xaml solution with no codebehind involved

Delete item from ItemControl

My class is has a ObservableCollection of my viewmodel class and I set the itemsource of the Itemcontrol in xaml as below
<ItemsControl ItemsSource="{Binding ConditionItems}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Expander Background="#FFD0D7EB">
<StackPanel>
<Button Content="Delete" HorizontalAlignment="Right" Width="180" Margin="0,0,12,10" Command="{Binding DeleteItem}" CommandParameter="{Binding}">
</Button> </StackPanel>
</Expander>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
For some reason my DeleteItem is never called.
private RelayCommand _DeleteRule;
private void DoDeleteRule(object item)
{
if (item != null)
{
MessageBox.Show("in del");
}
}
public ICommand DeleteItem
{
get
{
if (_DeleteRule == null)
_DeleteRule = new RelayCommand(o => DoDeleteRule(o));
return _DeleteRule;
}
}
Am I doing anything wrong in xaml?

The ItemsControl is bound using {Binding ConditionItems}, so it expects the DeleteItem command to be inside the subitems of that list. I guess this is not the case, the DeleteItem exists on the ViewModel.
You could bind to the DataContext of the Window for example, where you can find the DeleteItem command. Or create a proxy element.

I found it. My xaml should be
<Button Content="Delete" Command="{Binding DataContext.DeleteItem,
RelativeSource={RelativeSource FindAncestor,
AncestorType={x:Type ItemsControl}}}" CommandParameter="{Binding}">
</Button>

Retrieve View info from DataTemplateSelector

maybe this is a trivial question for many of you...
My app has a TabControl defined as:
<TabControl ItemsSource="{Binding Tabs}" SelectedItem="{Binding SelectedTab}">
<!--Bind the SelectionChanged event of the tab-->
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding SelectedChangedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<!--This is How tab will look-->
<TabControl.ItemTemplate>
<DataTemplate>
<DockPanel>
<Button Name="BtnCloseTab"
DockPanel.Dock="Right"
Margin="5,0,0,0"
Padding="0"
Command="{Binding RelativeSource=
{RelativeSource FindAncestor, AncestorType={x:Type TabControl}},
Path=DataContext.CloseTabCommand}">
<Image Source="/EurocomCPS;component/Images/closeTab.png" Height="11" Width="11"></Image>
</Button>
<TextBlock Text="{Binding Header}" />
</DockPanel>
</DataTemplate>
</TabControl.ItemTemplate>
<!--This will be the content for the tab control-->
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl
ContentTemplateSelector="{StaticResource TemplateSelector}"
Content="{Binding}" />
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
In the window ViewModel I have the following prop:
private ObservableCollection<Tab> _Tabs;
public CPSViewModel()
{
_Tabs = new ObservableCollection<Tab>();
}
public ObservableCollection<Tab> Tabs
{
get { return _Tabs;}
private set
{
_Tabs = value;
this.RaisePropertyChanged("Tabs");
}
}
Now, when a new Tab is created, the following DataTemplateSelector is called:
class TemplateSelector : DataTemplateSelector
{
public override DataTemplate SelectTemplate(object item, DependencyObject container)
{
if (item != null)
{
string templateFile = string.Format("Templates/{0}",
Properties.Settings.Default.AppId + ".tmpl");
if (File.Exists(templateFile))
{
FileStream fs = new FileStream(templateFile, FileMode.Open);
DataTemplate template = XamlReader.Load(fs) as DataTemplate;
return template;
}
}
return null;
}
}
The DataTemplate is based on the XmlDataProvider and here I need to "inform" the Template which xml file it has to load because it is different for every tab:
<DataTemplate
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<DataTemplate.Resources>
<local:StringToBoolConverter x:Key="StringToBoolConverter" />
<local:StringToIntConverter x:Key="StringToIntConverter" />
<XmlDataProvider x:Key="dataProvider" XPath="func/parametri/param/BLOCKS"/>
</DataTemplate.Resources>
<Grid>
.... controls ....
</Grid>
</DataTemplate>
Is there a way to do it?
EDIT
Substantially what I have to do is to have access to my Tab class into the TemplateSelector.
Regards,
Daniele.

if you could define your tabs like
public class TabFirst:ITab {}
public class TabSecond:ITab {}
public class TabBlup:ITab {}
viewmodel
public ObservableCollection<ITab> Tabs
{
get { return _Tabs;}
private set
{
_Tabs = value;
this.RaisePropertyChanged("Tabs");
}
}
you could get rid of the DataTemplateSelector and just definfe your datatemplates in your resources
<DataTemplate DataType="{x:Type local:TabFirst}">
<view:TabFirstView />
<DataTemplate/>
<DataTemplate DataType="{x:Type local:TabSecond}">
<view:TabSecondView />
<DataTemplate/>
and your content control would be just
<TabControl.ContentTemplate>
<DataTemplate>
<ContentControl Content="{Binding}" />
</DataTemplate>
</TabControl.ContentTemplate>