WPF 基础控件之 TreeView 样式

其他基础控件

1.Window
2.Button
3.CheckBox
4.ComboBox
5.DataGrid
6.DatePicker
7.Expander
8.GroupBox
9.ListBox
10.ListView
11.Menu
12.PasswordBox
13.TextBox
14.RadioButton
15.ToggleButton
16.Slider

TreeView 实现下面的效果

1）TreeView来实现动画；

Grid 分两列第0列展示ToggleButton ，第一列展示ItemsPresenter ；
将Border.RenderTransform 的 ScaleTransform ScaleY="0"；
当Expanded设置为true修改Border.RenderTransform的ScaleTransform ScaleY="1"；

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:sys="clr-namespace:System;assembly=mscorlib"xmlns:wpfs="clr-namespace:WPFDevelopers.Minimal.Helpers"><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="../Themes/Basic/ControlBasic.xaml"/><ResourceDictionary Source="../Themes/Basic/Animations.xaml"/></ResourceDictionary.MergedDictionaries><Style TargetType="{x:Type TreeView}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" /><Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" /><Setter Property="BorderThickness" Value="1"/><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="TreeView"><Border Name="Border" BorderThickness="{TemplateBinding BorderThickness}"BorderBrush="{DynamicResource BaseSolidColorBrush}"Background="{DynamicResource WhiteSolidColorBrush}"><ScrollViewer Focusable="False"CanContentScroll="False" Padding="4"><ItemsPresenter /></ScrollViewer></Border></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Focusable" Value="False" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="ToggleButton"><Grid Width="15" Height="13" Background="Transparent"><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="CheckStates"><VisualState x:Name="Checked">                                    <Storyboard>                                        <DoubleAnimation Duration="00:00:.2" To="90"                                             Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"                                             Storyboard.TargetName="Expanded"/>                                    </Storyboard>                                </VisualState>                                <VisualState x:Name="Unchecked">                                    <Storyboard>                                        <DoubleAnimation Duration="00:00:.2" To="0"                                             Storyboard.TargetProperty="(Path.RenderTransform).(RotateTransform.Angle)"                                             Storyboard.TargetName="Expanded"/>                                    </Storyboard>                                </VisualState><VisualState x:Name="Indeterminate" /></VisualStateGroup></VisualStateManager.VisualStateGroups><Path x:Name="Expanded"Stretch="Fill" Height="10" Width="6"                              Data="{StaticResource PathNext}"                              RenderTransformOrigin=".5,.5">                            <Path.Fill>                                <SolidColorBrush Color="{DynamicResource PrimaryTextColor}" />                            </Path.Fill>                            <Path.RenderTransform>                                <RotateTransform/>                            </Path.RenderTransform></Path></Grid></ControlTemplate></Setter.Value></Setter></Style><Style x:Key="TreeViewItemFocusVisual"><Setter Property="Control.Template"><Setter.Value><ControlTemplate><Border><Rectangle Margin="0,0,0,0"StrokeThickness="5"Stroke="Black"StrokeDashArray="1 2"Opacity="0" /></Border></ControlTemplate></Setter.Value></Setter></Style><Style TargetType="{x:Type TreeViewItem}" BasedOn="{StaticResource ControlBasicStyle}"><Setter Property="Background" Value="Transparent" /><Setter Property="HorizontalContentAlignment" Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /><Setter Property="VerticalContentAlignment" Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /><Setter Property="Padding" Value="10" /><Setter Property="Cursor" Value="Hand"/><Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}" /><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type TreeViewItem}"><Grid><VisualStateManager.VisualStateGroups><VisualStateGroup x:Name="ExpansionStates"><VisualState x:Name="Expanded"><Storyboard><DoubleAnimation Duration="00:00:.2"To="1"Storyboard.TargetProperty="(Border.RenderTransform).(ScaleTransform.ScaleY)"Storyboard.TargetName="PART_ItemsHost"/></Storyboard></VisualState><VisualState x:Name="Collapsed"/></VisualStateGroup></VisualStateManager.VisualStateGroups><Grid.RowDefinitions><RowDefinition Height="Auto"/><RowDefinition/></Grid.RowDefinitions><Border x:Name="PART_Border"BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True"><DockPanel LastChildFill="True"><ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/><ContentPresenter VerticalAlignment="Center" x:Name="PART_Header" ContentSource="Header" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/></DockPanel></Border><Border Grid.Row="1" RenderTransformOrigin=".5,0"x:Name="PART_ItemsHost"><Border.RenderTransform><ScaleTransform ScaleY="0"/></Border.RenderTransform><ItemsPresenter x:Name="ItemsHost"/></Border><!--<ItemsPresenter x:Name="ItemsHost" Grid.Row="1"/>--></Grid><ControlTemplate.Triggers><Trigger Property="IsMouseOver" SourceName="PART_Border" Value="True"><Setter Property="Background" TargetName="PART_Border" Value="{DynamicResource BaseMoveColorSolidColorBrush}"/></Trigger><Trigger Property="IsExpanded" Value="False"><Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/></Trigger><Trigger Property="HasItems" Value="False"><Setter Property="Visibility" TargetName="Expander" Value="Hidden"/></Trigger><Trigger Property="IsSelected" Value="True"><Setter Property="Background" TargetName="PART_Border" Value="{DynamicResource BaseSolidColorBrush}"/></Trigger><MultiTrigger><MultiTrigger.Conditions><Condition Property="IsSelected" Value="True"/><Condition Property="IsSelectionActive" Value="False"/></MultiTrigger.Conditions><Setter Property="Background" TargetName="PART_Border" Value="{DynamicResource WhiteSolidColorBrush}"/></MultiTrigger></ControlTemplate.Triggers></ControlTemplate></Setter.Value></Setter></Style></ResourceDictionary>

2）Styles.TreeView.xaml 代码如下；

<WrapPanel Margin="0,10"><TreeView ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=local:MainView}}"><TreeView.ItemTemplate><HierarchicalDataTemplate ItemsSource="{Binding Children}"><Border><TextBlock Text="{Binding Path=Name}"/></Border></HierarchicalDataTemplate></TreeView.ItemTemplate></TreeView><TreeView IsEnabled="False" Margin="10,0" BorderThickness="0"ItemsSource="{Binding UserCollection,RelativeSource={RelativeSource AncestorType=local:MainView}}"><TreeView.ItemTemplate><HierarchicalDataTemplate ItemsSource="{Binding Children}"><Border><TextBlock Text="{Binding Path=Name}"/></Border></HierarchicalDataTemplate></TreeView.ItemTemplate></TreeView></WrapPanel>

Nuget^[1]Install-Package WPFDevelopers.Minimal