Develop Reference

C# WPF | Change DisplayMemberPath programmatically

I have a class Person with three properties Name, LastName and FullName.
I use MVVM - in the ModelView, I have a List<Person> Persons.
My view looks like this:
<Button Content="LastName" Command="{Binding LastNameCommand, Mode=OneWay}" />
<ListView IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Persons}">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn Header="Name"
DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Header="FullName"
DisplayMemberBinding="{Binding FullName}" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
My goal is now to change the part
<GridViewColumn Header="Name"
DisplayMemberBinding="{Binding Name}" />
to
<GridViewColumn Header="LastName"
DisplayMemberBinding="{Binding LastName}" />
when I click on the button.
How can I achieve that?

Setting or changing the DisplayMemberBinding property of a GridViewColumn should be done in the view.
The view model shouldn't know or care about any DisplayMemberBinding. It only updates the source properties (Name and FullName in this case).
So hook up an event handler for the button in the view and set the view-related property there:
private void Button_Click(object sender, RoutedEventArgs e)
{
col1.DisplayMemberBinding = new Binding("path");
}
XAML:
<Button Content="LastName" Click="Button_Click" Command="{Binding LastNameCommand, Mode=OneWay}" />
<ListView IsSynchronizedWithCurrentItem="True" ItemsSource="{Binding Persons}">
<ListView.View>
<GridView>
<GridView.Columns>
<GridViewColumn x:Name="col1" Header="Name" DisplayMemberBinding="{Binding Name}" />
<GridViewColumn x:Name="col2" Header="FullName" DisplayMemberBinding="{Binding FullName}" />
</GridView.Columns>
</GridView>
</ListView.View>
</ListView>
This does not break the MVVM pattern in any way. Trying to modify a DisplayMemberBinding in a view model certainy does. MVVM is not about eliminating view-related code from the views. It's about separation of concerns.

Bind Command To ContextMenu Item

I am getting this error/warning:
System.Windows.Data Error: 4 : Cannot find source for binding with reference 'ElementName=DrivesListView'
When I press 'Refresh', the command does not fire. I am guessing since it is a ContextMenu, I need to somehow access the parent control in the binding path and then I can use MouseDownCommand.
MouseDownCommand is located in my tab viewmodel, TabItemViewModel. My MainWindowViewModel contains a list of TabItemViewModels, and that is the source of the TabControl's items.
What I've tried:
1)
I've tried setting the ContextMenu Opened event to set the DataContext manually like this to see if it would fix the DataContext somehow:
private void ContextMenu_Opened(object sender, RoutedEventArgs e)
{
ContextMenu menu = sender as ContextMenu;
ListView listView = menu.PlacementTarget as ListView;
Grid grid = listView.Parent as Grid;
TabControl tabControl = grid.Parent as TabControl;
menu.DataContext = (TabItemViewModel)tabControl.SelectedItem;
}
The problem with this is the fact that I cannot seem to get the tabControl from the grid. Doing .Parent just returns null for some unknown reason.
2)
I also tried setting the Tag of the control, which did not work either:
<ListView Grid.Row="1" Name="DrivesListView" ItemsSource="{Binding Drives}"
Tag="{Binding DataContext,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=Window}}">>
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="Refresh">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDown">
<i:InvokeCommandAction
Command="{Binding Path=PlacementTarget.Tag.MouseDownCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu}}"
CommandParameter="{Binding ElementName=DrivesListView}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</MenuItem>
</ContextMenu>
</ListView.ContextMenu>
<ListView.Style>
<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource MahApps.Styles.ListView}">
<Style.Triggers>
<DataTrigger Binding="{Binding DrivesListViewEnabled}" Value="true">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Binding="{Binding DrivesListViewEnabled}" Value="false">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding Path=MouseDoubleClickCommand}"
CommandParameter="{Binding ElementName=DrivesListView}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListView.View>
<GridView>
<GridViewColumn x:Name="NameHeader" Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn x:Name="TypeHeader" Header="Type" DisplayMemberBinding="{Binding Type}"/>
<GridViewColumn x:Name="TotalSizeHeader" Header="Total Size" DisplayMemberBinding="{Binding TotalSize}"/>
<GridViewColumn x:Name="FreeSpaceHeader" Header="Free Space" DisplayMemberBinding="{Binding FreeSpace}"/>
</GridView>
</ListView.View>
</ListView>
Here is my XAML
<UserControl x:Class="FileExplorerModuleServer.Views.FileBrowserTabView"
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:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:mah="http://metro.mahapps.com/winfx/xaml/controls"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--ItemsSource is bound to the 'Tabs' property on the view-
model, while DisplayMemeberPath tells TabControl
which property on each tab has the tab's name -->
<TabControl Name="SubTabControl" Grid.Row="1"
ItemsSource="{Binding Tabs}"
DisplayMemberPath="Header" SelectedIndex="{Binding SelectedIndex}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding Path=TabChangedCommand}"
CommandParameter="{Binding ElementName=SubTabControl}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TabControl.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" HorizontalAlignment="Left" Width="300" Text="{Binding Path}">
</TextBox>
<mah:ProgressRing Grid.Row="1" Height="1">
<mah:ProgressRing.Style>
<Style TargetType="{x:Type mah:ProgressRing}">
<Style.Triggers>
<DataTrigger Binding="{Binding IsLoading}" Value="true">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Binding="{Binding IsLoading}" Value="false">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</mah:ProgressRing.Style>
</mah:ProgressRing>
<ListView Grid.Row="1" Name="DrivesListView" ItemsSource="{Binding Drives}">
<ListView.ContextMenu>
<ContextMenu Opened="ContextMenu_Opened">
<MenuItem Header="Refresh">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDown">
<i:InvokeCommandAction
Command="{Binding Path=MouseDownCommand}"
CommandParameter="{Binding ElementName=DrivesListView}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</MenuItem>
</ContextMenu>
</ListView.ContextMenu>
<ListView.Style>
<Style TargetType="{x:Type ListView}" BasedOn="{StaticResource MahApps.Styles.ListView}">
<Style.Triggers>
<DataTrigger Binding="{Binding DrivesListViewEnabled}" Value="true">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Binding="{Binding DrivesListViewEnabled}" Value="false">
<Setter Property="Visibility" Value="Hidden" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding Path=MouseDoubleClickCommand}"
CommandParameter="{Binding ElementName=DrivesListView}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<ListView.View>
<GridView>
<GridViewColumn x:Name="NameHeader" Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn x:Name="TypeHeader" Header="Type" DisplayMemberBinding="{Binding Type}"/>
<GridViewColumn x:Name="TotalSizeHeader" Header="Total Size" DisplayMemberBinding="{Binding TotalSize}"/>
<GridViewColumn x:Name="FreeSpaceHeader" Header="Free Space" DisplayMemberBinding="{Binding FreeSpace}"/>
</GridView>
</ListView.View>
</ListView>
Here is the ViewModel.cs
public ICommand MouseDownCommand
=> new RelayCommand<object>(e => MouseDown(e));
private void MouseDown(object commandParameter)
{
}

As stated in the documentation, [the] menu [...] is specific to the context of the control.
In other words, the ContextMenu has the same data context as it's parent control (here the ListView).
To follow the MVVM pattern, you then only need to add a ICommand in the data context of the ListView and bind it to the MenuItem.Command property.
The View:
<ListView ItemsSource="{Binding Drives}">
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="Refresh" Command="{Binding RefreshCommand}" />
</ContextMenu>
</ListView.ContextMenu>
<ListView.View>
<GridView>
<GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}"/>
<GridViewColumn Header="Type" DisplayMemberBinding="{Binding Type}"/>
<GridViewColumn Header="Total Size" DisplayMemberBinding="{Binding TotalSize}"/>
<GridViewColumn Header="Free Space" DisplayMemberBinding="{Binding FreeSpace, StringFormat='{}{0:0.00}'}"/>
</GridView>
</ListView.View>
</ListView>
The ViewModel:
public class ViewModel
{
public ViewModel()
{
RefreshCommand = new ActionCommand(Refresh);
}
public IReadOnlyList<DriveViewModel> Drives { get; }
public ICommand RefreshCommand { get; }
private void Refresh()
{
// ...
}
}
Working demo available here.

First of all, MouseDown event doesn't seem to work well in the case of MenuItem. So, you need to use PreviewMouseDown or probaby Click event instread. Also, you cannot use ElementName for referring elements outside of ContextMenu.
Then, assuming DataContext of the ListView is implicitly bound to TabItemViewModel and you want to specify that ListView as CommandParameter, it could be modified as follows:
<MenuItem Header="Refresh">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction
Command="{Binding PlacementTarget.DataContext.MouseDownCommand, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}"
CommandParameter="{Binding PlacementTarget, RelativeSource={RelativeSource AncestorType={x:Type ContextMenu}}}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</MenuItem>

`ContextMenu` Command binding inside `ListView.ItemContainerStyle` does not work

I have a list view, where I wanted to Hide ContextMenuItems based on some value in the ListView Column. I could achieve this by moving ContextMenu to ListView.ItemContainerStyle. Now my problem is that I am unable to fire Commands on MenuItem. This used to work when ContextMenu was set directly to ListView.
Here is what I have tried and failed. (Used ElementType, ElementName, Direct call etc.).
<UserControl Name="RootElement" DataContext=.Some Context.....>
<ListView ItemsSource="{Binding LicensesView}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Refresh 1" Command="{Binding Path=DataContext.LicenseListRefreshCommand, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}" />
<MenuItem Header="Refresg 2" Command="{Binding Path=DataContext.LicenseListRefreshCommand, RelativeSource={RelativeSource AncestorType=Window, Mode=FindAncestor}}"/>
<MenuItem Header="Refresh 3" Command="{Binding Path= DataContext.LicenseListRefreshCommand, ElementName=RootElement}" Visibility="{Binding Path=Aktif,Converter= {StaticResource BoolToVisibility}}"/>
<MenuItem Header="Refresh 4" Command="{Binding LicenseListRefreshCommand}"/>
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Code" DisplayMemberBinding="{Binding Code}" Width="Auto"/>
<GridViewColumn Header="Active" DisplayMemberBinding="{Binding Active}" Width="150" />
<GridViewColumn Header="Company" DisplayMemberBinding="{Binding Company}" Width="60" />
<GridViewColumn Header="Demo" DisplayMemberBinding="{Binding Demo}" Width="Auto" />
</GridView>
</ListView.View>
</ListView>
</UserControl>

The reason it doesn't work is because Style is a Disconnected property and hence it doesn' respect the visual tree.
I resolved this by using binding Proxy as shown in this answer.
Key is to add DataContext reference as StaticResource.
<UserControl Name="RootElement" DataContext=.Some Context.....>
<UserControl.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibility" />
<helper:BindingProxy x:Key="Proxy" Data="{Binding}" />
</UserControl.Resources>
<ListView ItemsSource="{Binding LicensesView}">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Refresh 1" Command="{Binding Path=Data.LicenseListRefreshCommand, Source={StaticResource Proxy}}" />
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView>
<GridViewColumn Header="Code" DisplayMemberBinding="{Binding Code}" Width="Auto"/>
<GridViewColumn Header="Active" DisplayMemberBinding="{Binding Active}" Width="150" />
<GridViewColumn Header="Company" DisplayMemberBinding="{Binding Company}" Width="60" />
<GridViewColumn Header="Demo" DisplayMemberBinding="{Binding Demo}" Width="Auto" />
</GridView>
</ListView.View>
</ListView>

GridViewColumn Header Binding Fails When In A Style

I have a ListView where the View contains a GridView and a number of column definitions.
As Below:
<ListView Name="SampleListView" ItemsSource="{Binding SomeSource}" >
<ListView.View>
<GridView AllowsColumnReorder="False">
<GridViewColumn Header="{Binding ColumnHeader1,Mode=OneWay}" CellTemplate="{StaticResource Column1Template}" />
<GridViewColumn Header="{Binding ColumnHeader2,Mode=OneWay}" CellTemplate="{StaticResource Column2Template}" />
<GridViewColumn Header="{Binding ColumnHeader3,Mode=OneWay}" CellTemplate="{StaticResource Column3Template}" />
<GridViewColumn Header="{Binding ColumnHeader4,Mode=OneWay}" CellTemplate="{StaticResource Column4Template}" />
<GridViewColumn Header="{Binding ColumnHeader5,Mode=OneWay}" CellTemplate="{StaticResource Column5Template}" />
</GridView>
</ListView.View>
</ListView>
(This works perfectly)
I have a requirement to hide the first column on a user preference so I created a Style Trigger to accomplish this. The code with the style trigger is as below
<ListView Name="SampleListView" ItemsSource="{Binding SomeSource}" >
<ListView.Resources>
<Style x:Key="{x:Type ListView}" TargetType="ListView">
<Style.Triggers>
<DataTrigger Binding="{Binding Source={x:Static p:User.Default},Path=ShowColumn1,Mode=OneWay}" Value="False">
<Setter Property="View">
<Setter.Value>
<GridView x:Name="WithOutColumn1" AllowsColumnReorder="False">
<GridViewColumn Header="{Binding ColumnHeader2,Mode=OneWay}" CellTemplate="{StaticResource Column2Template}" />
<GridViewColumn Header="{Binding ColumnHeader3,Mode=OneWay}" CellTemplate="{StaticResource Column3Template}" />
<GridViewColumn Header="{Binding ColumnHeader4,Mode=OneWay}" CellTemplate="{StaticResource Column4Template}" />
<GridViewColumn Header="{Binding ColumnHeader5,Mode=OneWay}" CellTemplate="{StaticResource Column5Template}" />
</GridView>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Source={x:Static p:User.Default},Path=ShowColumn1,Mode=OneWay}" Value="True">
<Setter Property="View">
<Setter.Value>
<GridView x:Name="WithColumn1" AllowsColumnReorder="False">
<GridViewColumn Header="{Binding ColumnHeader1,Mode=OneWay}" CellTemplate="{StaticResource Column1Template}" />
<GridViewColumn Header="{Binding ColumnHeader2,Mode=OneWay}" CellTemplate="{StaticResource Column2Template}" />
<GridViewColumn Header="{Binding ColumnHeader3,Mode=OneWay}" CellTemplate="{StaticResource Column3Template}" />
<GridViewColumn Header="{Binding ColumnHeader4,Mode=OneWay}" CellTemplate="{StaticResource Column4Template}" />
<GridViewColumn Header="{Binding ColumnHeader5,Mode=OneWay}" CellTemplate="{StaticResource Column5Template}" />
</GridView>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
</ListView>
When this style is used the Binding for the GridViewColumn Header property does not work.
But the Binding for the CellTemplate does and displays correctly.
The Output Window in VS Shows this Error
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=ColumnHeader1; DataItem=null; target element is 'GridViewColumn' (HashCode=56585823); target property is 'Header' (type 'Object
Can anyone shed some light on why this occurs and how to resolve it?
Things Tried:
Using a RelativePath binding to ensure the DataContext is valid.
(Suspect this doesn't work as i think the GridViewColumn definition
exists outside the visual tree from this post Here)
Creating a DataTemplate for the HeaderTemplate : Same result.
Using an FrameWorkElement as a Proxy as per this post Here

In Case anyone else is having an issue like this i have found a resolution.
The GridViewColumn Header property must be set and bound within XAML tags for that item as below.
<Setter Property="View">
<Setter.Value>
<GridView x:Name="WithOutColumn1" AllowsColumnReorder="False">
<GridViewColumn CellTemplate="{StaticResource Column2Template}">
<GridViewColumnHeader Content="{Binding ColumnHeader2}" />
</GridViewColumn>
<GridViewColumn CellTemplate="{StaticResource Column3Template}">
<GridViewColumnHeader Content="{Binding ColumnHeader3}" />
</GridViewColumn>
<GridViewColumn CellTemplate="{StaticResource Column4Template}">
<GridViewColumnHeader Content="{Binding ColumnHeader3}" />
</GridViewColumn>
<GridViewColumn CellTemplate="{StaticResource Column5Template}">
<GridViewColumnHeader Content="{Binding ColumnHeader3}" />
</GridViewColumn>
</GridView>
</Setter.Value>
Hope fully this will be helpful if you encounter a similar issue.

How to make a row in listview checked when the row is selected and vice versa in WPF

I am having a listview and using view as gridview as follows:
<ListView Grid.Row="1" Grid.Column="0" Height="100" HorizontalAlignment="Left" Margin="10,10,10,10" Name="listView2" VerticalAlignment="Top" Width="300" ItemsSource="{Binding}" SelectionChanged="listView2_SelectionChanged" SelectionMode="Multiple">
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn Header="Select">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Path=FirstName}" Header="First Name" Width="100"/>
<GridViewColumn DisplayMemberBinding="{Binding Path=LastName}" Header="Last Name" Width="100"/>
</GridView>
</ListView.View>
</ListView>
Now the issue is that when the user will check on the checkbox the record should get selected. Also is the user selects the record from the list then the corresponding checkboxes should be selected.
How to do it ?

I'm assuming that your view model has IsSelected property:
public Boolean IsSelected
{
get { return isSelected; }
set
{
if (isSelected != value)
{
isSelected = value;
OnPropertyChanged("IsSelected");
}
}
}
private Boolean isSelected;
So, let's change markup:
<ListView ItemsSource="{Binding}" SelectionMode="Multiple">
<!-- add style for the item in list view: -->
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}"/>
</Style>
</ListView.ItemContainerStyle>
<ListView.View>
<GridView AllowsColumnReorder="True">
<GridViewColumn Header="Select">
<GridViewColumn.CellTemplate>
<DataTemplate>
<!-- bind the checkbox to the IsSelected property: -->
<CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding Name}" Header="Name" Width="100"/>
</GridView>
</ListView.View>
</ListView>

The simplest ways:
<GridViewColumn Header="None">
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Width="50"
Height="50"
IsChecked="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListViewItem}},
Path=IsSelected,Mode=TwoWay}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>