Can i change color or style of TreeView's expand/collapse button?

I'm trying to use SFTreeView and background is dark Gray.

Then, I want to change expand/collapse button's color Light .

How can i change their color or style?

Image_7326_1697440400532


Attachment: WpfAppTest_e921d08b.zip

1 Reply 1 reply marked as answer

SG Santhosh Govindasamy Syncfusion Team October 17, 2023 02:58 PM UTC

Hi AndrewJ

Based on the information you provided, we can meet your requirements by overriding the "Fill" property in the Expander button in  "DataTemplate" and then binding the modified data template to the "ExpanderTemplate" through the Sftreeview.

We have modified the sample, please look at it. If we missed anything, please share the more details about this. It would be helpful for us to check and provide you with a solution as soon as possible.

Please refer the code snippet:

<DataTemplate x:Key="ExpanderTemplate">

            <Grid x:Name="grid"

              Width="{TemplateBinding Width}"

              Background="Transparent">

                <Path x:Name="PART_CollapseCellPath"

                  Width="6.061"

                  Height="8.706"

                  Data="M0.68398996,0 L6.2700001,4.9960007 0.66699173,10.007999 0,9.2629985 4.7700011,4.9960007 0.016998228,0.74499984 z"

                  Stretch="Uniform"

                  Fill="White" />

                <Path x:Name="PART_ExpanderCellPath"

                  Width="8.706"

                  Height="6.061"

                  Data="M0.74499548,0 L5.0119957,4.7700001 9.2630047,0.017000169 10.008001,0.68400005 5.0119957,6.2700001 0,0.66699985 z"

                  Stretch="Uniform"

                  Fill="White"/>

            </Grid>

            <DataTemplate.Triggers>

                <DataTrigger Binding="{Binding IsExpanded}" Value="True">

                    <Setter Property="Visibility" TargetName="PART_ExpanderCellPath" Value="Visible"/>

                    <Setter Property="Visibility" TargetName="PART_CollapseCellPath" Value="Collapsed"/>

                </DataTrigger>

                <DataTrigger Binding="{Binding IsExpanded}" Value="False">

                    <Setter Property="Visibility" TargetName="PART_ExpanderCellPath" Value="Collapsed"/>

                    <Setter Property="Visibility" TargetName="PART_CollapseCellPath" Value="Visible"/>

                </DataTrigger>

            </DataTemplate.Triggers>

        </DataTemplate>

 

<syncfusion:SfTreeView x:Name="sfTreeViewSolutionEx"

                               Grid.Row="0"

                               ScrollViewer.HorizontalScrollBarVisibility="Auto"

                               ChildPropertyName="ChildSolutionExp"

                               Background="#555555"

                               SelectionBackgroundColor="RoyalBlue" ExpanderTemplate="{StaticResource ExpanderTemplate}"

                               ItemsSource="{Binding ItemSolutionExplorerItem}">

            <syncfusion:SfTreeView.ItemTemplate>

                <DataTemplate>

                    <Grid x:Name="gridSolutionExp">

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="*"/>

                        </Grid.ColumnDefinitions>

                        <Image

                        x:Name="ImageCell"

                        Grid.Column="0"

                        MinWidth="35"

                        Margin="1,6,0,6"

                        Source="{Binding IsEnable, Converter={StaticResource ImageConvertersSolutionExp}}"/>

                        <TextBlock Grid.Column="1"

                               x:Name="TextCell"

                               Margin="2"

                               HorizontalAlignment="Left"

                               VerticalAlignment="Center"

                               Foreground="{Binding IsEnable, Converter={StaticResource TextConvertersSolutionExp}}"

                               Text="{Binding Name}"/>

                    </Grid>

                </DataTemplate>

            </syncfusion:SfTreeView.ItemTemplate>

        </syncfusion:SfTreeView>


Regards,
Santhosh.G


Attachment: WpfAppTest_e921d08b_ed1c4680.zip

Marked as answer
Loader.
Up arrow icon