Style for Row/Column header area item

[chaitanya]

How do i set a custom style for row/column header area items ? 

I wish to move the filter and sort button in the item to the next row.

[Sabaridass Ramamoorthy]

Hi Chaitanya, 

Thank you for contacting Syncfusion Support. 

We have prepared a simple sample to achieve your requirement – “Setting custom styles for GroupingBar header area items” and please find the sample from the below location. 

http://www.syncfusion.com/downloads/support/directtrac/133055/ze/Cell_Template-482527685 

Please refer to the following code examples. 

#MainWindow.Xaml 

 

   <Grid x:Name="grid1"> 

        <Grid.DataContext> 

            <viewModel:ViewModel /> 

        </Grid.DataContext> 

 

        <Grid.Resources> 

            <local:ImageConverter x:Key="ImageConverter"/> 

            <localConverter:SortDirectionConverter x:Key="sortDirectionConverter"/> 

            <!--<localConverter:ExpanderVisiblityConverter x:Key="expanderVisiblityConverter"/>--> 

             

            <!--Sorting Indicator Style--> 

 

            <Style TargetType="{x:Type Path}" x:Key="SortPathStyle"> 

                <Style.Triggers> 

                    <Trigger Property="IsMouseOver" Value="True"> 

                        <Setter Property="Fill" Value="#FF00FF10"/> 

                        <Setter Property="Stroke" Value="Red"/> 

                        <Setter Property="StrokeThickness" Value="3"/> 

                    </Trigger> 

                </Style.Triggers> 

                <Setter Property="Stroke" Value="LightGreen"/> 

                <Setter Property="Fill"> 

                    <Setter.Value> 

                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> 

                            <GradientStop Color="#FFB4B3E7" Offset="0"/> 

                            <GradientStop Color="#FF0800FF" Offset="1"/> 

                        </LinearGradientBrush> 

                    </Setter.Value> 

                </Setter> 

            </Style> 

 

            <!-- Filter Button Style --> 

 

            <ControlTemplate x:Key="FilterButtonTemplate"  TargetType="{x:Type Button}"> 

 

                <Path Fill="Purple"  x:Name="path" Height="12" Width="14" Data="{Binding Converter={StaticResource ImageConverter}}" Stretch="Uniform" VerticalAlignment="Center" /> 

 

                <ControlTemplate.Triggers> 

                    <Trigger Property="IsMouseOver" Value="True"> 

                        <Setter Property="Cursor" Value="Hand"/> 

                    </Trigger> 

 

                </ControlTemplate.Triggers> 

            </ControlTemplate> 

 

 

            <!-- PivotItem ToggleButton Style --> 

 

            <Style TargetType="{x:Type ToggleButton}" x:Key="ExamplePivotItemToggleButtonStyle"> 

                <Setter Property="Template"> 

                    <Setter.Value> 

                        <ControlTemplate TargetType="{x:Type ToggleButton}"> 

                            <Border Margin="2,4,2,3" x:Name="brdItem" VerticalAlignment="Top"  

                            Background="Violet" 

                            BorderBrush="Orange" 

                            BorderThickness="1"> 

                                <Grid HorizontalAlignment="Stretch" Height="25"> 

                                    <Grid.RowDefinitions> 

                                        <RowDefinition Height="*"/> 

                                        <RowDefinition Height="2"/> 

                                        <RowDefinition Height="*"/> 

                                    </Grid.RowDefinitions> 

                                    <TextBlock x:Name="PART_contentTxt" Grid.Row="0" TextTrimming="WordEllipsis" VerticalAlignment="Center"   

                                          Text="{Binding FieldHeader}" Margin="2,0" Foreground="Blue"> 

                                 <ToolTipService.ToolTip> 

                                    <ToolTip> 

                                        <TextBlock Text="{Binding FieldHeader}" Margin="2,0"/> 

                                    </ToolTip> 

                                </ToolTipService.ToolTip> 

                            </TextBlock> 

                                    <Grid Grid.Row="2"> 

                                        <Grid.ColumnDefinitions> 

                                            <ColumnDefinition Width="35"/> 

                                            <ColumnDefinition Width="35"/> 

                                        </Grid.ColumnDefinitions> 

                                        <Button Grid.Column="0" Height="10" HorizontalAlignment="Center" VerticalAlignment="Center" Template="{StaticResource FilterButtonTemplate}"   

                                          Tag="{Binding}" Command="local:PivotGridCommands.ShowFilter"> 

 

                                        </Button> 

                                        <Path x:Name="sortPath" Grid.Column="1" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Style="{StaticResource SortPathStyle}" Data="{Binding Converter={StaticResource sortDirectionConverter}}"/> 

                                    </Grid> 

                                </Grid> 

                            </Border> 

 

                        </ControlTemplate> 

                    </Setter.Value> 

                </Setter> 

            </Style> 

 

 

 

            <!-- PivotItem DataTemplate --> 

            <DataTemplate x:Key="ExamplePivotItemTemplate"> 

                <ToggleButton x:Name="toggleButtonItem" Style="{StaticResource ExamplePivotItemToggleButtonStyle}"  

                      IsChecked="True"                     

                      Command="local:PivotGridCommands.SortPivotItem" VerticalAlignment="Top" 

                      Tag="{Binding}" > 

                </ToggleButton> 

            </DataTemplate> 

</Grid.Resources> 

 

        <Grid.RowDefinitions> 

            <RowDefinition Height="25"/> 

            <RowDefinition Height="*"/> 

        </Grid.RowDefinitions> 

 

        <!--Sample Header--> 

        <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#FF119EDA"> 

            <TextBlock Text="PivotGrid control with template applied to header cells."  

                       VerticalAlignment="Center" Foreground="White" Margin="5,0,0,0"/> 

        </StackPanel> 

 

        <Grid Grid.Row="1"> 

            <Grid.ColumnDefinitions> 

                <ColumnDefinition Width="*"/> 

                <ColumnDefinition Width="300"/> 

            </Grid.ColumnDefinitions> 

            <!--PivotGrid control--> 

            <syncfusion:PivotGridControl x:Name="pivotGrid1" Margin="5" ShowGroupingBar="True"  

                                         ItemSource="{Binding ProductSalesData}"> 

                <syncfusion:PivotGridControl.PivotRows> 

                    <syncfusion:PivotItem FieldMappingName="Product" FieldHeader="Product" TotalHeader="Total"/> 

                    <syncfusion:PivotItem FieldMappingName="Date" FieldHeader="Date" TotalHeader="Total"/> 

                </syncfusion:PivotGridControl.PivotRows> 

                <syncfusion:PivotGridControl.PivotColumns> 

                    <syncfusion:PivotItem FieldMappingName="Country" FieldHeader="Country" TotalHeader="Total"/> 

                    <syncfusion:PivotItem FieldMappingName="State" FieldHeader="State" TotalHeader="Total"/> 

                </syncfusion:PivotGridControl.PivotColumns> 

                <syncfusion:PivotGridControl.PivotCalculations> 

                    <syncfusion:PivotComputationInfo CalculationName = "Total" Description = "Summation of values" FieldName = "Amount" Format = "C" SummaryType="DoubleTotalSum"/> 

                    <syncfusion:PivotComputationInfo CalculationName = "Total" Description = "Summation of values" FieldName = "Quantity" Format = "#.##" SummaryType="Count"/> 

                </syncfusion:PivotGridControl.PivotCalculations> 

            </syncfusion:PivotGridControl> 

 

            <GridSplitter Grid.Column="0" Width="1" Margin="0 5" Background="#FF119EDA" VerticalAlignment="Stretch" HorizontalAlignment="Right"/> 

 

            <syncfusion:PivotSchemaDesigner Name="SchemaDesigner" Grid.Column="1" Margin="5" VisualStyle="Metro" 

                                            PivotControl="{Binding ElementName=pivotGrid1}"/> 

        </Grid> 

    </Grid> 

 

#MainWindow.xaml.cs 

 

    public MainWindow() 

        { 

            InitializeComponent(); 

            pivotGrid1.Loaded += (s,e) => 

            { 

                pivotGrid1.GroupingBar.LayoutUpdated += (sender, args) => 

                { 

                    if(pivotGrid1.GroupingBar.RowHeaderArea != null && pivotGrid1.GroupingBar.ColumnHeaderArea != null) 

                    { 

                        pivotGrid1.GroupingBar.RowHeaderArea.ItemTemplate = pivotGrid1.GroupingBar.ColumnHeaderArea.ItemTemplate = grid1.FindResource("ExamplePivotItemTemplate") as DataTemplate; 

                        for(int i = 0; i < pivotGrid1.PivotRows.Count; i++) 

                        { 

                            ListBoxItem item = pivotGrid1.GroupingBar.RowHeaderArea.ItemContainerGenerator.ContainerFromIndex(i) as ListBoxItem; 

                            item.Width = pivotGrid1.InternalGrid.ColumnWidths[i]; 

                        } 

                    } 

                }; 

            }; 

        } 

Note: You can customize the style templates used in MainWindow.xaml based on your own style for GroupingBar header items in your application. 

Regards, 

Sabaridass R. 

[chaitanya]

Thanks for the prompt reply.

Can you please provide accent colors for VisualStyle="Metro" applied to the ToggleButton.?

or

Provide the same example with metro theme applied. (Since the shades of colors are hard to find)

[Thirupathi Bala Krishnan]

Hi Chaitanya,

 

We have modified the sample based on your requirement “Setting custom styles for ToggleButton based on the VisualStyle” and please find the sample from the following location:

https://www.syncfusion.com/downloads/support/forum/133055/ze/Cell_Template2045985944

 

Please refer the following code sample:

#MainWindow.xaml

 

   <Style TargetType="{x:Type Border}" x:Key="ButtonStyle">

                <Setter Property="Background" Value="#FFEBEBEB"/>

                <Setter Property="BorderBrush" Value="#00CCCCCC" />

                <Setter Property="BorderThickness" Value="1" />

            </Style>

 

            <!-- PivotItem ToggleButton Style -->

 

            <Style TargetType="{x:Type ToggleButton}" x:Key="ExamplePivotItemToggleButtonStyle">

                <Setter Property="Template">

                    <Setter.Value>

                        <ControlTemplate TargetType="{x:Type ToggleButton}">

                            <Border Margin="2,4,2,3" x:Name="brdItem" VerticalAlignment="Top"

                                Style="{StaticResource ButtonStyle}">

                                <Grid HorizontalAlignment="Stretch" Height="25">

                                    <Grid.RowDefinitions>

                                        <RowDefinition Height="*"/>

                                        <RowDefinition Height="2"/>

                                        <RowDefinition Height="*"/>

                                    </Grid.RowDefinitions>

                                    <TextBlock x:Name="PART_contentTxt" Grid.Row="0" TextTrimming="WordEllipsis" VerticalAlignment="Center" 

                                          Text="{Binding FieldHeader}" Margin="2,0" Foreground="Blue">

                                 <ToolTipService.ToolTip>

                                    <ToolTip>

                                        <TextBlock Text="{Binding FieldHeader}" Margin="2,0"/>

                                    </ToolTip>

                                </ToolTipService.ToolTip>

                            </TextBlock>

                                    <Grid Grid.Row="2">

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition Width="35"/>

                                            <ColumnDefinition Width="35"/>

                                        </Grid.ColumnDefinitions>

                                        <Button Grid.Column="0" Height="10" HorizontalAlignment="Center" VerticalAlignment="Center" Template="{StaticResource FilterButtonTemplate}" 

                                          Tag="{Binding}" Command="local:PivotGridCommands.ShowFilter">

 

                                        </Button>

                                        <Path x:Name="sortPath" Grid.Column="1" Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" Stretch="Fill" Style="{StaticResource SortPathStyle}" Data="{Binding Converter={StaticResource sortDirectionConverter}}"/>

                                    </Grid>

                                </Grid>

                            </Border>

 

                        </ControlTemplate>

                    </Setter.Value>

                </Setter>

            </Style>

 

Note: You can set your own colors by replacing the highlighted code for “ButtonStyle” used in MainWindow.xaml for ToggleButton in your application. 

 

Regards,

Thirupathi B.

[chaitanya]

Thanks for providing the color scheme.

[Thirupathi Bala Krishnan]

Hi Chaitanya,

Thanks for the update.

Please get back to us if you need any assistance on this.

Regards,
Thirupathi B.