Hello, I am having some issues styling the DataGrid in WPF. I have a column which consists of an image button (button where content is an image) that represents opening the file in excel. The image is only appearing for the first created row leaving the rest of the buttons in the column without an image.
The question: How can I get every button in the "Open" column to have the Excel image as it's content?
Button style:
<Style x:Key="btnOpenJr" TargetType="Button">
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="20"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="Content">
<Setter.Value>
<Image Height="20" Source="/BTLogFrontEnd;component/Resources/open_excel.ico"/>
</Setter.Value>
</Setter>
</Style>
DataGridCell style:
<Style x:Key="cellStyle" TargetType="{x:Type DataGridCell}">
<Style.Triggers>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="DeepSkyBlue">
<ContentPresenter
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DataGridCell}">
<Grid Background="Lime">
<ContentPresenter
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
DataGrid definition:
<DataGrid
Name="grdData"
CellStyle="{StaticResource cellStyle}"
Margin="10"
FontFamily="Verdana"
Foreground="MidnightBlue"
Background="MidnightBlue"
BorderBrush="Transparent"
AutoGenerateColumns="False"
RowHeight="22"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="True"
CanUserResizeColumns="False"
CanUserResizeRows="False"
CanUserSortColumns="True"
RowHeaderWidth="5"
ItemsSource="{Binding GridData}"
SelectionUnit="CellOrRowHeader"
Width="550"
ColumnHeaderStyle="{StaticResource gridHeaderStyle}"
SelectionMode="Extended">
<DataGrid.Columns>
<DataGridTemplateColumn
Width="40"
Header="Open">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button Style="{StaticResource btnOpenJr}"/>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridCheckBoxColumn
Width="65"
Header="Approved">
</DataGridCheckBoxColumn>
<DataGridTextColumn
Width="40"
Binding="{Binding Number}"
Header="JR #"/>
<DataGridTextColumn
Width="55"
Binding="{Binding Process}"
Header="Process"/>
<DataGridTextColumn
Width="55"
Binding="{Binding Wafer}"
Header="Wafer"/>
<DataGridTextColumn
Width="335"
Binding="{Binding Description}"
Header="Description"/>
</DataGrid.Columns>
</DataGrid>
Any help will be greatly appreciated.
Regards,
Kyle
I found a solution:
Remove the "btnOpenJr" button style out from the app.xaml file and use an inline style for that column in the DataGrid definition.
The new DataGrid definition becomes:
<DataGrid
Name="grdData"
CellStyle="{StaticResource cellStyle}"
Margin="10"
FontFamily="Verdana"
Foreground="MidnightBlue"
Background="MidnightBlue"
BorderBrush="Transparent"
AutoGenerateColumns="False"
RowHeight="22"
CanUserAddRows="False"
CanUserDeleteRows="False"
CanUserReorderColumns="True"
CanUserResizeColumns="False"
CanUserResizeRows="False"
CanUserSortColumns="True"
RowHeaderWidth="5"
ItemsSource="{Binding GridData}"
SelectionUnit="CellOrRowHeader"
Width="550"
ColumnHeaderStyle="{StaticResource gridHeaderStyle}"
SelectionMode="Extended">
<DataGrid.Columns>
<DataGridTemplateColumn
Width="40"
Header="Open">
<DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Button
Width="20"
Height="20"
HorizontalContentAlignment="Center">
<Image
Height="20"
Source="/BTLogFrontEnd;component/Resources/open_excel.ico"/>
</Button>
</DataTemplate>
</DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>
<DataGridCheckBoxColumn
Width="65"
Header="Approved">
</DataGridCheckBoxColumn>
<DataGridTextColumn
Width="40"
Binding="{Binding Number}"
Header="JR #"/>
<DataGridTextColumn
Width="55"
Binding="{Binding Process}"
Header="Process"/>
<DataGridTextColumn
Width="55"
Binding="{Binding Wafer}"
Header="Wafer"/>
<DataGridTextColumn
Width="335"
Binding="{Binding Description}"
Header="Description"/>
</DataGrid.Columns>
</DataGrid>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.