Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style datagrid table - Top left corner

I am styling a datatable but I can't figure out how to style the top left filed of the datagrid. It is the gray field in this picture:

enter image description here

Do you know how to do it?

Here is my style so far:

<Style TargetType="{x:Type DataGrid}">
    <Setter Property="Margin" Value="5" />
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White"/>
                <GradientStop Color="AliceBlue" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="RowBackground">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="#BAF0FF"/>
                <GradientStop Color="PowderBlue" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="AlternatingRowBackground">
        <Setter.Value>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White"/>
                <GradientStop Color="AliceBlue" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
    <Setter Property="HorizontalGridLinesBrush" Value="LightGray" />
    <Setter Property="VerticalGridLinesBrush" Value="LightGray" />
</Style>
like image 673
7heViking Avatar asked Nov 30 '11 15:11

7heViking


2 Answers

From this answer I was able to create this code which correctly sets the style of the button:

<DataGrid>    
    <DataGrid.Resources>
        <Style TargetType="Button" x:Key="{ComponentResourceKey ResourceId=DataGridSelectAllButtonStyle, TypeInTargetAssembly={x:Type DataGrid}}">
            <Setter Property="Background" Value="Black" />
        </Style>
    </DataGrid.Resources>
</DataGrid>
like image 52
Gman Avatar answered Nov 02 '22 19:11

Gman


I got an imperfect but working solution.
You can get the "Top left corner" object of the datagrid by VisualTreeHelper. Which is actually a button. I think you know how to do next.
Here is my working code:

//Change the top left button to a CheckBox
void StyleSelectAllButton(DependencyObject dependencyObject)
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(dependencyObject); i++)
    {
        var child = VisualTreeHelper.GetChild(dependencyObject, i);
        if ((child != null) && child is Button)
        {
            var grid = (Grid)VisualTreeHelper.GetChild(child, 0);

            var checkBox = new CheckBox()
            {
                VerticalAlignment = VerticalAlignment.Center,
                HorizontalAlignment = HorizontalAlignment.Center,
            };

            checkBox.Click += OnCheckBoxClicked;

            grid.Children.Clear();
            grid.Children.Add(checkBox);
        }
        else
        {
            StyleSelectAllButton(child);
        }
    }
}

//Action when the top left check box checked and unchecked
void OnCheckBoxClicked(object sender, RoutedEventArgs e)
{
    var checkBox = sender as CheckBox;

    if (checkBox == null)
    {
        return;
    }

    if (checkBox.IsChecked == true)
    {
        //Change the 'dataGrid' to your DataGrid instance name
       dataGrid.SelectAllCells(); 
    }
    else
    {
        //Change the 'dataGrid' to your DataGrid instance name
        dataGrid.UnselectAllCells();
    }
}
like image 28
Darren Avatar answered Nov 02 '22 19:11

Darren