We Keep Coding

How to avoid repeating blocks of XAML in a menu

I have to create a menu. It has 10 entries and they differ by one parameter.
Entry 1:
<MenuItem Visibility="{Binding MenuSelected.Type, Converter={StaticResource TypeToVisibilityConverter}, ConverterParameter='PAZ', Mode=OneWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding CmdContextMenu}" CommandParameter="PAZ" />
</i:EventTrigger>
</i:Interaction.Triggers>
<MenuItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
Foreground="{Binding MenuSelected.Type, Converter={StaticResource TypeToColorConverter}, ConverterParameter='PAZ', Mode=OneWay}"
Text="{Binding MenuSelected.Type, Converter={StaticResource TypeToIconConverter}, ConverterParameter='PAZ', Mode=OneWay}" />
<TextBlock
Grid.Column="1"
Margin="{StaticResource XSmallLeftMargin}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="PAZ" />
</Grid>
</MenuItem.Header>
</MenuItem>
Entry 2:
<MenuItem Visibility="{Binding MenuSelected.Type, Converter={StaticResource TypeToVisibilityConverter}, ConverterParameter='APP', Mode=OneWay}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<i:InvokeCommandAction Command="{Binding CmdContextMenu}" CommandParameter="APP" />
</i:EventTrigger>
</i:Interaction.Triggers>
<MenuItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock
Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets"
Foreground="{Binding MenuSelected.Type, Converter={StaticResource TypeToColorConverter}, ConverterParameter='APP', Mode=OneWay}"
Text="{Binding MenuSelected.Type, Converter={StaticResource TypeToIconConverter}, ConverterParameter='APP', Mode=OneWay}" />
<TextBlock
Grid.Column="1"
Margin="{StaticResource XSmallLeftMargin}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="APP" />
</Grid>
</MenuItem.Header>
</MenuItem>
As you can see, the only difference is between PAZ and APP in different points... and same goes on for all the others.
Is there a way I can avoid to repeat it 10 times just changing the 3 letters?
I do not want to use code-behind to create the menu dynamically... but to process it from XAML.

From your question I assume that CmdContextMenu and MenuSelected are properties on your main view model and not in a separate menu item type. If this is different, you have to adapt the code accordingly.
In order to remove the redundant code, create a collection for your menu items in your view model.
public class MyMainViewModel : INotifyPropertyChanged
{
public IEnumerable<string> MyTypes { get; } = new List<string>
{
"PAZ",
"APP"
};
// ...other properties and methods (like "CmdContextMenu" and "MenuSelected" I Assume).
}
Next, you have to change the value converters, because the ConverterParameter is not a dependency property and cannot be bound. Instead, you can use IMultiValueConverters that can bind multiple values. Adapt all of your converters to implement IMultiValueConverter. Here is an example of how a converter could look like. Of course, it depends on your implementation. In essence, use the values array to access bound values.
public class TypeToVisibilityConverter : IMultiValueConverter
{
public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
{
return values[0].Equals(values[1]) ? Visibility.Visible : Visibility.Collapsed;
}
public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Next, create a data template for the header of your menu items. As you can see, the bindings are replaced with MultiBindings that use an IMultiValueConverter as Converter.
The first binding in each block is a RelativeSource binding to access the data context of the parent Menu, because I assume that the MenuSelected property is defined on your main view model. The other empty bindings will bind to the data context of the current menu item, which is an item from the MyTypes collection.
<DataTemplate x:Key="MyMenuItemHeaderTemplate" DataType="{x:Type system:String}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontFamily="Segoe MDL2 Assets">
<TextBlock.Foreground>
<MultiBinding Converter="{StaticResource TypeToColorConverter}">
<Binding Path="DataContext.MenuSelected.Type" RelativeSource="{RelativeSource AncestorType={x:Type Menu}}" Mode="OneWay"/>
<Binding/>
</MultiBinding>
</TextBlock.Foreground>
<TextBlock.Text>
<MultiBinding Converter="{StaticResource TypeToIconConverter}">
<Binding Path="DataContext.MenuSelected.Type" RelativeSource="{RelativeSource AncestorType={x:Type Menu}}" Mode="OneWay"/>
<Binding/>
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock Grid.Column="1"
Margin="{StaticResource XSmallLeftMargin}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Text="{Binding}"/>
</Grid>
</DataTemplate>
Create a new header item style that uses this data template. The Visibility also uses a multi-value converter as above. Instead of using an event trigger, you can simply assign the command to the menu item directly and pass a CommandParameter, which is bound to the data context of the current menu item.
<Style x:Key="MyMenuItemStyle" TargetType="{x:Type MenuItem}" BasedOn="{StaticResource {x:Type MenuItem}}">
<Setter Property="HeaderTemplate" Value="{StaticResource MyMenuItemHeaderTemplate}"/>
<Setter Property="Visibility">
<Setter.Value>
<MultiBinding Converter="{StaticResource TypeToVisibilityConverter}">
<Binding Path="DataContext.MenuSelected.Type" RelativeSource="{RelativeSource AncestorType={x:Type Menu}}" Mode="OneWay"/>
<Binding/>
</MultiBinding>
</Setter.Value>
</Setter>
<Setter Property="Command" Value="{Binding DataContext.CmdContextMenu, RelativeSource={RelativeSource AncestorType={x:Type Menu}}}"/>
<Setter Property="CommandParameter" Value="{Binding}"/>
</Style>
Finally, create a Menu and bind the MyTypes collection, as well as the style.
<Menu ItemsSource="{Binding MyTypes}" ItemContainerStyle="{StaticResource MyMenuItemStyle}"/>

ConverParameter property is not a DependencyProperty - so it cannot be Bound to.
You can use a MultiValue converter instead.
Instead of creating 10 menu items in xaml manually, you should be able to bind an ItemsCollection and define a DataTemplate for MenuItem

Update datagrid's GroupHeader when item property changes

I'm having some difficulty updating a certain binding.
I have a class DeviceList that loads some devices, it inherits from ObservableCollection and is listed as a resource in my XAML:
<local:DeviceList x:Key="Devices" />
Then, I have a CollectionViewSource that uses this devicelist as source, and groups it by a property from the Device:
<CollectionViewSource x:Key="cvsDevices" Source="{StaticResource Devices}" Filter="CollectionViewSource_Filter">
<CollectionViewSource.GroupDescriptions>
<PropertyGroupDescription PropertyName="GroupId" />
</CollectionViewSource.GroupDescriptions>
</CollectionViewSource>
A Datagrid binding to this CVS, which has a group header style:
<DataGrid x:Name="dataGrid" ItemsSource="{Binding Source={StaticResource cvsDevices}}">
<DataGrid.GroupStyle>
<GroupStyle ContainerStyle="{StaticResource GroupHeaderStyle}">
<GroupStyle.Panel>
<ItemsPanelTemplate>
<DataGridRowsPresenter />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</DataGrid.GroupStyle>
<DataGrid.Columns>
bla bla
</DataGrid.Columns>
</DataGrid>
And then finally the Group Header style in the resources:
<Style x:Key="GroupHeaderStyle" TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Expander IsExpanded="True" Background="White" Foreground="Black">
<Expander.Header>
<StackPanel Orientation="Horizontal" Height="30">
<Border Margin="5" Width="20" Height="20" Background="{Binding Path=Items, Converter={StaticResource DeviceGroupToColorConverter}}" CornerRadius="10" />
<TextBlock VerticalAlignment="Center" Padding="3" Text="{Binding Name, Converter={StaticResource DeviceGroupToGroupTitleConverter}}" />
<TextBlock VerticalAlignment="Center" Padding="3" Text="{Binding ItemCount, Converter={StaticResource ItemCountToStringConverter}}"/>
</StackPanel>
</Expander.Header>
<ItemsPresenter />
</Expander>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
As you can see, there's a Border there that binds to "Items". This is a property of "CollectionViewGroup": https://learn.microsoft.com/en-us/dotnet/api/system.windows.data.collectionviewgroup?view=netcore-3.1
Basically each of my devices has a property "Connection", and when this property changes, I would like to set the color of this border in the corresponding group header.
The binding works fine the first time, but after that the DeviceGroupToColorConverter isn't called anymore when a connection changes. Device implements INotifyPropertyChanged, but I have no idea how to propagate that event to CollectionViewGroup's Items property. In fact, I have no idea where CollectionViewGroup instances live. I only have access to the CollectionViewSource.
I would like to avoid refreshing the entire DataGrid. I've read that it resets my expanders and also, why refresh the entire datagrid when only a certain group's header should change?

I have solved it by changing the binding to a MultiBinding and adding a binding with a Source set to the DeviceList:
<Border Margin="5" Width="20" Height="20" CornerRadius="10">
<Border.Background>
<MultiBinding Converter="{StaticResource DeviceGroupToColorConverter}">
<Binding Source="{StaticResource Devices}" Path="Devices" />
<Binding Path="Name" />
</MultiBinding>
</Border.Background>
</Border>
the "Devices" property of the DeviceList class is a simple getter that returns "this":
public ObservableCollection<Device> Devices
{
get
{
return this;
}
}
I let the DeviceList listen to any property changes on device, and invoke PropertyChanged on the "Devices" property of DeviceList to pass on this event to the MultiBinding.
I then use the Name binding in the MultiBinding to filter my devices based on the group that they're in. Now I don't need to refresh the whole grid and my performance is good.

Loading Different DataTemplate for each item in ListBox

I am trying to create a learn application and I would like to load data template for based on Question type
as explained below.
If Question Type is TYPE1
load InstructionTemplate_Type1.xaml
load ChoiceTemplate_Type1.xaml
load QuestionTemplate_Type1.xaml
If Question Type is TYPE2
load InstructionTemplate_Type2.xaml
load ChoiceTemplate_Type2.xaml
load QuestionTemplate_Type2.xaml
If Question Type is TYPE3
load InstructionTemplate_Type3.xaml
load ChoiceTemplate_Type3.xaml
load QuestionTemplate_Type3.xaml
else
load InstructionTemplate_Type3.xaml
load ChoiceTemplate_Type3.xaml
load QuestionTemplate_Type3.xaml
and the my page should look like...
Can Someone help me how to do this.
I am using the code from my previous post
Nested ObservableCollection data binding in WPF
and the xaml is ...
<learn:SelectedItemIsCorrectToBooleanConverter x:Key="SelectedCheckedToBoolean" />
<Style x:Key="ChoiceRadioButtonStyle" TargetType="{x:Type RadioButton}" BasedOn="{StaticResource {x:Type RadioButton}}">
<Style.Triggers>
<DataTrigger Value="True">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource SelectedCheckedToBoolean}">
<Binding Path="IsCorrect" />
<Binding RelativeSource="{RelativeSource Self}" Path="IsChecked" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="Background" Value="Green"></Setter>
</DataTrigger>
<DataTrigger Value="False">
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource SelectedCheckedToBoolean}">
<Binding Path="IsCorrect" />
<Binding RelativeSource="{RelativeSource Self}" Path="IsChecked" />
</MultiBinding>
</DataTrigger.Binding>
<Setter Property="Background" Value="Red"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="InstructionTemplate" DataType="{x:Type learn:Question}">
<TextBlock Text="{Binding Path=Instruction}" />
</DataTemplate>
<DataTemplate x:Key="ChoiceTemplate" DataType="{x:Type learn:Choice}">
<RadioButton Content="{Binding Path=Name}" IsChecked="{Binding RelativeSource= {RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Margin="10 1"
Style="{StaticResource ChoiceRadioButtonStyle}" />
</DataTemplate>
<DataTemplate x:Key="QuestionTemplate" DataType="{x:Type learn:Question}">
<StackPanel Margin="10 0">
<TextBlock Text="{Binding Path=Name}" />
<ListBox ItemsSource="{Binding Path=Choices}" SelectedItem="{Binding Path=SelectedChoice}" HorizontalAlignment="Stretch" ItemTemplate="ChoiceTemplate">
</ListBox>
</StackPanel>
</DataTemplate>
</Window.Resources>
<DockPanel>
<StackPanel Orientation="Horizontal" DockPanel.Dock="Bottom">
<Button Content="Select Question 3 choice 3" Click="ButtonBase_OnClick" />
</StackPanel>
<ItemsControl ItemsSource="{Binding Path=Questions}">
<ItemsControl.ItemTemplateSelector>
<learn:QuestionTemplateSelector QuestionTemplate="{StaticResource QuestionTemplate}" InstructionTemplate="{StaticResource InstructionTemplate}" />
</ItemsControl.ItemTemplateSelector>
</ItemsControl>
</DockPanel>
Can Some one help me in understanding how this can be archived with smarter design
(may be a common base class for Question and have Derived Question class for each Question Type and load the data template using a virtual function from the class...) but I am wondering how this can be done using Template Selector ...or do we need to use some different approach..

If you create your ViewModel-s derived from a common Quiestion ViewModel, you can create the list (ObservableCollection<Question>). Then use the following ListBox:
<ListBox ItemsSource="{Binding YourQuestionList}">
<ListBox.Resources>
<DataTemplate DataType="{x:Type VM:QuestionType1}">
( ... question1 full design ... )
</DataTemplate>
<DataTemplate DataType="{x:Type VM:QuestionType2}">
( ... question2 full design ... )
</DataTemplate>
( ... other data templates ... )
</ListBox>
The DataContext will be the specific Question ViewModel inside your custom full design, so you can use those properties for binding, too. You need to add the reference to the namespace your ViewModels are in (eg.: xmlns:VM="clr-namespace:YourApp.VMs") to the top of the xaml file (if your namespace for ViewModels is VMs.
I think this should do the work for you.

'MultiBinding' cannot be used within a 'SetterBaseCollection'

I just started to programm in C# and got the following error message "A 'MultiBinding' cannot be used within a 'SetterBaseCollection' collection. A 'MultiBinding' can only be set on a DependencyProperty of a DependencyObject". My dea was to disable some of the combobox depedant of the input values given to the converter. use the same converter later in the xaml file and have no error..
<DataTemplate x:Key="ComboBoxDirectionCellDataTemplate">
<Canvas>
<ComboBox Name="DirectionBi" ItemsSource="{Binding Source={StaticResource DirectionBiList}}" SelectedItem="{Binding Direction, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="#FFCDCDCD" />
<ComboBox Name="DirectionOut" ItemsSource="{Binding Source={StaticResource DirectionOutList}}" SelectedItem="{Binding PinFunctionOptions[SelectedPinFunctionIdx].SupportedDirections, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="#FFCDCDCD" />
<ComboBox Name="DirectionIn" ItemsSource="{Binding Source={StaticResource DirectionOutList}}" SelectedItem="{Binding PinFunctionOptions[SelectedPinFunctionIdx].SupportedDirections, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Background="#FFCDCDCD" />
</Canvas>
<DataTemplate.Triggers>
<DataTrigger Value="In">
<MultiBinding Converter="{StaticResource FunctionToGroupConverter}">
<Binding Path="PinFunctionOptions"/>
<Binding Path="SelectedPinFunctionIdx"/>
</MultiBinding>
<Setter TargetName="DirectionBi" Property="Visibility" Value="Hidden"/>
Thanks for help!!!!

I may be wrong - and i have no way of checking this at the moment...
I think what you want is the following...
<DataTrigger ...>
<DataTrigger.Binding>
<MultiBinding Converter="{StaticResource FunctionToGroupConverter}">
<Binding Path="PinFunctionOptions"/>
<Binding Path="SelectedPinFunctionIdx"/>
</MultiBinding>
</DataTrigger.Binding>
</DataTrigger>

DataTemplate.Triggers is expecting a collection of Setter why are you attempting to put a MultiBinding in there?
The exception you're getting is a result of this.
I'm not entirely certain what you're attempting with the MultiBinding but you may fare better by performing the bindings individually on the respective elements.

Showing SelectedItem Details to its side

I've a ListView bound to an ObservableCollection<Foo>. On selecting a ListViewItem I display the details of the SelectedItem(Foo members) in a container. It works fine.
Now all I want is to display the details just next to the SelectedItem. ie, If I select the fourth ListViewItem then the Container's Top should be the same as the ListViewItem's Top. How would I sync their position provided it should create any problem even while scrolling the List.
P.S: Scrollbars are hidden
This question is not yet resolved. Can anybody help?

Original Answer
Does the detail need to be in a separate container? I may be misunderstanding your example, but I would have thought you could achieve what you wanted by adding the details section to the item template for your list items and then hiding/showing it based on the IsSelected flag:
<ListView ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<ContentControl DockPanel.Dock="Right" Name="DetailsControl" Content="{Binding}" ContentTemplate="{StaticResource DetailsTemplate}" />
<TextBlock Text="{Binding}" />
</DockPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}" Value="False">
<Setter TargetName="DetailsControl" Property="Visibility" Value="Hidden" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Even if you aren't after exactly this behaviour, I imagine you could get close to what you want by replacing the ContentControl from the example with something else (e.g. a Popup)
Edit in response to comments
The example below will place a Popup to the right hand side of the ListView that is visible only for the selected item:
<ListView ItemsSource="{Binding}">
<ListView.ItemTemplate>
<DataTemplate>
<DockPanel>
<TextBlock Text="{Binding}" />
<Popup Placement="Right"
PlacementTarget="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}"
IsOpen="{Binding (ListViewItem.IsSelected), RelativeSource={RelativeSource FindAncestor, AncestorType=ListViewItem}}">
<Border Background="Black" Padding="3">
<TextBlock Text="{Binding}" />
</Border>
</Popup>
</DockPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
This uses the Placement attribute to specify that the Popup should appear to the right of the target element, and binds the PlacementTarget property to the first ancestor of type ListViewItem (i.e. the parent container).
This causes an appearance like the example below: