I have an WPF application that contains a grid. The grid is split into 3 columns with the 3rd grid having zero width upon loading.
I have two datagrids in the other two columns. When the selected item in one of the datagrid changes the other datagrid changes it display values, i.e. a master detail template. This all works fine.
There is one value in the datagrid that if selected I wish this 3rd column to changes its width from zero to 2*. I don't know how to do this?
I wish to achieve this through XAML. I have been looking at data triggers & value converters. I written some code below quickly to test. I have read that setting the column to width=0 there is probably higher on the dependency property setting precedence list. Is there anyway to do this or will I need to use code behind?
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="0"/>
</Grid.ColumnDefinitions>
<DataGrid Grid.Column="0"
ItemsSource="{Binding OrderList}"
SelectedItem="{Binding OrderSelected}"
AutoGenerateColumns="True">
</DataGrid>
<TextBox Grid.Column="1" Text="{Binding OrderSelected.Name}">
</TextBox>
<Grid x:Name="columnHideSeek" Grid.Column="2" Background="Blue">
<Grid.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding OrderSelected.Name}" Value="Mark">
<Setter Property="Grid.Width" Value="10"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Grid.Style>
</Grid>
</Grid>
Using the correct DataTrigger
, this is totally possible. First, add the Trigger
to the UI element that you want to change... the ColumnDefinition
, not the Grid
:
<ColumnDefinition>
<ColumnDefinition.Style>
<Style TargetType="{x:Type ColumnDefinition}">
<Setter Property="Width" Value="10" />
<Style.Triggers>
<DataTrigger Binding="{Binding OrderSelected.Name}" Value="Mark">
<Setter Property="Width" Value="2*" />
</DataTrigger>
</Style.Triggers>
</Style>
</ColumnDefinition.Style>
</ColumnDefinition>
Next, don't set the Width
on the ColumnDefinition
element, but in the Style
instead. Otherwise the Width
on the ColumnDefinition
element will override the value set from the DataTrigger
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With