Articles in this section
Category / Section

How to customize the Toggle button color in GroupDropArea in WPF DataGrid (SfDataGrid)?

2 mins read

You can change the Toggle button color by customizing the ToggleButton and GroupDropArea style in WPF DataGrid (SfDataGrid).

<Window.Resources>
    <Style x:Key="ToggleButtonStyle" TargetType="ToggleButton">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid Background="{TemplateBinding Background}">
                        <Path Data="M31.460022,0 C34.221447,-4.8935362E-08 36.460022,2.2385764 36.460022,5 C36.460022,7.7614241 34.221447,10 31.460022,10 C28.698599,10 26.460022,7.7614241 26.460022,5 C26.460022,2.2385764 28.698599,-4.8935362E-08 31.460022,0 z M18.208984,0 C20.970407,-4.8935362E-08 23.208984,2.2385764 23.208984,5 C23.208984,7.7614241 20.970407,10 18.208984,10 C15.44756,10 13.208984,7.7614241 13.208984,5 C13.208984,2.2385764 15.44756,-4.8935362E-08 18.208984,0 z M5,0 C7.7614241,-4.8935362E-08 10,2.2385764 10,5 C10,7.7614241 7.7614241,10 5,10 C2.2385764,10 0,7.7614241 0,5 C0,2.2385764 2.2385764,-4.8935362E-08 5,0 z"
                    Fill="Red"
                    SnapsToDevicePixels="True"
                    Stretch="Uniform"
                    UseLayoutRounding="False" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style TargetType="syncfusion:GroupDropArea">
        <Setter Property="Background" Value="White" />
        <Setter Property="Foreground" Value="Gray" />
        <Setter Property="BorderBrush" Value="Gray" />
        <Setter Property="BorderThickness" Value="1,1,1,0" />
        <Setter Property="Focusable" Value="False" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="syncfusion:GroupDropArea">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                SnapsToDevicePixels="True">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="ExpansionStates">
                                <VisualStateGroup.Transitions>
                                    <VisualTransition GeneratedDuration="0" />
                                </VisualStateGroup.Transitions>
                                <VisualState x:Name="Collapsed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0,0,0,0</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Height)">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="0">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CircleEase />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Expanded">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Margin)">
                                            <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                                <DiscreteObjectKeyFrame.Value>
                                                    <Thickness>0,0,0,20</Thickness>
                                                </DiscreteObjectKeyFrame.Value>
                                            </DiscreteObjectKeyFrame>
                                        </ObjectAnimationUsingKeyFrames>
                                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_GroupDropAreaBorder" Storyboard.TargetProperty="(FrameworkElement.Height)">
                                            <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="28">
                                                <EasingDoubleKeyFrame.EasingFunction>
                                                    <CircleEase />
                                                </EasingDoubleKeyFrame.EasingFunction>
                                            </EasingDoubleKeyFrame>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.RowDefinitions>
                                <RowDefinition x:Name="rd0" Height="Auto" />
                                <RowDefinition x:Name="rd1" Height="*" />
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition x:Name="cd0" Width="*" />
                                <ColumnDefinition x:Name="cd1" Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <ToggleButton Grid.Row="0"
                                Grid.Column="1"
                                Width="45"
                                Height="12"
                                Margin="2"
                                Background="Transparent"
                                IsChecked="{Binding Path=IsExpanded,
                                                    RelativeSource={RelativeSource TemplatedParent},
                                                    Mode=TwoWay}"
                                IsTabStop="False"
                                IsThreeState="False"
                                SnapsToDevicePixels="True"
                                Style="{StaticResource ToggleButtonStyle}" />
                            <Border Name="PART_GroupDropAreaBorder"
                        Grid.Row="1"
                        Grid.Column="0"
                        Grid.ColumnSpan="1"
                        Height="0"
                        SnapsToDevicePixels="True">
                                <Grid x:Name="PART_GroupDropAreaGrid"
                            MaxHeight="30"
                            Margin="40,0,0,0">
                                    <Grid HorizontalAlignment="Center"
                                VerticalAlignment="Stretch"
                                Opacity="0.5"
                                Visibility="{TemplateBinding WatermarkTextVisibility}">
                                        <Rectangle RadiusX="5"
                                        RadiusY="5"
                                        SnapsToDevicePixels="True"
                                        Stroke="{TemplateBinding Foreground}"
                                        StrokeDashArray="5,5"
                                        StrokeThickness="1" />
                                        <TextBlock Margin="40,5"
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                        FontSize="14"
                                        Foreground="{TemplateBinding Foreground}"
                                        Text="{TemplateBinding GroupDropAreaText}" />
                                    </Grid>
                                    <StackPanel Name="PART_StackPanel"
                                    MaxHeight="30"
                                    Orientation="Horizontal" />
                                </Grid>
                            </Border>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

 

SfDataGrid Grouping

 

View Sample in GitHub

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied