How to apply a custom style of sfdatagrid to a treegrid
i have a custom styled sfdatagrid and in the same application i have a sftreegrid which must look like the grid. here the xaml of the grid:
<SolidColorBrush x:Key="AccentForegroundBrush" Color="#FF0078D4"/>
<Style TargetType="syncfusion:GridHeaderCellControl" BasedOn="{StaticResource {x:Type syncfusion:GridHeaderCellControl}}">
<Setter Property="ToolTipService.InitialShowDelay" Value="300"/>
<!-- THIS binding ALWAYS works -->
<Setter Property="ToolTip">
<Setter.Value>
<Binding Path="DataContext.(helpers:HeaderHelper.ToolTipText)"
RelativeSource="{RelativeSource Self}"
FallbackValue="{x:Null}" />
</Setter.Value>
</Setter>
<Setter Property="Background" Value="{StaticResource Header_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Header_Foreground}"/>
<Setter Property="FontFamily" Value="{StaticResource Header_FontFamily}"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Height" Value="30"/>
<Setter Property="HorizontalContentAlignment" Value="Center"/>
<Setter Property="VerticalContentAlignment" Value="Center"/>
<Setter Property="Padding" Value="3,0,3,0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:GridHeaderCellControl">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<!-- Layout: [Text][SortAsc][SortDesc][Spacer*][Filter] -->
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<!-- 0: text -->
<ColumnDefinition Width="Auto"/>
<!-- 1: sort asc -->
<ColumnDefinition Width="Auto"/>
<!-- 2: sort desc -->
<ColumnDefinition Width="2"/>
<!-- 3: spacer -->
<ColumnDefinition Width="Auto"/>
<!-- 4: filter (right edge) -->
</Grid.ColumnDefinitions>
<!-- Header text -->
<ContentPresenter Grid.Column="0"
VerticalAlignment="Center"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"/>
<!-- Tiny sort glyph (ASC) -->
<Path Grid.Column="1"
Margin="4,0,0,0"
Width="8" Height="8"
Stretch="Uniform"
RenderOptions.EdgeMode="Aliased"
Fill="{TemplateBinding Foreground}"
Data="M4,0 L8,6 L0,6 Z">
<Path.Style>
<Style TargetType="Path">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SortDirection, RelativeSource={RelativeSource TemplatedParent}}"
Value="Ascending">
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Fill" Value="{DynamicResource AccentForegroundBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<!-- Tiny sort glyph (DESC) -->
<Path Grid.Column="2"
Margin="2,0,0,0"
Width="8" Height="8"
Stretch="Uniform"
RenderOptions.EdgeMode="Aliased"
Fill="{TemplateBinding Foreground}"
Data="M4,8 L0,2 L8,2 Z">
<Path.Style>
<Style TargetType="Path">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding SortDirection, RelativeSource={RelativeSource TemplatedParent}}"
Value="Descending">
<Setter Property="Visibility" Value="Visible"/>
<Setter Property="Fill" Value="{DynamicResource AccentForegroundBrush}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Path.Style>
</Path>
<!-- >>> REQUIRED: right-edge anchor for filter popup alignment <<< -->
<Border x:Name="PART_FilterEdgeHost"
Grid.Column="4"
HorizontalAlignment="Right"
VerticalAlignment="Stretch"
Width="0"
Background="Transparent"/>
<!-- >>> REQUIRED: popup host (must be a Decorator with .Child) <<< -->
<Border x:Name="PART_FilterPopUpPresenter"
Grid.ColumnSpan="5"
Panel.ZIndex="9999"
IsHitTestVisible="False"
Background="{x:Null}"/>
<!-- Filter toggle at the far right (uses your implicit style/template) -->
<syncfusion:FilterToggleButton x:Name="PART_FilterToggleButton"
Grid.Column="4"
VerticalAlignment="Center"
HorizontalAlignment="Right"
Margin="4,0,4,0"
Visibility="Visible" />
<!-- Tip: once working, replace Visibility="Visible" with your binding/logic for visibility -->
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="syncfusion:FilterToggleButton"
BasedOn="{StaticResource {x:Type syncfusion:FilterToggleButton}}">
<Setter Property="Width" Value="14"/>
<Setter Property="Height" Value="14"/>
<Setter Property="Padding" Value="1"/>
<Setter Property="Margin" Value="1"/>
<Setter Property="Foreground" Value="Gray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="syncfusion:FilterToggleButton">
<Border x:Name="Root"
Background="Transparent"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
SnapsToDevicePixels="True">
<Path x:Name="PART_FilterToggleButtonIndicator"
Margin="1"
Stretch="Uniform"
Fill="{TemplateBinding Foreground}"
RenderOptions.EdgeMode="Aliased"
Data="M0,0 L8,0 L5,3 L5,8 L3,8 L3,3 Z"/>
</Border>
<ControlTemplate.Triggers>
<!-- Active filter: Count >= 1 -->
<DataTrigger
Binding="{Binding DataContext.FilterPredicates.Count,
RelativeSource={RelativeSource AncestorType=syncfusion:GridHeaderCellControl},
Converter={StaticResource FilterCountToBoolConverter}}"
Value="True">
<Setter TargetName="Root"
Property="Background"
Value="Red"/>
<Setter TargetName="PART_FilterToggleButtonIndicator"
Property="Fill"
Value="White"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!-- ===== Base Row Style ===== -->
<Style TargetType="syncfusion:VirtualizingCellsControl" x:Key="BaseRowStyle">
<Setter Property="Background" Value="{StaticResource Row_Base_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Row_Base_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Row_Base_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Row_Base_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Row_Base_FontFamily}"/>
<Style.Triggers>
<!-- Hover -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Row_Hover_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Row_Hover_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Row_Hover_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Row_Hover_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Row_Hover_FontFamily}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- ===== Alternating Row Style ===== -->
<Style TargetType="syncfusion:VirtualizingCellsControl" x:Key="AltRowStyle">
<Setter Property="Background" Value="{StaticResource Row_Alt_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Row_Alt_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Row_Alt_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Row_Alt_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Row_Alt_FontFamily}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Row_Hover_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Row_Hover_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Row_Hover_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Row_Hover_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Row_Hover_FontFamily}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- ===== Base Row Style ===== -->
<Style TargetType="syncfusion:VirtualizingCellsControl" x:Key="DetailBaseRowStyle">
<Setter Property="Background" Value="{StaticResource Detail_Row_Base_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Detail_Row_Base_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Detail_Row_Base_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Detail_Row_Base_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Detail_Row_Base_FontFamily}"/>
<Style.Triggers>
<!-- Hover -->
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Row_Hover_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Row_Hover_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Row_Hover_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Row_Hover_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Row_Hover_FontFamily}"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- ===== Alternating Row Style ===== -->
<Style TargetType="syncfusion:VirtualizingCellsControl" x:Key="DetailAltRowStyle">
<Setter Property="Background" Value="{StaticResource Detail_Row_Alt_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Detail_Row_Alt_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Detail_Row_Alt_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Detail_Row_Alt_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Detail_Row_Alt_FontFamily}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type syncfusion:VirtualizingCellsControl}">
<Grid>
<Border x:Name="PART_RowBorder"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"/>
<Rectangle x:Name="PART_CurrentFocusRow"
Margin="{TemplateBinding CurrentFocusBorderMargin}"
Stroke="DarkGray"
StrokeDashArray="2,2"
StrokeThickness="1"
Visibility="{TemplateBinding CurrentFocusRowVisibility}" />
<Border Background="{TemplateBinding RowHoverBackgroundBrush}"
BorderBrush="{TemplateBinding RowHoverBackgroundBrush}"
BorderThickness="{TemplateBinding RowHighlightBorderThickness}"
Clip="{TemplateBinding HighlightBorderClipRect}"
SnapsToDevicePixels="True"
Visibility="{TemplateBinding HighlightSelectionBorderVisiblity}" />
<Rectangle Clip="{TemplateBinding RowBackgroundClip}"
Fill="{TemplateBinding Background}" />
<!-- YOUR CUSTOM SELECTION LAYER -->
<Border x:Name="PART_CustomSelection">
<TextBlock x:Name="PART_SelectedText"
FontFamily="{StaticResource Row_Selected_FontFamily}"
FontSize="{StaticResource Row_Selected_FontSize}"
FontWeight="{StaticResource Row_Selected_FontWeight}"
Foreground="{StaticResource Row_Selected_Foreground}"
Background="{StaticResource Row_Selected_Background}"
Visibility="{TemplateBinding SelectionBorderVisiblity}">
<ContentPresenter />
</TextBlock>
</Border>
<!-- CONTENT -->
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<TextBlock>
<ContentPresenter />
</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource Row_Hover_Background}"/>
<Setter Property="Foreground" Value="{StaticResource Row_Hover_Foreground}"/>
<Setter Property="FontWeight" Value="{StaticResource Row_Hover_FontWeight}"/>
<Setter Property="FontSize" Value="{StaticResource Row_Hover_FontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource Row_Hover_FontFamily}"/>
</Trigger>
</Style.Triggers>
</Style>
Attached the additional xamls for the grid and the rowheader:
<!-- ===== Row Header Cell -> First Cell in the row (aka "row Header") ===== --> <Style TargetType="syncfusion:GridRowHeaderCell"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="syncfusion:GridRowHeaderCell"> <Border x:Name="PART_RowHeaderCellBorder" Background="{StaticResource HeaderRow_Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <Grid> <!--RowIndex is displayed here --> <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding RowIndex, RelativeSource={RelativeSource TemplatedParent}}" TextAlignment="Center" Foreground="{StaticResource HeaderRow_Foreground}" FontWeight="{StaticResource HeaderRow_FontWeight}" FontFamily="{StaticResource HeaderRow_FontFamily}" /> </Grid> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <!-- ===== Apply to All Grids ===== --> <Style TargetType="syncfusion:SfDataGrid"> <!-- Datagrid Styles --> <!-- <Setter Property="HeaderStyle" Value="{StaticResource GlobalHeaderStyle}"/> --> <Setter Property="TableSummaryRowStyle" Value="{StaticResource TableSummaryRowStyle}"/> <Setter Property="GroupSummaryRowStyle" Value="{StaticResource GridGroupSummaryRowStyle}" /> <Setter Property="HeaderRowHeight" Value="{StaticResource DefaultHeaderRowHeight}" /> <Setter Property="RowHeight" Value="{StaticResource DefaultRowHeight}" /> <!-- Styling alternate Rows --> <Setter Property="RowStyleSelector" Value="{StaticResource RowStyleSelector}"/> <!-- DataGrid Properties --> <Setter Property="AutoExpandGroups" Value="True"/> <Setter Property="AllowSorting" Value="True"/> <Setter Property="AllowFiltering" Value="True"/> <Setter Property="AllowGrouping" Value="True" /> <Setter Property="AllowDraggingColumns" Value="True" /> <Setter Property="AllowTriStateSorting" Value="True" /> <Setter Property="AllowResizingColumns" Value="True"/> <Setter Property="GridLinesVisibility" Value="Both"/> <Setter Property="ShowRowHeader" Value="True" /> <!-- Selection Mode Properties --> <Setter Property="RowSelectionBrush" Value="{StaticResource Row_Selected_Background}"/> <Setter Property="SelectionForegroundBrush" Value="{StaticResource Row_Selected_Foreground}"/> <Setter Property="SelectionUnit" Value="Row"/> <Setter Property="SelectionMode" Value="Multiple"/> <Setter Property="NavigationMode" Value="Row" /> <!-- Events globally defined --> <Setter Property="helpers:GlobalDataGridEventWiring.EnableGlobalSelectionHandlers" Value="True"/> <Setter Property="ColumnSizer" Value="Auto"/> <Setter Property="UseLayoutRounding" Value="True"/> <Setter Property="SnapsToDevicePixels" Value="True"/> </Style> <Style x:Key="GridHeaderToolTipStyle" TargetType="ToolTip"> <!-- Appearance --> <Setter Property="Background" Value="LightBlue"/> <Setter Property="BorderBrush" Value="Goldenrod"/> <Setter Property="BorderThickness" Value="1"/> <Setter Property="Foreground" Value="Black"/> <!-- Text settings --> <Setter Property="FontSize" Value="10"/> <Setter Property="FontWeight" Value="Normal"/> <Setter Property="FontFamily" Value="Segoe UI"/> <!-- Padding + shape --> <Setter Property="Padding" Value="4"/> <!-- Optional: shadow --> <Setter Property="Effect"> <Setter.Value> <DropShadowEffect BlurRadius="4" ShadowDepth="1" Opacity="0.4"/> </Setter.Value> </Setter> <!-- Behavior --> <Setter Property="ToolTipService.ShowDuration" Value="30000"/> <Setter Property="ToolTipService.InitialShowDelay" Value="300"/> </Style>
We have reviewed your query. Based on your requirement, we regret to inform you that the custom style used forSfDataGrid cannot be applied to SfTreeGrid because their architectural types are different. For example, in SfDataGrid, the header cell type is GridHeaderCellControl, whereas in SfTreeGrid, it is TreeGridHeaderCell. Therefore, it is not possible to use SfDataGrid custom styles in SfTreeGrid.
You will need to create and apply custom styles specifically for SfTreeGrid, similar to how they were implemented for SfDataGrid.
Regards,
Senthilkumar Ranganathan.
- 2 Replies
- 2 Participants
-
FG Franz Gruber-Leitner
- May 9, 2026 02:34 PM UTC
- May 11, 2026 04:27 PM UTC
