CODEWITHSUNDEEP
c#wpfexpression-blend
Jim_CS
Jim_CS

Reputation: 4172

Theming a single element differently than it's siblings

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?

Upvotes: 0

Views: 181

Answers (3)

brunnerh
brunnerh

Reputation: 185140

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)

Upvotes: 2

emybob
emybob

Reputation: 1333

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>

Upvotes: 0

Hukam
Hukam

Reputation: 1026

Just change BorderThickness like this.

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

Upvotes: 1

Related Questions