Reputation: 45
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
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