WPF data binding to a parent property inside HierarchicalDataTemplate - c#

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}" />

Related

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>

How can I get stacked plots on the panel in WPF?

I was wondering if you could help me with something.
I'm trying to get stacked plots like this picture.
I'm using UniformGrid to try to get something like this, but it's not correct.
<UniformGrid x:Name="plots" Rows="2">
<StackPanel x:Name="plot1" IsEnabled="False" Visibility="Collapsed">
<Grid MinWidth="300" MinHeight="300">
<WpfPlot x:Name="hr_graph"/>
</Grid>
</StackPanel>
<StackPanel x:Name="plot2" IsEnabled="False" Visibility="Collapsed">
<Grid MinWidth="300" MinHeight="300" >
<WpfPlot x:Name="sat_graph"/>
</Grid>
</StackPanel>
<StackPanel x:Name="plot3" IsEnabled="False" Visibility="Collapsed">
<Grid MinWidth="300" MinHeight="300">
<WpfPlot x:Name="pul_graph"/>
</Grid>
</StackPanel>
<StackPanel x:Name="plot4" IsEnabled="False" Visibility="Collapsed">
<Grid MinWidth="300" MinHeight="300">
<WpfPlot x:Name="per_graph" />
</Grid>
</StackPanel>
</UniformGrid>
You can make this container just a generic ItemsControl, and change its ItemsPanel according to number of visible panels.
For example:
<DataTemplate x:Name="PartsLayout">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Slider x:Name="Slider" Margin="6" Value="4" Minimum="1" Maximum="4" TickFrequency="1" IsSnapToTickEnabled="True" />
<TextBlock Grid.Column="1" Margin="6" Text="{Binding Value, ElementName=Slider}" />
</Grid>
<ItemsControl x:Name="Items" Grid.Row="1">
<StackPanel x:Name="Part1" Background="Yellow" Grid.Row="0" Grid.Column="0" />
<StackPanel x:Name="Part2" Background="Green" Grid.Row="0" Grid.Column="1" />
<StackPanel x:Name="Part3" Background="Red" Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" />
<StackPanel x:Name="Part4" Background="Blue" Grid.Row="1" Grid.Column="1" />
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="2" Columns="2" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
</Grid>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Value, ElementName=Slider}" Value="3">
<Setter TargetName="Part4" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Items" Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
</Grid>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Value, ElementName=Slider}" Value="2">
<Setter TargetName="Part4" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Part3" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Items" Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<UniformGrid Rows="1" Columns="2" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
<DataTrigger Binding="{Binding Value, ElementName=Slider}" Value="1">
<Setter TargetName="Part4" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Part3" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Part2" Property="Visibility" Value="Collapsed" />
<Setter TargetName="Items" Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
That's in plain xaml - I have a slider where you select number of panels to view and according to its value, I change Visibility of different panels and ItemsPanel as well.
If you are changing Visibility in code-behind, then you can change ItemsPanel of ItemsControl in code-behind as well.
So, when you need single panel you set it to simple Grid, if two panels: UniformGrid 1x2, if three panels: Grid with two equal rows and two equal columns and pay attention on Grid.Row, Grid.Column, Grid.ColumnSpan properties defined on panels. For four panels we use UniformGrid 2x2.
Hope, that helps.
Important: This will only work if your panels should always be in same order, and for example Part3 can't be visible if `Part2' is hidden. Otherwise, it's a bit more tricky - you will need to dynamically assigned content to parts.
UPD: To view DataTemplate on window you can use ContentControl:
<ContentControl Content="1">
<ContentControl.ContentTemlate>
... Put DataTemplate here ...
</ContentControl.ContentTemplate>
</ContentControl>

how to resize this wpf button

I am not good at WPF and I am struggling with this a bit. I have a WPF window that has the following code:
<ContentControl.Content>
<Button Name="btnUpdateCommand" HorizontalAlignment="Right" Grid.Row="2" Command="{Binding UpdateCommand}" Height="23" Margin="0,4">
<StackPanel Orientation="Horizontal" Name="txtUpdate" HorizontalAlignment="Right">
<TextBlock Text="{Binding InstallButtonText}" DockPanel.Dock="Right" Margin="5,2,0,0" HorizontalAlignment="Right"></TextBlock>
<TextBlock Text="{Binding FormCloseCountDown}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
</StackPanel>
</Button>
</ContentControl.Content>
How do a resize btnUpdateCommand when I have localization text. I tried changing the alignment of the TextBlock etc. but no joy.
As an example this is what the button look like when it has english
And this is what the button looks like when it has french
What am I missing?
Here is the entrie XAML:
<UserControl x:Class="UpdateCheckModule.UpdateCheckProgress"
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"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
Height="250" Width="500">
<Grid Margin="10">
<Grid.RowDefinitions>
<RowDefinition Height="175"></RowDefinition>
<RowDefinition Height="10"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
</Grid.RowDefinitions>
<ContentControl Grid.Row="0">
<ContentControl.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="95"></RowDefinition>
<RowDefinition Height="30"></RowDefinition>
<RowDefinition Height="23"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" FontSize="18" />
<TextBlock Text="{Binding Status}" Grid.Row="1" />
<Border Grid.Row="2" BorderThickness="1" BorderBrush="DarkGray">
<ProgressBar Value="{Binding ProgressPercentage}" Foreground="#FF10AAE7"></ProgressBar>
</Border>
</Grid>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding HideProgress}" Value="True">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<ContentControl Grid.Row="0">
<ContentControl.Content>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="9*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40"></RowDefinition>
<RowDefinition Height="20"></RowDefinition>
<RowDefinition Height="115"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Text="{Binding Title}" Grid.Row="0" FontSize="18" />
<Image Source="pack://application:,,,/UpdateCheckModule;component/sedv2.ico" Grid.Column="1"></Image>
<TextBlock Text="{Binding ReleaseNotesText}" Grid.Row="1" Grid.ColumnSpan="2"/>
<Border BorderThickness="1" BorderBrush="DarkGray" Grid.Row="2" Grid.ColumnSpan="2">
<ScrollViewer VerticalScrollBarVisibility="Auto">
<TextBlock Text="{Binding DeploymentManifest.ReleaseNotes}" Background="White" Margin="5"></TextBlock>
</ScrollViewer>
</Border>
</Grid>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding HideProgress}" Value="True">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<Button Name="btnSkip" HorizontalAlignment="Left" Grid.Row="2" Content="{Binding SkipButtonText}" Width="100" Command="{Binding SkipCommand}" Height="23">
</Button>
<ContentControl Grid.Row="2">
<ContentControl.Content>
<Button Name="btnUacRestartCommand" HorizontalAlignment="Right" Grid.Row="2" Width="175" Command="{Binding UacRestartCommand}" Height="23">
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Shield}" DockPanel.Dock="Left"></Image>
<TextBlock Text="{Binding AdminInstallButtonText}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
<TextBlock Text="{Binding FormCloseCountDown}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
</StackPanel>
</Button>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Collapsed"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RequireUAC}" Value="True">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
<ContentControl Grid.Row="2">
<ContentControl.Content>
<Button Name="btnUpdateCommand" HorizontalAlignment="Right" Grid.Row="2" Width="175" Command="{Binding UpdateCommand}" Height="23">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding InstallButtonText}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
<TextBlock Text="{Binding FormCloseCountDown}" DockPanel.Dock="Right" Margin="5,2,0,0"></TextBlock>
</StackPanel>
</Button>
</ContentControl.Content>
<ContentControl.Style>
<Style TargetType="{x:Type ContentControl}">
<Setter Property="Visibility" Value="Visible"></Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RequireUAC}" Value="True">
<Setter Property="Visibility" Value="Collapsed"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>
</Grid>
You're explicitly setting the Width of the Button (to 175). Remove this attribute; this will allow the Button to determine its own optimal width.
While you're at it, remove the DockPanel.Dock attributes on the TextBlocks; these attributes do nothing since the TextBlocks are inside a StackPanel, not a DockPanel.

WPF - TextBlocks in ListView are not horizontal aligned

I have made a ListView in a WPF-application with different TextBlocks. Each row can contain several TextBlocks, but when a row contains more than one text block, the first one fits to the row, but the following TextBlocks does not align horizontally (see picture). I have no idea what could be the cause of this, so I hope someone could provide some clarification.
Below is the XAML-code.
<ListView ItemsSource="{Binding DataContext.Mechanics, RelativeSource={RelativeSource AncestorType={x:Type Window}}, UpdateSourceTrigger=PropertyChanged}" Height="auto" Width="1330"
Grid.Row="2" Grid.ColumnSpan="13" BorderThickness="0" Background="#FFF2F2F2">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1200"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding MecID}" Grid.Column="0" Padding="0" FontSize="11" Background="#FFF2F2F2"/>
<Label Content="{Binding Name}" Grid.Column="1" Padding="0" FontSize="11" Margin="2, 0, 0, 0"/>
<ListView ItemsSource="{Binding MecJobs, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" Padding="-1" Height="18" Width="1200" Grid.Column="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="White">
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<ListViewItem Width="{Binding EstimatedTimeWidth}" Canvas.Left="{Binding Margin}" Background="{Binding Color}" Height="18"
Padding="0" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<TextBlock TextAlignment="Center" Height="18" Padding="0" Margin="0">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} - {1}">
<Binding Path="RegNumber" />
<Binding Path="CustomerName" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</ListViewItem>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
EDIT: The problem was solved when the ListView was set with to include a Stackpanel with Orientation="Horizontal".
I think if you add a style for a listview item to the item container style your problem gets fixed.
If not just move the setter to your list box item style.
<ListView ItemsSource="{Binding DataContext.Mechanics, RelativeSource={RelativeSource AncestorType={x:Type Window}}, UpdateSourceTrigger=PropertyChanged}" Height="auto" Width="1330"
Grid.Row="2" Grid.ColumnSpan="13" BorderThickness="0" Background="#FFF2F2F2">
<ListView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="22"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="1200"/>
</Grid.ColumnDefinitions>
<Label Content="{Binding MecID}" Grid.Column="0" Padding="0" FontSize="11" Background="#FFF2F2F2"/>
<Label Content="{Binding Name}" Grid.Column="1" Padding="0" FontSize="11" Margin="2, 0, 0, 0"/>
<ListView ItemsSource="{Binding MecJobs, UpdateSourceTrigger=PropertyChanged}" BorderThickness="0" Padding="-1" Height="18" Width="1200" Grid.Column="2" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled" Background="White">
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
</ListView.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Canvas>
<ListViewItem Width="{Binding EstimatedTimeWidth}" Canvas.Left="{Binding Margin}" Background="{Binding Color}" Height="18"
Padding="0" Margin="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
<TextBlock TextAlignment="Center" Height="18" Padding="0" Margin="0">
<TextBlock.Text>
<MultiBinding StringFormat="{}{0} - {1}">
<Binding Path="RegNumber" />
<Binding Path="CustomerName" />
</MultiBinding>
</TextBlock.Text>
</TextBlock>
</ListViewItem>
</Canvas>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ListView>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
</Style>
<Style TargetType="ListViewItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>

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>

Categories

Resources