Develop Reference

Hiding wpf ContextMenu when the Data Grid is Empty?

I am trying to make a simple TODO App with WPF using MVVM.
I have the tasks in Datagrid and a right click context menu with Delete option. I don't want the context menu to show when there are no elements in Data Grid. What can I do to solve it?
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<DataGrid ItemsSource="{Binding Path=TaskList}" SelectedItem="{Binding SelectedTask}" AutoGenerateColumns="False">
<DataGrid.ContextMenu >
<ContextMenu>
<MenuItem Header="Delete" Command="{Binding OpenDialogCommand}" CommandParameter="{Binding PlacementTarget.SelectedItem, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}}"></MenuItem>
</ContextMenu>
</DataGrid.ContextMenu>
<DataGrid.Columns>
<DataGridTextColumn Header="Priority" Width="auto" Binding="{Binding Path=Id}"/>
<DataGridTextColumn Header="Task" Width="auto" Binding="{Binding Path=TaskName}"/>
</DataGrid.Columns>
</DataGrid>

You could set the ContextMenu property conditionally using a Style with a Trigger:
<DataGrid ItemsSource="{Binding Path=TaskList}" SelectedItem="{Binding SelectedTask}" AutoGenerateColumns="False">
<DataGrid.Style>
<Style TargetType="DataGrid">
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Delete" Command="{Binding OpenDialogCommand}"
CommandParameter="{Binding PlacementTarget.SelectedItem, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}}"></MenuItem>
</ContextMenu>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="HasItems" Value="False">
<Setter Property="ContextMenu" Value="{x:Null}" />
</Trigger>
</Style.Triggers>
</Style>
</DataGrid.Style>
<DataGrid.Columns>
<DataGridTextColumn Header="Priority" Width="auto" Binding="{Binding Path=Id}"/>
<DataGridTextColumn Header="Task" Width="auto" Binding="{Binding Path=TaskName}"/>
</DataGrid.Columns>
</DataGrid>

You could bind visibility and use the built in booleantovisibility converter
You need the converter. This could be in a resource dictionary you merge in app.xaml to use across the app.
<Window.Resources>
<BooleanToVisibilityConverter x:Key="booleanToVisibilityConverter"/>
</Window.Resources>
Then just bind visibility on the context menu
<DataGrid ...... >
<DataGrid.ContextMenu>
<ContextMenu Visibility="{Binding PlacementTarget.HasItems, RelativeSource={RelativeSource Self},
Converter={StaticResource booleanToVisibilityConverter}}">
<MenuItem Header="Delete"
Command="{Binding OpenDialogCommand}"
CommandParameter="{Binding PlacementTarget.SelectedItem, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContextMenu}}}"/>
</ContextMenu>
</DataGrid.ContextMenu>

As one of variations, you can use ContextMenuService.IsEnabled attached property and bind it with ItemsControl.HasItems.
<DataGrid ...
ContextMenuService.IsEnabled="{Binding RelativeSource={RelativeSource Self}, Path=HasItems}">

I got a simple hack to solve this. I changed the row definition from * to auto for row 2; This will stop context menu from showing when you click anywhere other than Datagrid Elements.
<RowDefinition Height="auto"/>
Also to remove one extra row which always shows(and display context menu when right clicked)
This worked.
<DataGrid Margin ="10" x:Name="dgTaks" Grid.Row="1" Grid.ColumnSpan="2" ItemsSource="{Binding Path=TaskList}" SelectedItem="{Binding SelectedTask}" AutoGenerateColumns="False" **CanUserAddRows="False"**>

gridview column auto size not working on loading except with hot reload

When I load my list, my column size is set to "auto". I would like my column to automatically take the size of my longest string, so as not to "cut" the strings.
For the first column, we see that everything is fine. For the second one, which is exactly the same except for the font style, it doesn't work, we see that the names are cut.
However, if I change "auto" to a value, for example 10, and then back to "auto", everything works with an horizontal scrollbar:
If it works with hot reload and for the first column, what can explain that my second column does not fit the size of my strings?
My list is a collection of objects composed with 2 strings. My code :
<ListView
BorderBrush="SteelBlue"
ItemsSource="{Binding ListeAgentsAAfficher}"
SelectedItem="{Binding AgentSelected}">
<ListView.ContextMenu>
<ContextMenu>
<MenuItem
Command="{Binding AfficherSupprimerCommand}"
Header="Afficher agents supprimés"
IsCheckable="True"
IsChecked="{Binding IsCheckedSupprimer}" />
<MenuItem
Command="{Binding TriAgentsMatriculesCommand}"
Header="Trier par matricules"
IsCheckable="True"
IsChecked="{Binding IsCheckedTriMatricule}" />
<MenuItem
Command="{Binding TriAgentsNomCommand}"
Header="Trier par noms"
IsCheckable="True"
IsChecked="{Binding IsCheckedTriNom}" />
</ContextMenu>
</ListView.ContextMenu>
<ListView.Resources>
<Style TargetType="ListViewItem">
<Setter Property="Background" Value="White" />
<Style.Triggers>
<DataTrigger Binding="{Binding Supprimer}" Value="true">
<Setter Property="Foreground" Value="DarkOrange" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridView.ColumnHeaderContainerStyle>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Visibility" Value="Collapsed" />
</Style>
</GridView.ColumnHeaderContainerStyle>
<GridViewColumn Width="auto">
<GridViewColumnHeader />
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock
HorizontalAlignment="center"
VerticalAlignment="center"
FontSize="10"
FontWeight="Bold"
Text="{Binding Matricule}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Width="auto">
<GridViewColumn.CellTemplate>
<DataTemplate>
<TextBlock
HorizontalAlignment="center"
VerticalAlignment="center"
Text="{Binding Nom}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>

`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>

Error by clicking on headers Datagrid WPF C#

I have a code behind in my XAML : when a condition is checked the targets rows will be Orange.
This is the result :
This is the code behind in XAML.cs:
private void DataGrid_Loaded(object sender, RoutedEventArgs e)
{
foreach (TrainOrdersClass item in dgBaseProd.ItemsSource)
{
var row = dgBaseProd.ItemContainerGenerator.ContainerFromItem(item) as DataGridRow;
if ((item.IsOverFilled == true) || (item.IsOverWeighed == true))
{
row.Background = Brushes.Orange;
}
}
}
the problem is that when i click on the headers of DataGrid, all the colors is disappeared !
The Xaml:
<DataGrid Name="DataGrid" AutoGenerateColumns="False"
Height="Auto" Width="780" Margin="10,10,10,10"
IsReadOnly="True" ItemsSource="{Binding Path=PreloadedRailcarstList}"
SelectedItem="{Binding Path=BaseProductToUpdate}"
AlternationCount="2" AlternatingRowBackground="LightBlue" Loaded="DataGrid_Loaded" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding Path=DataContext.OpenUpdateBaseProductViewCmd , RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" CommandParameter="{Binding BaseProductToUpdate.name}"/>
</i:EventTrigger>
<i:EventTrigger EventName="PreviewKeyDown">
<i:InvokeCommandAction Command="{Binding Path=DataContext.OpenUpdateBaseProductViewCmd , RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" CommandParameter="{Binding BaseProductToUpdate.name}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
//..
How can I fix it ?
thanks,

Define a RowStyle where you set the Background using DataTriggers:
<DataGrid Name="DataGrid" AutoGenerateColumns="False"
Height="Auto" Width="780" Margin="10,10,10,10"
IsReadOnly="True" ItemsSource="{Binding Path=PreloadedRailcarstList}"
SelectedItem="{Binding Path=BaseProductToUpdate}"
AlternationCount="2" AlternatingRowBackground="LightBlue">
<DataGrid.RowStyle>
<Style TargetType="DataGridRow">
<Style.Triggers>
<DataTrigger Binding="{Binding IsOverFilled}" Value="True">
<Setter Property="Background" Value="Orange" />
</DataTrigger>
<DataTrigger Binding="{Binding IsOverWeighed}" Value="True">
<Setter Property="Background" Value="Orange" />
</DataTrigger>
</Style.Triggers>
</Style>
</DataGrid.RowStyle>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding Path=DataContext.OpenUpdateBaseProductViewCmd , RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" CommandParameter="{Binding BaseProductToUpdate.name}"/>
</i:EventTrigger>
<i:EventTrigger EventName="PreviewKeyDown">
<i:InvokeCommandAction Command="{Binding Path=DataContext.OpenUpdateBaseProductViewCmd , RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" CommandParameter="{Binding BaseProductToUpdate.name}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
...
</DataGrid>
Don't use code-behind.

GridView Header Click

I am trying to figure out how to point a Grid View Header Click to my Viewmodel
<ListView ItemsSource="{Binding UserProfileData}" GridViewColumnHeader.Click="Handle_Click">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Name}" Header="User ID"/>
<GridViewColumn DisplayMemberBinding="{Binding LastUsed}" Header="Last Loaded"/>
<GridViewColumn DisplayMemberBinding="{Binding IsLoaded}" Header="Logged In"/>
</GridView>
</ListView.View>
</ListView>
GridViewColumnHeader.Click="Handle_Click" will push it to my MainWindow.xaml.cs but i want to have the click go to the DataContext of my MainWindow
<Window.DataContext>
<vm:MainWindowViewModel/>
</Window.DataContext>
any ideas?

You could use a style to bind the Command property of the GridViewColumnHeader to an ICommand source property of your view model. You could then pass the header string as the argument to the command:
<ListView x:Name="test" ItemsSource="{Binding UserProfileData}">
<ListView.Resources>
<Style TargetType="GridViewColumnHeader">
<Setter Property="Command" Value="{Binding YourCommandProperty}" />
<Setter Property="CommandParameter" Value="{Binding Content, RelativeSource={RelativeSource Self}}" />
</Style>
</ListView.Resources>
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Name}" Header="User ID"/>
<GridViewColumn DisplayMemberBinding="{Binding LastUsed}" Header="Last Loaded"/>
<GridViewColumn DisplayMemberBinding="{Binding IsLoaded}" Header="Logged In"/>
</GridView>
</ListView.View>
</ListView>

You need to add reference of 2 assemblies:
System.Windows.Interactivity
Microsoft.Expression.Interactions
Add following namespaces:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
Xaml:
<ListView ItemsSource="{Binding UserProfileData}">
<ListView.View>
<GridView>
<GridViewColumn DisplayMemberBinding="{Binding Name}">
<GridViewColumnHeader Content="User ID">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="OnClick"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding LastUsed}">
<GridViewColumnHeader Content="Last Loaded">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="OnClick"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</GridViewColumnHeader>
</GridViewColumn>
<GridViewColumn DisplayMemberBinding="{Binding IsLoaded}">
<GridViewColumnHeader Content="Logged In">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ei:CallMethodAction TargetObject="{Binding}" MethodName="OnClick"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</GridViewColumnHeader>
</GridViewColumn>
</GridView>
</ListView.View>
</ListView>
In view model, put following method:
public void OnClick(object sender, RoutedEventArgs e)
{
}