Develop Reference

Margin or padding between column and different ItemContainerStyle for group columns

I was commissioned to make a window according to this design:
I chose the ListView container for it. How to make textboxes in cells is clear, but not how to implement indents between columns and different colors for rows. Nothing comes to my mind.
How can I do it?

I'd use a listbox with a grid and columns in the itemtemplate.
Make the header line a separate grid, with matching columns.
If variable widths are necessary on the columns, use Sharedsizegroup to make the columns in your header.
You can then put borders in a row, with columnspan and cornerradius to round them off.
Textboxes declared later in the xaml will get higher z-index and appear on top.
If you want a gap, no problem, you can have a column with nothing in it.
Here's some markup I have to hand which uses this sort of principle. You edit in a separate row, append each item. So it kind of looks like it's a datagrid but I have fine control over everything and in particular an explicit point to validate.
<StackPanel Grid.Row="1" Grid.IsSharedSizeScope="True">
***** Top Grid is headers *************
<Grid>
<Grid.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource textBlockStyle}">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Foreground" Value="White"/>
<Setter Property="Background" Value="DarkSlateGray"/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A" />
<ColumnDefinition Width="Auto" SharedSizeGroup="B" MinWidth="220"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F" MinWidth="120"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="G" MinWidth="120"/>
</Grid.ColumnDefinitions>
<TextBlock Text="NG"
TextAlignment="Center"
MinWidth="30"
/>
<TextBlock Text="Description" Grid.Column="1"/>
<TextBlock Text="Per" Grid.Column="2"/>
<TextBlock Text="Quantity" Grid.Column="3"/>
<TextBlock Text="Nett" Grid.Column="4"/>
<TextBlock Text="VAT" Grid.Column="5"/>
<TextBlock Text="Gross" Grid.Column="6"/>
</Grid>
********** Listbox for rows
<ListBox ItemsSource="{Binding TransactionLines}"
BorderThickness="0">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="G"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="H"/>
</Grid.ColumnDefinitions>
<TextBlock Width="20" HorizontalAlignment="Center">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Text" Value="G"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsNettEntry}" Value="True">
<Setter Property="Text" Value="N"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<TextBlock Text="{Binding Description}" Grid.Column="1"/>
<TextBlock Text="{Binding NettPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={StaticResource BooleanToVisibility}}"
Background="LightYellow"
/>
<TextBlock Text="{Binding GrossPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={conv:InvertBoolToVisibilityConverter}}"
Background="#D6EAF8"
/>
<TextBlock Text="{Binding Quantity}" Grid.Column="3"/>
<TextBlock Text="{Binding Nett, StringFormat='{}{0:C}'}" Grid.Column="4"/>
<TextBlock Text="{Binding VAT, StringFormat='{}{0:C}'}" Grid.Column="5"/>
<TextBlock Text="{Binding Gross, StringFormat='{}{0:C}'}" Grid.Column="6"/>
<Button Grid.Column="7"
Command="{Binding DataContext.RemoveLineCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
CommandParameter="{Binding}"
>
<Path Data="{StaticResource Bin}"
Fill="Gray"
Stretch="Uniform"/>
</Button>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
****** Another grid is used to enter a new line.
<Grid DataContext="{Binding NewLine}">
<Grid.Resources>
<Style TargetType="TextBlock" BasedOn="{StaticResource textBlockStyle}">
<Setter Property="Background" Value="#F2F3F4 "/>
</Style>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="C"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="D"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="E"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="F"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="G"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="H"/>
</Grid.ColumnDefinitions>
<ToggleButton IsChecked="{Binding IsNettEntry, Mode=TwoWay}"
Grid.Column="0"
PreviewMouseLeftButtonDown="ToggleButton_PreviewMouseLeftButtonDown"
>
<ToggleButton.Style>
<Style TargetType="ToggleButton">
<Setter Property="Content" Value="G"/>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Content" Value="N" />
</Trigger>
</Style.Triggers>
</Style>
</ToggleButton.Style>
</ToggleButton>
<TextBox Text="{Binding Description}" Grid.Column="1"
x:Name="DescriptionTextBox"
/>
<TextBox Text="{Binding NettPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={StaticResource BooleanToVisibility}}"
Background="LightYellow"
>
<i:Interaction.Behaviors>
<b:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBox Text="{Binding GrossPer, StringFormat='{}{0:C}'}"
Grid.Column="2"
Visibility="{Binding IsNettEntry, Converter={conv:InvertBoolToVisibilityConverter}}"
Background="#D6EAF8"
>
<i:Interaction.Behaviors>
<b:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBox Text="{Binding Quantity}" Grid.Column="3">
<i:Interaction.Behaviors>
<b:SelectAllTextBoxBehavior/>
</i:Interaction.Behaviors>
<i:Interaction.Triggers>
<i:EventTrigger EventName="LostFocus">
<i:InvokeCommandAction Command="{Binding CalculatePerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBox>
<TextBlock Text="{Binding Nett, StringFormat='{}{0:C}'}" Grid.Column="4"/>
<TextBlock Text="{Binding VAT, StringFormat='{}{0:C}'}" Grid.Column="5"/>
<TextBlock Text="{Binding Gross, StringFormat='{}{0:C}'}" Grid.Column="6"/>
<Button Grid.Column="7"
Margin="6,2,2,2"
Command="{Binding DataContext.AddLineCommand, RelativeSource={RelativeSource FindAncestor,AncestorType={x:Type UserControl}}}"
PreviewKeyDown="Button_PreviewKeyDown"
PreviewMouseLeftButtonDown="Button_PreviewMouseLeftButtonDown"
>
<TextBlock Text="Add"/>
</Button>
</Grid>
</StackPanel>

Set TabControl SelectedIndex from child button

There is a list in which the item style is overridden as a TabControl with multiple buttons on individual TabItems.
How to specify in the button parameters to change the SelectedIndex of the parent element, thereby switching to another menu?
I do to simulate a multi-level context menu for list items.
the standard context menu in ListBox does not suit me
<ListBox.Resources>
<DataTemplate DataType="{x:Type econemodels:DishDTOAdvance}">
<StackPanel>
<Grid Width="280">
<Grid.RowDefinitions>
<RowDefinition Height="20" />
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="16"
Foreground="Black"
TextTrimming="CharacterEllipsis"
Width="230">
<Run Text="{Binding Quantity}" />
<Run Text="x" />
<Run Text="{Binding DishDTO.Name}" />
</TextBlock>
<TextBlock HorizontalAlignment="Right"
VerticalAlignment="Top"
FontSize="16"
Foreground="Black"
Text="{Binding DishDTO.CostPrice}"
Margin="0,0,10,0" />
<TabControl Name="designerContent"
Visibility="Collapsed"
Grid.Row="1"
Background="Transparent"
BorderThickness="0">
<TabControl.Resources>
<Style TargetType="TabItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TabItem"></ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</TabControl.Resources>
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#FF5DDF5D"
Command="{Binding RelativeSource={RelativeSource
AncestorType={x:Type
local:OrderDish}}, Path=DataContext.AddEditDish}" CommandParameter="{Binding}">
<Button.Content>
<Label Foreground="White">[Edit]</Label>
</Button.Content>
</Button>
<Button Grid.Column="1"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#4577EE"
Command="{Binding Path=SelectedIndex,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabControl}
}
}"
CommandParameter="1">
<Button.Content>
<Label Foreground="White">[Move]</Label>
</Button.Content>
</Button>
<Button Grid.Column="2"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#EE4545"
Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:OrderDish}},
Path=DataContext.DeleteDish}"
CommandParameter="{Binding}">
<Button.Content>
<Label Foreground="White">[Delete]</Label>
</Button.Content>
</Button>
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Grid.Column="0"
Background="Black"
Height="40"
BorderThickness="0">Back</Button>
<Button Grid.Column="1"
Background="Red"
Height="40"
BorderThickness="0">Next</Button>
</Grid>
</TabItem>
</TabControl>
</Grid>
</StackPanel>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource
Mode=FindAncestor,
AncestorType={x:Type ListBoxItem}},
Path=IsSelected}"
Value="True">
<Setter TargetName="designerContent"
Property="Visibility"
Value="Visible" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate></ListBox.Resources>
In this button
<Button Grid.Column="1"
Height="40"
VerticalAlignment="Bottom"
BorderThickness="0"
Background="#4577EE"
Command="{Binding Path=SelectedIndex,
RelativeSource={
RelativeSource Mode=FindAncestor,
AncestorType={x:Type TabControl}
}
}"
CommandParameter="1">
<Button.Content>
<Label Foreground="White">[Move]</Label>
</Button.Content>
</Button>

ListBox HorizontalContentAlignment = Stretch does not work correctly

I created a "ListBox" and set "HorizontalContentAlignment" property to "Strecth".
But, sometimes, when scrolling, "HorizontalContentAlignment" not working.
I do not understand what the cause of the problem.
.
My code:
<ListBox
Name="ListBoxTracks"
Grid.Row="0"
HorizontalContentAlignment="Stretch"
ItemsSource="{Binding MusicManager.TracksCollection, IsAsync=True}"
ScrollViewer.CanContentScroll="True"
ScrollViewer.IsDeferredScrollingEnabled="True"
SelectedItem="{Binding MusicManager.CurrentTrack, Mode=OneWayToSource}"
VirtualizingPanel.CacheLength="1,1"
VirtualizingPanel.IsVirtualizingWhenGrouping="True"
VirtualizingStackPanel.IsVirtualizing="True"
VirtualizingStackPanel.VirtualizationMode="Recycling">
<i:Interaction.Triggers>
<i:EventTrigger EventName="SelectionChanged">
<i:InvokeCommandAction Command="{Binding MusicManager.GetTracksCollectionCommand}" CommandParameter="{Binding Path=ItemsSource, RelativeSource={RelativeSource AncestorType={x:Type ListBox}}}" />
</i:EventTrigger>
<i:EventTrigger EventName="PreviewMouseDoubleClick">
<i:InvokeCommandAction Command="{Binding MusicManager.InitPlayCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate DataType="{x:Type playable:LocalPlayable}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<fa:ImageAwesome
Grid.Row="0"
Grid.RowSpan="2"
Grid.Column="0"
Width="16"
Height="16"
Margin="5"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="{DynamicResource PrimaryHueMidForegroundBrush}"
Icon="Music" />
<TextBlock
Grid.Row="0"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="5,5,5,0"
HorizontalAlignment="Left"
FontSize="12"
TextTrimming="WordEllipsis">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} - {1}">
<Binding Path="Artist[0].Name" />
<Binding Path="Title" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock
Grid.Row="0"
Grid.Column="3"
Margin="5,5,5,0"
HorizontalAlignment="Right"
FontSize="12">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0:00}:{1:00}">
<Binding Path="Duration.Minutes" />
<Binding Path="Duration.Seconds" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
<TextBlock
Grid.Row="1"
Grid.Column="1"
Grid.ColumnSpan="2"
Margin="5,0,5,0"
HorizontalAlignment="Left"
FontSize="12"
Text="{Binding Converter={StaticResource TrackAttributesConverter}}" />
<materialDesign:RatingBar
Grid.Row="1"
Grid.Column="3"
Margin="5,0,5,0"
HorizontalAlignment="Right"
Max="5" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock
Margin="15,5,15,5"
HorizontalAlignment="Left"
Foreground="{DynamicResource MaterialDesignBody}"
FontSize="16"
Text="{Binding Path=Name}" />
<TextBlock
Margin="15,5,15,5"
HorizontalAlignment="Right"
Foreground="{DynamicResource MaterialDesignBody}"
FontSize="16"
Text="{Binding Path=ItemCount, StringFormat=Songs:{0:F0}}" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="{x:Type GroupItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type GroupItem}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Rectangle
Grid.Row="0"
Height="1"
HorizontalAlignment="Stretch"
Stroke="{DynamicResource MaterialDesignBody}" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="1" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Width="120">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<myControls:ImageProviderViewer
Grid.Row="0"
Width="120"
Height="120"
VerticalAlignment="Top"
HidePlaceholderAtBeginning="True"
HighPriorityImage="True"
ImageProvider="{Binding Items[0].Album.Cover}">
<myControls:ImageProviderViewer.Placeholder>
<Viewbox Width="110" Height="110">
<Path Fill="Gray" Data="{StaticResource VectorMicrophone}" />
</Viewbox>
</myControls:ImageProviderViewer.Placeholder>
</myControls:ImageProviderViewer>
<TextBlock
Grid.Row="1"
Margin="2"
FontSize="12"
FontWeight="Medium"
Text="{Binding Items[0].Artist[0].Name}"
TextTrimming="WordEllipsis" />
<TextBlock
Grid.Row="2"
Margin="2"
FontSize="12"
FontWeight="Medium"
Text="{Binding Items[0].Album.Name}"
TextTrimming="WordEllipsis" />
<TextBlock
Grid.Row="3"
Margin="2"
FontSize="12"
FontWeight="Medium"
Text="{Binding Items[0].Album.FirstReleaseDate}"
TextTrimming="WordEllipsis" />
</Grid>
<Rectangle
Grid.Column="1"
Width="1"
VerticalAlignment="Stretch"
Stroke="{DynamicResource MaterialDesignBody}" />
<ItemsPresenter Grid.Column="2" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
</GroupStyle>
</ListBox.GroupStyle>
</ListBox>

Sounds like you want to stretch the ListBoxItems, not the ListBox itself.
<ListBox>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListBox.ItemContainerStyle>

Bind a datatrigger to a property of a data object

I have an ItemsControl where I would like to bind set the data template according to a property in my data object. My default template contains a textbox for a numerical value, which I would like to replace with a checkbox when my object contains a value which can only be 0 or 1. The datatrigger should bind to IsBoolean, which is a property of one of the workflow parameters in the ItemsSource. I think that what I have right now trys to bind to an IsBoolean property in my DataContext. What is the correct way to specify the source?
Here is the XAML:
<ItemsControl ItemsSource="{Binding WorkflowParameters}" IsTabStop="False">
<ItemsControl.Style>
<Style TargetType="ItemsControl">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DisplayName}" Grid.Column="0" Margin="5">
<TextBlock.ToolTip>
<ToolTip DataContext="{Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}">
<TextBlock Text="{Binding Description}"/>
</ToolTip>
</TextBlock.ToolTip>
</TextBlock>
<StackPanel Grid.Column="1" Orientation="Horizontal">
<TextBox Text="{Binding DefaultValue, StringFormat=N3}" Margin="5" Width="100"/>
<TextBlock Text="{Binding Unit}" Margin="5,0,0,0" VerticalAlignment="Center"/>
</StackPanel>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding IsBoolean}" Value="true">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding DisplayName}" Grid.Column="0" Margin="5">
<TextBlock.ToolTip>
<ToolTip DataContext="{Binding Path=PlacementTarget.DataContext, RelativeSource={x:Static RelativeSource.Self}}">
<TextBlock Text="{Binding Description}"/>
</ToolTip>
</TextBlock.ToolTip>
</TextBlock>
<CheckBox Command="{Binding SetBooleanValue}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ItemsControl.Style>
</ItemsControl>

WPF data binding to a parent property inside HierarchicalDataTemplate

I have the following data template in my listbox:
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="#FF575757" BorderThickness="0,0,0,1">
<Grid HorizontalAlignment="Stretch" Tag="{Binding}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" SharedSizeGroup="Icon"/>
<ColumnDefinition Width="*" SharedSizeGroup="Name"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Image x:Name="DeviceIcon" DataContext="{Binding Path=device}" Source="{Binding Path=StatusIcon}" Width="64" Height="64" Grid.Column="0" Grid.RowSpan="2" RenderOptions.BitmapScalingMode="HighQuality" Margin="3"></Image>
<StackPanel Grid.Column="1" >
<TextBlock x:Name="DeviceName" DataContext="{Binding Path=device}" Text="{Binding Path=DeviceName}" FontWeight="Bold" Foreground="#FF00008F" FontSize="14.667"/>
<TextBlock x:Name="PluginName" Text="{Binding Path=PluginName}" />
</StackPanel>
<Menu x:Name="MainMenu" VerticalAlignment="Top" Padding="0,3" Grid.Column="1" Grid.Row="1" ItemsSource="{Binding deviceMenu}">
<Menu.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding Items}">
<StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
<Image Source="{Binding Icon}" Width="16" Height="16">
<Image.Style>
<Style TargetType="{x:Type Image}">
<Style.Triggers>
<DataTrigger Binding="{Binding Icon}" Value="{x:Null}">
<Setter Property="Visibility" Value="Collapsed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
<TextBlock Text="{Binding Text}"/>
</StackPanel>
</HierarchicalDataTemplate>
</Menu.ItemTemplate>
<Menu.ItemContainerStyle>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Command" Value="{Binding ClickCommand}" />
<Setter Property="CommandParameter" Value="{Binding device}" />
</Style>
</Menu.ItemContainerStyle>
</Menu>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
The MenuItem's are bound to a property named deviceMenu in the root object. But the root object also contains a property called device which needs to be mapped to the CommandParameter property.
So how do I reach up and out of deviceMenu back to the parent object to access its properties?

Blame it on fatigue... The answer was pretty simple:
<Setter Property="CommandParameter" Value="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type Grid}}, Path=DataContext.device}" />