-
- longxiong14
- Posts: 1
- Joined:
TreeView
How to Modify the Triangle Style Pointed by Arrows in the Figure
-
-
sfernandez
Site Admin
- Posts: 2061
- Joined:
Re: TreeView
The appearance of any control is defined by its Template property. That triangle is part of the TreeViewItem template of our default theme.
You can define your own style/template and assign it to the TreeView like this:
Code: Select all
<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>
Code: Select all
<TreeView ItemContainerStyle="{StaticResource yourTreeViewItemStyle}">
Who is online
Users browsing this forum: No registered users and 3 guests