WPF DataGrid: How do I get all buttons in a DataGridTemplateColumn to have the same image?

Question

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

Answer 1

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>