How to combine multiple headers in wpf datagrid
I want to combine these two columns "Bets" and "Play".
I want to combine two columns into one column using wpf datagrid.
My DataGrid is how to follow.! [enter image description here] [2]! [enter image description here] [3]
<DataGrid.CellStyle>
<Style TargetType="{x:Type DataGridCell}">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Effect">
<Setter.Value>
<DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="10,0,0,0" />
<Setter Property="VerticalContentAlignment" Value="Bottom"/>
</Style>
</DataGrid.CellStyle>
<DataGrid.RowStyle>
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontFamily" Value="Arial"/>
<Setter Property="Foreground" Value="#404040"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="DataContext">
<Setter.Value>
<TextBlock Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/>
</TextBlock.Effect>
</TextBlock>
</Setter.Value>
</Setter>
</Style>
</DataGrid.RowStyle>
<DataGrid.RowBackground >
<ImageBrush ImageSource="/ClientApplication;component/Images/second_row_bg.png"/>
</DataGrid.RowBackground>
<DataGrid.AlternatingRowBackground>
<ImageBrush ImageSource="/ClientApplication;component/Images/bonus_progress_bg.png"/>
</DataGrid.AlternatingRowBackground>
<DataGrid.ColumnHeaderStyle>
<Style TargetType="{x:Type DataGridColumnHeader}">
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="ContentTemplate" >
<Setter.Value>
<DataTemplate>
<TextBlock Margin="10,0,0,0" TextWrapping="Wrap" Text="{Binding}">
<TextBlock.Effect>
<DropShadowEffect BlurRadius="0" Color="#FF000000" Direction="-60" Opacity="0.32" ShadowDepth="1"/>
</TextBlock.Effect>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/ClientApplication;component/Images/table_bg_header.png"/>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<ImageBrush ImageSource="/ClientApplication;component/Images/titel_bg.png"/>
</Setter.Value>
</Setter>
<Setter Property="Foreground" Value="#404040" />
<Setter Property="BorderThickness" Value="0, 0, 1, 0"/>
<Setter Property="Height" Value="26" />
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontFamily" Value="Arial"/>
</Style>
</DataGrid.ColumnHeaderStyle>
<DataGrid.Columns>
<DataGridTextColumn Width="125" Header="Table" Binding="{Binding Path=Table}">
</DataGridTextColumn>
<DataGridTextColumn Width="102" Header="Stakes" Binding="{Binding Path=Stakes}" />
<DataGridTextColumn Width="95" Header="Game" Binding="{Binding Path=Game}" />
<DataGridTextColumn Width="87" Header="Type" Binding="{Binding Path=Type}" />
<DataGridTextColumn Width="83" Header="Players" Binding="{Binding Path=Players}" />
<DataGridTextColumn Width="117" Header="Average Pot" Binding="{Binding Path=Average}" />
<DataGridTextColumn Width="65" Header="H/Hr" Binding="{Binding Path=hhr}" />
</DataGrid.Columns>
</DataGrid>
Please give me an important comment on this matter. Thank you for your help.
source to share
If you are able to make it read-only, then an easy way is to bind another property - StakesAndGame
:
public string StakesAndGame
{
get { return string.Format("{0} {1}", Stakes, Game); }
}
and just add the column that uses it:
<DataGridTextColumn Width="102" Header="Stakes" Binding="{Binding StakesAndGame}" />
Just remember to call OnPropertyChanged
for this property as well when changing rates or rates. Or you can write a value converter and concatenate two columns along with it, but this requires more code than the previous one.
If you need them to be writable then it is more difficult and I really do not recommend this approach. But if you need it, you can play with DataGridTemplateColumn
, like in this answer .
source to share
You can use DataGridTemplateColumn
to do what you want:
<DataGridTemplateColumn Header="Stakes">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Path=Stakes}" />
<TextBlock Text="{Binding Path=Game}" />
</StackPanel>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
source to share