Search code examples
c#wpfxamldatagridwpftoolkit

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


Related to this question: How to style the top-left corner of a DataGrid in XAML?

How to customize style for top-left corner of WPF-Toolkit's DataGrid

Top-left corner in that data grid

XAML:

<Window x:Class="Matrix_WPFToolkit_Test.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <toolkit:DataGrid x:Name="dataGrid" IsReadOnly="True" HeadersVisibility="All" GridLinesVisibility="All" CanUserAddRows="False" CanUserDeleteRows="False" CanUserReorderColumns="False" CanUserResizeColumns="False" CanUserResizeRows="False" CanUserSortColumns="False" SelectionMode="Single" SelectionUnit="Cell" RowDetailsVisibilityMode="Visible"  SelectionChanged="dataGrid_SelectionChanged" Margin="-1,0,1.4,0.4" SelectedCellsChanged="dataGrid_SelectedCellsChanged">
        <toolkit:DataGrid.RowHeaderTemplate>
            <DataTemplate>
                <TextBlock Text="1"/>
            </DataTemplate>
        </toolkit:DataGrid.RowHeaderTemplate>
        <toolkit:DataGrid.ColumnHeaderStyle>
            <Style TargetType="toolkit:DataGridColumnHeader">
                <Setter Property="Background" Value="Gray"/>
                <Setter Property="FontWeight" Value="Bold"/>
                <Setter Property="BorderThickness" Value="1"/>
                <Setter Property="BorderBrush" Value="Black"/>
            </Style>
        </toolkit:DataGrid.ColumnHeaderStyle>
        <toolkit:DataGrid.RowHeaderStyle>
            <Style TargetType="toolkit:DataGridRowHeader">
                <Setter Property="Background" Value="Gray"/>
                <Setter Property="FontWeight" Value="Bold"/>
            </Style>
        </toolkit:DataGrid.RowHeaderStyle>
        <toolkit:DataGrid.CellStyle>
            <Style TargetType="toolkit:DataGridCell">
                <Setter Property="BorderThickness" Value="0"/>
                <Setter Property="Background" Value="LightGray" />
                <Setter Property="Foreground" Value="Black" />
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" Value="White"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </toolkit:DataGrid.CellStyle>
        <toolkit:DataGrid.RowStyle>
            <Style TargetType="toolkit:DataGridRow">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="BorderBrush" Value="Black" />
                        <Setter Property="BorderThickness" Value="0" />
                    </Trigger>
                </Style.Triggers>
            </Style>
        </toolkit:DataGrid.RowStyle>
    </toolkit:DataGrid>
</Grid>

Here I have customized the row header template, column heade style, cell selection style. How to style top-left corner cell in the data-grid (WPF Toolkit's)


Solution

  • Try this, changing Fill color on IsMouseOver:

    <Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication2"
        xmlns:Custom="http://schemas.microsoft.com/wpf/2008/toolkit" 
        x:Class="WpfApplication2.MainWindow"
        mc:Ignorable="d"
        Title="MainWindow" Height="300" Width="300">
    <Window.Resources>
    
        <ControlTemplate x:Key="SelectAllButtonTemplate" TargetType="{x:Type Button}">
            <Grid>
                <Rectangle x:Name="Border"
                 Fill="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" 
                 SnapsToDevicePixels="True" />
                <Polygon x:Name="Arrow"
               HorizontalAlignment="Right"
               VerticalAlignment="Bottom"
               Margin="8,8,3,3"
               Opacity="0.15"
               Fill="Black"
               Stretch="Uniform"
               Points="0,10 10,10 10,0" />
            </Grid>
            <ControlTemplate.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter TargetName="Border" Property="Stroke" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
                    <Setter TargetName="Border" Property="Fill" Value="Red" />
                </Trigger>
                <Trigger Property="IsPressed" Value="True">
                    <Setter TargetName="Border" Property="Fill" Value="{DynamicResource {x:Static SystemColors.ControlDarkBrushKey}}" />
                </Trigger>
                <Trigger Property="IsEnabled" Value="False">
                    <Setter TargetName="Arrow" Property="Visibility" Value="Collapsed" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    
        <Style x:Key="DataGridStyle1" TargetType="{x:Type Custom:DataGrid}">
            <Setter Property="Background"
                Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
            <Setter Property="Foreground"
                Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
            <Setter Property="BorderBrush" Value="#FF688CAF" />
            <Setter Property="BorderThickness" Value="1" />
            <!-- This is needed to force DG to have a non-default value.  Otherwise the DGR.DetailsVisibility cannot have a value of VisibleWhenSelected by default. -->
            <Setter Property="RowDetailsVisibilityMode" Value="VisibleWhenSelected" />
            <Setter Property="ScrollViewer.CanContentScroll"
                Value="true"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Custom:DataGrid}">
                        <Border Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding BorderBrush}"
                  BorderThickness="{TemplateBinding BorderThickness}"
                  SnapsToDevicePixels="True"
                  Padding="{TemplateBinding Padding}">
                            <ScrollViewer   Focusable="false"
                            Name="DG_ScrollViewer">
                                <ScrollViewer.Template>
                                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                                        <Grid>
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto"/>
                                                <RowDefinition Height="*"/>
                                                <RowDefinition Height="Auto"/>
                                            </Grid.RowDefinitions>
    
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="Auto"/>
                                                <ColumnDefinition Width="*"/>
                                                <ColumnDefinition Width="Auto"/>
                                            </Grid.ColumnDefinitions>
    
                                            <!--Left Column Header Corner -->
                                            <Button Command="{x:Static Custom:DataGrid.SelectAllCommand}"
                            Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=CellsPanelHorizontalOffset}"
                            Template="{StaticResource SelectAllButtonTemplate}"
                            Focusable="false"
                            Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=HeadersVisibility, Converter={x:Static Custom:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static Custom:DataGridHeadersVisibility.All}}" />
                                            <!--Column Headers-->
                                            <Custom:DataGridColumnHeadersPresenter Grid.Column="1" 
                                                       Name="PART_ColumnHeadersPresenter"
                                                       Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=HeadersVisibility, Converter={x:Static Custom:DataGrid.HeadersVisibilityConverter}, ConverterParameter={x:Static Custom:DataGridHeadersVisibility.Column}}"/>
    
                                            <!--DataGrid content-->
                                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter" Grid.Row="1" Grid.ColumnSpan="2" CanContentScroll="{TemplateBinding CanContentScroll}" />
    
                                            <ScrollBar Grid.Row="1" Grid.Column="2" Name="PART_VerticalScrollBar"
                                             Orientation="Vertical"
                                             Maximum="{TemplateBinding ScrollableHeight}"
                                             ViewportSize="{TemplateBinding ViewportHeight}"
                                             Value="{Binding Path=VerticalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
                                             Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
    
                                            <Grid Grid.Row="2" Grid.Column="1">
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType={x:Type Custom:DataGrid}}, Path=NonFrozenColumnsViewportHorizontalOffset}"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <ScrollBar Grid.Column="1"
                                 Name="PART_HorizontalScrollBar"
                                 Orientation="Horizontal"
                                 Maximum="{TemplateBinding ScrollableWidth}"
                                 ViewportSize="{TemplateBinding ViewportWidth}"
                                 Value="{Binding Path=HorizontalOffset, RelativeSource={RelativeSource TemplatedParent}, Mode=OneWay}"
                                 Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>
    
                                            </Grid>
                                        </Grid>
                                    </ControlTemplate>
                                </ScrollViewer.Template>
                                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsGrouping" Value="true">
                    <Setter Property="ScrollViewer.CanContentScroll" Value="false"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    
    </Window.Resources>
    
    <Window.DataContext>
        <local:MyViewModel/>
    </Window.DataContext>
    
    <Grid>
    
        <Custom:DataGrid x:Name="dataGrid1" Margin="0" ItemsSource="{Binding Data}" Style="{StaticResource DataGridStyle1}"/>
    
    </Grid>
    

    enter image description here