WPF 基础控件之 TreeView 样式

最新推荐文章于 2024-04-01 19:17:30 发布
最新推荐文章于 2024-04-01 19:17:30 发布
阅读量1.7k 收藏 4
点赞数
文章标签： html vue gwt web javascript
原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654090864&idx=4&sn=b2a913ee7d1ac778bf3e99517945da13&chksm=80d81225b7af9b33af5971c308efd3967b66607101eab85a0cb77cb1d5a7fdc8501b75cc6091&scene=126&&sessionid=0
版权

其他基础控件

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  实现下面的效果

3265739a73e5a32c1daf9f9a30d4c79c.png

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

d5c466878465590a27df2617e88674c4.gif

[2][3]

参考资料

[1]

Nuget: https://www.nuget.org/packages/WPFDevelopers.Minimal/

[2]

GitHub: https://github.com/WPFDevelopersOrg

[3]

Gitee: https://gitee.com/WPFDevelopersOrg

dotNET跨平台
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WPF自定义TreeViewItem 样式
10-30
WPF 自定义TreeViewItem的样式 CSDN 博客中有界面展示 http://blog.csdn.net/lvguoshan/article/details/40624961
WPF自定义TreeView控件样式实现QQ联系人列表效果
08-27
TreeView控件在项目中使用比较频繁，下面这篇文章主要给大家介绍了关于WPF自定义TreeView控件样式实现QQ联系人列表效果的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
WPF —— TreeView树形控件
最新发布
lu2023_8_6的博客
04-01 794
TreeView 表示一个控件，该控件在树结构（其中的项可以展开和折叠）中显示分层数据。TreeView 是一个 ItemsControl，这意味着它可以包含任何类型的对象的集合 (，例如字符串、图像或面板)。
WPF TreeView控件的图树自定义布局样式
04-08
显示如何使用WPF TreeView控件绘制带有连接线的图形样式层次结构。
WPF控件样式Demo
01-09
平时工作中整理的常用控件样式。 提供 Windows、Button、SwitchButton、ComboBox、DatePicker、ProgressBar、Loading、MessageBox、ListBox、DataGrid、TreeView、DocumentPrint、TabControl、GroupControl等控件的扩展封装以及样式。
WPF TreeView控件样式
03-28
自定义 TreeView控件样式（自定义节点样式大小、形状）。
WPF 自定义TreeView控件样式，仿QQ联系人列表
weixin_53370274的博客
12-15 1532
根据思路，我们需要设置三个样式，TreeView样式，TreeViewItem样式，HierarchicalDataTemplate分层模板样式。像这种联系人列表一般涉及到多层级数据，而且有很多数据是需要动态更新的，如果通过手动一条条增加数据反而更复杂，而且不方便。默认的TreeView控件四周会有边距，因此需要设置下TreeView的样式。另外鼠标经过和鼠标选中的背景色需要变化，因此还需要设置TreeViewItem的样式。分层模板中存在两种样式，一种是分组样式，一种是人员样式。
WPF TreeView 控件样式
腻害
03-08 1509
TreeView 树视图（TreeView）控件以树的方式显示集合，可以显示层次关系。 Nodes属性 该属性用于设计TreeView控件的节点。 具体方法 在TreeView的属性栏找到Nodes，点击 …，弹出“TreeNode编辑器”窗口。 “添加根”按钮可以为TreeView控件添加根结点，添加根结点后，“添加子级”按钮变为可用。 ImageList属性 用于设置从中获取图像的ImageList控件，该属性的设置必须与ImageList控件相配合。 Scrollable属性 用于指示当TreeVie
WPF TreeView自定义可视化树样式
热门推荐
qq_20758141的博客
05-27 2万+
目前项目中效果（没上传，需要的留言）   以下例子 最终效果： TreeView 折叠箭头，带垂直方向、水平方向层级线条（如图） 来看看怎么一步步实现吧~ 补充一点，代码本地试过，现剪切的所以可能部分运行显示与截图不完全一样， 但基本结构是没有问题的，可以自己修改内容试试看！~   先做一个基础点的样式（图左侧） （右侧是打印出来节点生成顺序，具体输出含义看本页的【转换器...
WPF自定义TreeView滚动条样式
忧郁的蛋的专栏
09-29 328
根据客户需求，要在TreeView目录树上显示10万+个节点，但是目录树显示10万加节点后，整个页面操作起来非常卡，所以给目录树增加了虚拟化设置。但是虚拟化设置一直没生效，后来经过排查发现是使用的自定义滚动条导致了虚拟化设置没有生效，后来自己写了一个滚动条样式，问题解决了。以下的滚动条样式，是通过原生的滚动条模板样式基础上进行简单修改的，增加了一些注释。目录树虚拟化设置属性。
WPF树控件自定义样式
zh_98的博客
03-20 896
<!--树控件样式--> <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z" /> <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"> <Sett...
TreeView样式
weixin_30457881的博客
11-06 375
TreeView有一个细化的样式模型，允许你完全控制TreeView的外观。每个样式作用于一种结点。样式由TreeNodeStyle类表示，它继承自更常规的Style类。 和其他富控件一样，通过样式你可以设置前景色和背景色、字体和边框。此外，TreeNodeStyle类加入了表17-10所列的特定结点的样式属性。这些属性处理结点图片以及结点间的间距。 表17-10　添加的Tre...
【转】WPF自定义控件与样式(9)-树控件TreeView与菜单Menu-ContextMenu
weixin_33962923的博客
12-19 1171
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等。 　　本文主要内容： 菜单Menu的自定义样式； 右键菜单ContextMenu的自定义样式； 树控件TreeView的自定义样式，及右键菜单实现。 二．菜单Menu的自定义样式 　　自定义菜单样式的效果图： 　　Menu和ContextMenu样式本身很简单，他们最主要的部分...
WPF 自定义TreeViewItem样式
姑爷一典型的专栏
10-30 2万+
首先自定义样式的目的是觉得
新手入门WPF之TreeView控件（一）
weixin_45650894的博客
01-15 8352
WPF中TreeView实现
WPF 控件专题 TreeView控件详解
^@^lemon tea^@^
11-21 6103
WPF 控件专题 TreeView控件详解
自定义TreeView样式
~忘记了时间~
07-07 852
1：重定义TreeView的数据模板（HierarchicalDataTemplate） —— 能够帮助层级控件显示层级数据的模板是HierarchicalDataTemplate 2：重定义TreeViewItem的样式模板，绑定对应的数据内容（可根据自身数据需求处理） 3：模板中定义事件监控折叠开关，通过事件调整不同展示状态下的效果功能......
wpf TreeView样式默认展开所有节点
钟一白的博客
06-28 2475
wpf
wpf的treeview漂亮的样式源码
11-03
WPF的TreeView是一种用于显示分层数据的控件，可以方便地展示树形结构的数据。要实现漂亮的样式，可以使用WPF中提供的样式和模板技术来自定义TreeView的外观。 首先，我们可以通过修改TreeViewItem的样式来改变每个节点的外观。可以使用Visual Studio自带的样式编辑器来创建一个基本的TreeViewItem样式，然后根据需求进行修改。可以设置节点鼠标悬停、选择状态下的颜色和字体样式等。为每个TreeViewItem设置不同的样式，可以根据数据的不同层级或者类型来区分外观。 其次，我们可以使用模板技术来改变TreeView的整体外观。可以为TreeView设置一个自定义的控件模板，通过修改模板中的各个部分来改变整个TreeView的样式。可以自定义每个节点的图标、缩进、展开和折叠的按钮的样式等等。 最后，除了修改TreeViewItem和TreeView的样式，我们还可以在TreeView中添加额外的控件，来增加或改变TreeView的特定功能。例如，可以为每个节点添加右键菜单、复选框等等。 总的来说，要实现漂亮的样式，我们可以通过修改TreeViewItem样式、控件模板以及添加额外的控件，来自定义TreeView的外观。使用WPF强大的样式和模板技术，可以满足各种需求，创建出漂亮而功能丰富的TreeView样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值