CODEWITHSUNDEEP
c#.netwpfxamldatagrid
Danny Beckett
Danny Beckett

Reputation: 20738

How to style the top-left corner of a DataGrid in XAML?

Related to this question: Style datagrid table - Top left corner.

I have a DataGrid (not finished yet, excuse the styles). How can I change the background colour of the top-left corner using XAML (as opposed to C# in the other question)?

Here's my current XAML:

<DataGrid x:Name="DataGrid" HorizontalAlignment="Center" VerticalAlignment="Center"
          ColumnWidth="100" ColumnHeaderHeight="50" RowHeight="50" RowHeaderWidth="115" Padding="5"
          BorderBrush="#FF646464" FontSize="18" FontFamily="Segoe UI"
          CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserSortColumns="False" CanUserResizeRows="False"
          Focusable="False" IsEnabled="False" IsReadOnly="True">
    <DataGrid.Background>
        <SolidColorBrush Color="#FFFFFFC8"/>
    </DataGrid.Background>
    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding In}" Header="In"/>
        <DataGridTextColumn Binding="{Binding Out}" Header="Out"/>
        <DataGridTextColumn Binding="{x:Null}" Header="Hours"/>
    </DataGrid.Columns>
    <DataGrid.ColumnHeaderStyle>
        <Style TargetType="{x:Type DataGridColumnHeader}">
            <Setter Property="Background" Value="#FFFFFFC8"/>
            <Setter Property="BorderBrush" Value="DarkSlateGray"/>
            <Setter Property="BorderThickness" Value="1, 2"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="5"/>
        </Style>
    </DataGrid.ColumnHeaderStyle>
    <DataGrid.RowBackground>
        <SolidColorBrush Color="Transparent"/>
    </DataGrid.RowBackground>
    <DataGrid.RowHeaderStyle>
        <Style TargetType="{x:Type DataGridRowHeader}">
            <Setter Property="Background" Value="#FFFFFFC8"/>
            <Setter Property="BorderBrush" Value="DarkSlateGray"/>
            <Setter Property="BorderThickness" Value="2, 1"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="Padding" Value="5"/>
        </Style>
    </DataGrid.RowHeaderStyle>
    <DataGrid.RowHeaderTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type DataGridRow}}, Path=Item.Day}"/>
        </DataTemplate>
    </DataGrid.RowHeaderTemplate>
</DataGrid>

Bonus: how can I get a 2px border on the row/column headers where there's currently only a 1px border?

Upvotes: 3

Views: 5092

Answers (2)

omei
omei

Reputation: 51

After testing i found only one way to set the color. With the Backcolor from DataGrid and Opacity 0 from Button :-)

<DataGrid Background="Yellow" RowHeaderWidth="100">
   <DataGrid.Resources>
      <Style TargetType="{x:Type Button}" x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}">
         <Setter Property="Opacity" Value="0" />
      </Style>
   </DataGrid.Resources>
</DataGrid>

Upvotes: 1

Chris W.
Chris W.

Reputation: 23280

Right so if we go check out the Default Template and at the very top of the first code example we see;

<!--Style and template for the button in the upper left corner of the DataGrid.-->

With the declared style template of:

<Style TargetType="{x:Type Button}"
       x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, 
               TypeInTargetAssembly={x:Type DataGrid}}">

We now know what/where it is. After that it's just a matter of editing said style part to our hearts content and overriding at the instance level or at the template etc.

As for your bonus question, if we go check out the same style templates at the <Style TargetType="{x:Type DataGridRowHeader}"> we'll see hard-set BorderThickness on the x:Name="rowHeaderBorder" that we'll just change to whatever. Wherein the same applies to the <Style TargetType="{x:Type DataGridColumnHeader}"> template as there's also another hard-set BorderThickness of "1" on the x:Name="columnHeaderBorder"

Upvotes: 7

Related Questions