longxiong14
Topic Author
Posts: 1
Joined: 11 Jul 2019, 11:14

TreeView

17 Jun 2020, 03:50

QQ图片20200617094825.png
QQ图片20200617094825.png (8.17 KiB) Viewed 305 times
How to Modify the Triangle Style Pointed by Arrows in the Figure
 
User avatar
sfernandez
Site Admin
Posts: 1928
Joined: 22 Dec 2011, 19:20

Re: TreeView

18 Jun 2020, 13:04

The appearance of any control is defined by its Template property. That triangle is part of the TreeViewItem template of our default theme.
    <Style x:Key="TreeViewToggleButton" TargetType="{x:Type ToggleButton}" BasedOn="{StaticResource DefaultControlStyle}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="ClickMode" Value="Press"/>
        <Setter Property="MinWidth" Value="15"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <ControlTemplate.Resources>
                        <Geometry x:Key="CollapsedPath">M4,0 L8,4 4,8 Z</Geometry>
                        <Geometry x:Key="ExpandedPath">M0,4 L8,4 4,8 Z</Geometry>
                    </ControlTemplate.Resources>
                    <Grid Background="Transparent">
                        <Border x:Name="Border"
                            Width="{TemplateBinding MinWidth}"
                            Height="{TemplateBinding MinWidth}"
                            Margin="4,0,2,0"
                            Padding="3"
                            CornerRadius="1"
                            Background="Transparent">
                            <Path x:Name="ExpandPath"
                                Data="{StaticResource CollapsedPath}"
                                Fill="{StaticResource CheckBgBrush}"
                                Stretch="Fill"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Border" Property="Background" Value="{StaticResource TrackBdBrush}"/>
                        </Trigger>
                        <Trigger Property="IsChecked" Value="True">
                            <Setter TargetName="ExpandPath" Property="Data" Value="{StaticResource ExpandedPath}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="ExpandPath" Property="Fill" Value="{StaticResource DisabledCheckBgBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource DefaultControlStyle}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="2,4"/>
        <Setter Property="MinHeight" Value="15"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <ToggleButton x:Name="Expander"
                            Grid.Column="0"
                            Style="{StaticResource TreeViewToggleButton}"
                            MinWidth="{TemplateBinding MinHeight}"
                            IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <Border x:Name="PART_Header"
                            Grid.Column="1"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                            <ContentPresenter
                                ContentSource="Header"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Border>
                        <ItemsPresenter x:Name="ItemsHost"
                            Grid.Column="1"
                            Grid.Row="1"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsExpanded" Value="False">
                            <Setter TargetName="ItemsHost" Property="Visibility" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="HasItems" Value="False">
                            <Setter TargetName="Expander" Property="Visibility" Value="Hidden"/>
                        </Trigger>
                        <Trigger SourceName="PART_Header" Property="IsMouseOver" Value="true">
                            <Setter Property="BorderBrush" Value="{StaticResource OverBdBrush}"/>
                            <Setter Property="Background" Value="{StaticResource OverBgBrush}"/>
                            <Setter Property="Foreground" Value="{StaticResource OverFgBrush}"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="true">
                            <Setter Property="BorderBrush" Value="{StaticResource PressBdBrush}"/>
                            <Setter Property="Background" Value="{StaticResource PressBgBrush}"/>
                        </Trigger>
                        <Trigger Property="IsKeyboardFocused" Value="True">
                            <Setter Property="BorderBrush" Value="{StaticResource FocusBdBrush}"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{StaticResource DisabledFgBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
You can define your own style/template and assign it to the TreeView like this:
<TreeView ItemContainerStyle="{StaticResource yourTreeViewItemStyle}">

Who is online

Users browsing this forum: No registered users and 4 guests