Theming a single element differently than it's siblings

Question

I have a datagrid where the I have overridden the row style and control template for some custom theming. For the sake of example, I have put a rectangle (height: 1, fill: red) above each row. Like the image on the left here -

enter image description here

Here is the control template that does this, I have simply added a red rectangle to the default template.

<ControlTemplate TargetType="{x:Type DataGridRow}">
                    <Border x:Name="DGR_Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
                        <SelectiveScrollingGrid>
                            <SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </SelectiveScrollingGrid.ColumnDefinitions>
                            <SelectiveScrollingGrid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </SelectiveScrollingGrid.RowDefinitions>
                            **<Rectangle Grid.Row="0" Fill="Red" Height="1" VerticalAlignment="Top" Grid.ColumnSpan="2"/>**
                            <DataGridCellsPresenter Grid.Row="1" Grid.Column="1" ItemsPanel="{TemplateBinding ItemsPanel}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                            <DataGridDetailsPresenter Grid.Column="1" Grid.Row="2" SelectiveScrollingGrid.SelectiveScrollingOrientation="{Binding AreRowDetailsFrozen, ConverterParameter={x:Static SelectiveScrollingOrientation.Vertical}, Converter={x:Static DataGrid.RowDetailsScrollingConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" Visibility="{TemplateBinding DetailsVisibility}"/>
                            <DataGridRowHeader Grid.RowSpan="3" SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}"/>
                        </SelectiveScrollingGrid>
                    </Border>
                </ControlTemplate>

But say I want it to look like the image on the right...where there is no red rectangle for the first row. How would I go about doing that?

I have run into this issue a few times since while Ive been theming with WPF - I have another issue with TabItem Headers, in that I need the first tab to look differently than the rest. With CSS or jquery there are selectors specifically for this purpose when working on websites. Im writing a WPF desktop application and I can't see how to do it from a xaml/C# perspective. Anyone know?

H.B. · Accepted Answer · 2012-01-06T18:36:48.923

2

You can try using a DataTrigger with a RelativeSource on PreviousData, if it is null you have the first row.

(Note: If you do the same thing in a style targeting DataGridCells the PreviousData will work by column (as the previous cell is in the previous column), so the same trigger will affect the whole first column rather than the first row)

edited Jan 06 '12 at 18:36

answered Jan 06 '12 at 18:23

H.B.

166,899
29
327
400

score 1 · Answer 2 · answered Jan 06 '12 at 12:49

1

Just change BorderThickness like this.

<Border BorderThickness="0,0,0,1" BorderBrush="Red"/>

answered Jan 06 '12 at 12:49

Hukam

1,016
18
40

That workaround won't work for what I need to do. I didnt want to make the example too awkward too read so I simplified it a bit. But I have to be able to style the first element in a group of elements differently. – Jim_CS Jan 06 '12 at 13:32

emybob · Answer 3 · 2012-01-06T13:38:59.833

0

I would use some sort of trigger. something like this (havent tested it): (edited: try the datatrigger on the datagrid)

<DataGrid.RowStyle>
    <Style TargetType="DataGridRow">
        <Style.Triggers>
            <Trigger Property="Grid.Row" Value="0">
                <Setter Property="BorderBrush" Value="Black"/>
                <Setter Property="BorderThickness" Value="0,0,1,1"/>
            </Trigger>
        </Style.Triggers>
    </Style>
</DataGrid.RowStyle>

edited Jan 06 '12 at 13:38

answered Jan 06 '12 at 13:09

emybob

1,303
15
22

That will set the BorderThickness and BorderBrush to those values on every row. As the rectangle is always at Grid.Row=0 in the row template. – Jim_CS Jan 06 '12 at 13:29
updated answer. I think it may be best to not use the rectangle, and instead focus on the datagrid row properties. this code should work although you will need to add a better trigger property. ideally Value!= "0", but of course xaml wont compile it then. http://stackoverflow.com/a/793966/1074345 should help you with that part. – emybob Jan 06 '12 at 13:45

Theming a single element differently than it's siblings

3 Answers3