We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Style for Row/Column header area item

Thread ID:

Created:

Updated:

Platform:

Replies:

133055 Oct 6,2017 07:05 AM UTC Oct 10,2017 06:16 AM UTC WPF 5
loading
Tags: PivotGridControl
chaitanya
Asked On October 6, 2017 07:05 AM UTC

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 [Syncfusion]
Replied On October 6, 2017 12:30 PM UTC

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. 

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
Replied On October 6, 2017 02:10 PM UTC

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 [Syncfusion]
Replied On October 9, 2017 11:54 AM UTC

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:
 
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
Replied On October 9, 2017 02:34 PM UTC

Thanks for providing the color scheme.


Thirupathi Bala Krishnan [Syncfusion]
Replied On October 10, 2017 06:16 AM UTC

Hi Chaitanya,

Thanks for the update.

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

Regards,
Thirupathi B.
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;