c3rebro
c3rebro

Reputation: 45

Set image on datagrid row header through xaml

I tried to setup a Datagrid so that I have an image in the RowHeader to show the status of each object that is listed.

To achieve that, I have a IsTaskCompletedSuccessfully nullable boolean property in my view model.

In my resources, I added an image with the following style:

            <DataGrid.Resources>
                <Image x:Name="editImage"
                       x:Key="rowHeaderTemplate"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Width="16"
                       Margin="1,0">
                    <Image.Style>
                        <Style TargetType="Image">
                            <Style.Triggers>
                                <DataTrigger  Binding="{Binding IsTaskCompletedSuccessfully}" Value="true">
                                    <Setter Property="Source" Value="/RFiDGear;component/Resources/confirm.ico"/>
                                </DataTrigger >
                                <DataTrigger  Binding="{Binding IsTaskCompletedSuccessfully}" Value="false">
                                    <Setter Property="Source" Value="/RFiDGear;component/Resources/error.ico"/>
                                </DataTrigger >
                                <DataTrigger  Binding="{Binding IsTaskCompletedSuccessfully}" Value="{x:Null}">
                                    <Setter Property="Source" Value="/RFiDGear;component/Resources/wait.ico"/>
                                </DataTrigger >
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
            </DataGrid.Resources>

below i have the rowheaderstyle:

            <DataGrid.RowHeaderStyle>
                <Style TargetType="{x:Type DataGridRowHeader}">
                    <Setter Property="Content" Value="{StaticResource rowHeaderTemplate}"/>
                </Style>
            </DataGrid.RowHeaderStyle>

Unfortunately it only works on the last row/object added not on all rows. What did i miss here?!

Edit1:

I edited the Style to a RowHeaderTemplate. Later i figured out that databinding isn't working correctly this way. My Image Source won't update. There are no binding errors in the output window at runtime.

        <DataGrid.RowHeaderTemplate>
            <DataTemplate>
                <Image x:Name="editImage"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Width="16"
                       Margin="1,0">
                </Image>

                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding IsTaskCompletedSuccessfully}" Value="True">
                        <Setter TargetName="editImage" Property="Source" Value="/RFiDGear;component/Resources/confirm.ico"/>
                    </DataTrigger>

                    <DataTrigger Binding="{Binding IsTaskCompletedSuccessfully}" Value="False">
                        <Setter  TargetName="editImage" Property="Source" Value="/RFiDGear;component/Resources/error.ico"/>
                    </DataTrigger>

                    <!--<DataTrigger Binding="{Binding IsTaskCompletedSuccessfully}" Value="{x:Null}">
                        <Setter TargetName="editImage" Property="Source" Value="/RFiDGear;component/Resources/wait.ico"/>
                    </DataTrigger>-->

                </DataTemplate.Triggers>
            </DataTemplate>
        </DataGrid.RowHeaderTemplate>

Upvotes: 0

Views: 1036

Answers (1)

c3rebro
c3rebro

Reputation: 45

Got it working. I have to work with relativesource to find the datacontext.

            <DataGrid.RowHeaderTemplate>
                <DataTemplate>
                    <Image x:Name="editImage"
                           VerticalAlignment="Center"
                           HorizontalAlignment="Center"
                           Width="16"
                           Margin="1,0">
                    </Image>

                    <DataTemplate.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=DataContext.IsTaskCompletedSuccessfully}" Value="True">
                            <Setter TargetName="editImage" Property="Source" Value="/RFiDGear;component/Resources/confirm.ico"/>
                        </DataTrigger>

                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=DataContext.IsTaskCompletedSuccessfully}" Value="False">
                            <Setter  TargetName="editImage" Property="Source" Value="/RFiDGear;component/Resources/error.ico"/>
                        </DataTrigger>

                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=DataGridRow}, Path=DataContext.IsTaskCompletedSuccessfully}" Value="{x:Null}">
                            <Setter TargetName="editImage" Property="Source" Value="/RFiDGear;component/Resources/wait.ico"/>
                        </DataTrigger>

                    </DataTemplate.Triggers>
                </DataTemplate>
            </DataGrid.RowHeaderTemplate>

Upvotes: 1

Related Questions