WPF Telerik TreeListView样式设计

最新推荐文章于 2023-12-26 17:47:58 发布
最新推荐文章于 2023-12-26 17:47:58 发布
阅读量523 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/618869
版权

Telerik控件 TreeListView

修改其中样式

1、添加TreeListView控件

        <telerik:RadTreeView x:Name="ObjecTreeView" Padding="0,5,0.5,5" Grid.Row="1" BorderThickness="0" ScrollViewer.HorizontalScrollBarVisibility="Disabled"
telerik:StyleManager.Theme="Windows8" SelectionMode="Single" Background="White" SelectionChanged="ObjecTreeView_OnSelectionChanged"
SelectedValuePath="DisplayName" AutoScrollToSelectedItem="True" IsExpandOnSingleClickEnabled="True" FocusVisualStyle="{x:Null}" >
            <telerik:RadTreeView.ItemTemplateSelector>
                <styleSelector:ObjectTreeTemplateSelector ItemTemplate="{StaticResource ObjectItemTemplate}" 
TreeItemTemplate="{StaticResource ObjectTreeTemplate}"></styleSelector:ObjectTreeTemplateSelector>
            </telerik:RadTreeView.ItemTemplateSelector>
        </telerik:RadTreeView>
View Code

通过模板选择器，选择相应的模板

2、模板

1）级联模板

    <!--对象树母模板-->
    <HierarchicalDataTemplate x:Key="ObjectTreeTemplate"
ItemsSource="{Binding ObjectTypeModels}"
ItemTemplate="{StaticResource ObjectItemTemplate}" ItemContainerStyle="{StaticResource RadTreeViewItemStyle1}">
        <StackPanel Orientation="Horizontal">
            <Image Source="..\..\Images\操作图标\内容\文件夹.png" VerticalAlignment="Center" Height="14" Margin="0,0,5,0"/>
            <CheckBox x:Name="MotherCheckBox" Visibility="{Binding CheckBoxVisibility,Mode=TwoWay}"
IsChecked="{Binding IsChecked,Mode=TwoWay}" Click="ButtonBase_OnClick"></CheckBox>
            <TextBlock Text="{Binding DisplayName,Mode=TwoWay}" Margin="5,0,0,0" />
        </StackPanel>
    </HierarchicalDataTemplate>
View Code

2）子模板

    <!--对象树子模板-->
    <DataTemplate x:Key="ObjectItemTemplate">
        <ContentControl Content="{Binding}">
            <ContentControl.Style>
                <Style TargetType="ContentControl">
                    <Setter Property="ContentTemplate" Value="{StaticResource ObjectItemTemplateNoSelect}"></Setter>
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type telerik:RadTreeViewItem}}, Path=IsSelected}" Value="true">
                            <Setter Property="ContentTemplate" Value="{StaticResource ObjectItemTemplateSelected}"></Setter>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </ContentControl.Style>
        </ContentControl>
    </DataTemplate>
View Code

选中样式

    <!--对象树选中状态子模板-->
    <DataTemplate x:Key="ObjectItemTemplateSelected">
        <StackPanel Orientation="Horizontal">
            <Image Source="..\..\Images\操作图标\内容\文件_Click.png" VerticalAlignment="Center" Height="14" Margin="0,0,5,0"/>
            <CheckBox x:Name="ChildCheckBox" Visibility="{Binding CheckBoxVisibility,Mode=TwoWay}" IsChecked="{Binding IsChecked,Mode=TwoWay}"></CheckBox>
            <TextBlock Text="{Binding DisplayName,Mode=TwoWay}" Foreground="#FFB83838" FontWeight="Black" Margin="5,0,0,0"/>
        </StackPanel>
    </DataTemplate>
View Code

未选中样式

    <!--对象树未选中状态子模板-->
    <DataTemplate x:Key="ObjectItemTemplateNoSelect">
        <StackPanel Orientation="Horizontal">
            <Image Source="..\..\Images\操作图标\内容\文件.png" VerticalAlignment="Center" Height="14" Margin="0,0,5,0"/>
            <CheckBox x:Name="ChildCheckBox" Visibility="{Binding CheckBoxVisibility,Mode=TwoWay}" IsChecked="{Binding IsChecked,Mode=TwoWay}"></CheckBox>
            <TextBlock Text="{Binding DisplayName,Mode=TwoWay}" Margin="5,0,0,0" />
        </StackPanel>
    </DataTemplate>
View Code

2、TreeListView的样式，设置子项的容器、焦点样式等。

    <!--模板的样式-->
    <Style x:Key="RadTreeViewItemStyle1" TargetType="{x:Type telerik:RadTreeViewItem}">
        <Setter Property="FocusVisualStyle">
            <Setter.Value>
                <Style>
                    <Setter Property="Control.Template">
                        <Setter.Value>
                            <ControlTemplate>
                                <Rectangle Margin="0" Stroke="Transparent" StrokeThickness="0"/>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Padding" Value="1,0,5,0"/>
        <Setter Property="IsDropAllowed" Value="True"/>
        <Setter Property="IsEnabled" Value="True"/>
        <Setter Property="MinHeight" Value="24"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadTreeViewItem}">
                    <Grid x:Name="RootElement">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid x:Name="HeaderRow" Background="Transparent" MinHeight="{TemplateBinding MinHeight}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="2"/>
                            <Border x:Name="MouseOverVisual" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Opacity="0">
                                <Border BorderBrush="White" BorderThickness="0" CornerRadius="0" Background="Transparent">
                                </Border>
                            </Border>
                            <Border x:Name="SelectionUnfocusedVisual" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                <Border BorderBrush="Transparent" BorderThickness="0" CornerRadius="0" Background="LightGray">
                                </Border>
                            </Border>
                            <Border x:Name="SelectionVisual" BorderThickness="0" Grid.ColumnSpan="6" Grid.Column="2" CornerRadius="1" Visibility="Collapsed">
                                <Border BorderBrush="Transparent" BorderThickness="0" CornerRadius="0" Background="LightGray">
                                </Border>
                            </Border>
                            <StackPanel x:Name="IndentContainer" Orientation="Horizontal">
                                <Rectangle x:Name="IndentFirstVerticalLine" Stroke="#FFCCCCCC" Visibility="Collapsed" VerticalAlignment="Top" Width="1"/>
                            </StackPanel>
                            <Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="20">
                                <Rectangle x:Name="HorizontalLine" HorizontalAlignment="Right" Height="1" Stroke="#FFCCCCCC" VerticalAlignment="Center"/>
                                <Rectangle x:Name="VerticalLine" HorizontalAlignment="Center" Stroke="#FFCCCCCC" VerticalAlignment="Top" Width="1"/>
                                <ToggleButton x:Name="Expander" Background="{TemplateBinding Background}" IsTabStop="False"/>
                                <Grid x:Name="LoadingVisual" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Visibility="Collapsed" VerticalAlignment="Center">
                                    <Grid.RenderTransform>
                                        <TransformGroup>
                                            <RotateTransform Angle="0" CenterY="0.5" CenterX="0.5"/>
                                        </TransformGroup>
                                    </Grid.RenderTransform>
                                    <Path Data="M1,0A1,1,90,1,1,0,-1" Height="10" StrokeStartLineCap="Round" Stretch="Fill" Stroke="{TemplateBinding Foreground}" StrokeThickness="1" Width="10"/>
                                    <Path Data="M0,-1.1L0.1,-1 0,-0.9" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Height="4" Margin="5,-1.5,0,0" Stretch="Fill" StrokeThickness="1" VerticalAlignment="Top" Width="4"/>
                                </Grid>
                            </Grid>
                            <CheckBox x:Name="CheckBoxElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </CheckBox>
                            <RadioButton x:Name="RadioButtonElement" Grid.Column="2" IsTabStop="False" Margin="5,0,0,0" Visibility="Collapsed" VerticalAlignment="Center">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </RadioButton>
                            <Image x:Name="Image" Grid.Column="3" HorizontalAlignment="Center" MaxWidth="16" MaxHeight="16" Margin="2" VerticalAlignment="Center"/>
                            <Rectangle x:Name="FocusVisual" Grid.ColumnSpan="6" Grid.Column="2" IsHitTestVisible="False" RadiusY="3" RadiusX="3" Stroke="Black" StrokeThickness="0" StrokeDashArray="1 2" Visibility="Collapsed"/>
                            <Grid Grid.ColumnSpan="2" Grid.Column="4">
                                <ContentPresenter x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                <ContentPresenter x:Name="EditHeaderElement" ContentTemplate="{TemplateBinding HeaderEditTemplate}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            </Grid>
                        </Grid>
                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Visibility="Collapsed"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsInEditMode" Value="True">
                            <Setter Property="Visibility" TargetName="Header" Value="Collapsed"/>
                            <Setter Property="Visibility" TargetName="EditHeaderElement" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Visibility" TargetName="SelectionVisual" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsFocused" Value="True">
                            <Setter Property="Visibility" TargetName="FocusVisual" Value="Visible"/>
                        </Trigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsSelected" Value="True"/>
                                <Condition Property="IsSelectionActive" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Opacity" TargetName="SelectionVisual" Value="0"/>
                            <Setter Property="Visibility" TargetName="SelectionUnfocusedVisual" Value="Visible"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Opacity" TargetName="Header" Value="0.5"/>
                        </Trigger>
                        <Trigger Property="IsExpanded" Value="True">
                            <Setter Property="Visibility" TargetName="ItemsHost" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsLoadingOnDemand" Value="True">
                            <Trigger.EnterActions>
                                <BeginStoryboard x:Name="LoadingVisualTransform">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0:0:1" From="0" RepeatBehavior="Forever" To="359" Storyboard.TargetProperty="Angle" Storyboard.TargetName="LoadingVisualAngleTransform"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                            <Trigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="LoadingVisualTransform"/>
                            </Trigger.ExitActions>
                            <Setter Property="Visibility" TargetName="LoadingVisual" Value="Visible"/>
                            <Setter Property="Visibility" TargetName="Expander" Value="Collapsed"/>
                        </Trigger>
                        <Trigger Property="IsDragOver" Value="True">
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" SourceName="HeaderRow" Value="True">
                            <Setter Property="Opacity" TargetName="MouseOverVisual" Value="1"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <telerik:TreeViewPanel IsItemsHost="True" IsVisualCacheEnabled="False" VerticalAlignment="Bottom"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>
View Code

 

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须在文章页面给出原文连接，否则保留追究法律责任的权利。
weixin_33757911
关注
WPF TreeListView 20170722
07-22
之前发布的作废，这是从老外的源码转换过来，并进行了扩展： 1>添加了水平和垂直网格线 2>添加了MVVM 3>添加了UI虚拟化的支持 4>支持自动填充列和最小宽度列 5>可绑定到Datatable，从而进行编辑操作 6>可装载海量数据，单层数据超过1W，瞬间完成，50W数据的滚动不卡顿 7>集成到ComboBox中 8>有两个主题，一个有类似传统的有折叠连接线的主题，另一个是当下的。 个人比较喜欢有折叠连接线的，结构可以更清晰。 特别强调一点：在海量数据的情况下，如果虚拟化UI开启，在展开大量数据的情况下，执行滚动操作可能导致程序假死，原因不明，希望有人能找到原因，并能告知！另外对于系统自带的TreeView测试发现，如果展开第二层，该层数据量很大，拖放也很卡，但DataGrid却非常顺滑，怀疑微软对层次结构的UI虚拟化仍没做好。 另外就个人感觉在目前的电脑配置下，UI虚拟化可以显著提高数据的加载速度，但一旦数据已加载后，执行拖放操作时，顺滑程度远不于非虚拟化的情况，原因也很简单，只要内存还够用，UI已加载的拖放肯定比UI虚拟的拖放好。 这次针对之前的发布主要在于完全取消了虚拟化，因为虚拟化会导致在大数据下滚动的卡死，垂直网格线不随滚动条滚动等各种意外的问题。 另外与树有关的： WPF TreeView的横向排布风格20170722(带动画) http://download.csdn.net/detail/maiker/9907400 Email: wuyang26@live.cn
WPF TreeListView
07-10
这是从老外的源码转换过来，并进行了扩展： 1>添加了水平和垂直网格线 2>添加了MVVM 3>添加了UI虚拟化的支持 4>支持自动填充列和最小宽度列 5>可绑定到Datatable，从而进行编辑操作 6>可装载海量数据，单层数据超过1W，瞬间完成，50W数据的滚动不卡顿 7>集成到ComboBox中 Email: wuyang26@live.cn
WPF实现树形表格控件(TreeListView)
最新发布
u013319633的博客
12-26 1611
本文将探讨如何利用WPF框架实现树形表格控件，该控件不仅能够有效地展示复杂的层级数据，还能够提供丰富的个性化定制选项。我们将介绍如何使用WPF提供的控件、模板、布局、数据绑定等技术来构建这样一个树形表格。新建一个继承自TreeView的控件，并定义一个类型为ViewBase的View依赖属性，用于在代码中指定列。
Prism for WPF 搭建一个简单的模块化开发框架（三） 给TreeView加样式做成菜单
石头的专栏
08-17 2084
昨天晚上把TreeView的样式做了一下，今天给TreeView绑了数据，实现了切换页面功能 上代码把，样式代码 &lt;Style x:Key="MenuTreeViewItem" TargetType="{x:Type TreeViewItem}"&gt; &lt;Style.Triggers&gt; &lt;Trigger Pr...
WPF具有多选功能的TreeListView控件
10-24
综上所述，创建一个具有多选功能的WPF TreeListView控件涉及到对WPF的深入理解和实践，包括数据绑定、事件处理、样式定制以及MVVM模式的应用。这个实现可能通过优化这些方面，提供了优秀的用户体验，从而被称为...
Telerik_UI_for_WPF_2021_3_914_Dev.msi
10-02
Telerik Collection for .NET 2021 R3 Retail 开发版，无需破解
WPF控件TreeGrid/类似TreeListView
05-28
通过继承WPF控件Datagrid，设计具有展开折叠功能的TreeListView,相对于网上较为流行的使用GridView和TreeView组合实现的TreeListView，本控件纯粹使用Datagrid扩展,并具备编辑功能，完全支持MVVM操作，有点类似...
WPF TreeListView 20170714
07-14
之前发布的作废，这是从老外的源码转换过来，并进行了扩展： 1>添加了水平和垂直网格线 2>添加了MVVM 3>添加了UI虚拟化的支持 4>支持自动填充列和最小宽度列 5>可绑定到Datatable，从而进行编辑操作 6>可装载海量数据，单层数据超过1W，瞬间完成，50W数据的滚动不卡顿 7>集成到ComboBox中 8>有两个主题，一个有类似传统的有折叠连接线的主题，另一个是当下的。 个人比较喜欢有折叠连接线的，结构可以更清晰。 特别强调一点：在海量数据的情况下，如果虚拟化UI开启，在展开大量数据的情况下，执行滚动操作可能导致程序假死，原因不明，希望有人能找到原因，并能告知！另外对于系统自带的TreeView测试发现，如果展开第二层，该层数据量很大，拖放也很卡，但DataGrid却非常顺滑，怀疑微软对层次结构的UI虚拟化仍没做好。 另外就个人感觉在目前的电脑配置下，UI虚拟化可以显著提高数据的加载速度，但一旦数据已加载后，执行拖放操作时，顺滑程度远不于非虚拟化的情况，原因也很简单，只要内存还够用，UI已加载的拖放肯定比UI虚拟的拖放好。 Email: wuyang26@live.cn
WPF 中 TreeListView 的使用
weixin_30753873的博客
09-03 1121
　　前段时间在项目开发中需要用TreeListView 的功能，于是在网上狂搜一通，倒也找到了几个小例子，但还是满足不了我简单的要求，由于时间紧也只能折中凑合着用了。最近时间比较充裕，把其中的例子整理一下分享给大家。在文章最后部分还有一个没解决的问题，也希望得到牛人的指点，小弟不胜感激 O(∩_∩)O~ 　　文章中使用的是msdn提供的示例，源代码下载 -TreeListView.zip。...
WPF的TreeView带连接线样式[免费]
09-24
TreeView原始样式是不带连接的，本资源通过Style重写TreeViewItem样式，实现带连接线样式，这里提供源代码希望对各位有帮助。
treeListView
07-26
树形listview
WPF TreeView控件样式
03-28
自定义 TreeView控件样式（自定义节点样式大小、形状）。
WPF之TreeList的实现方法(一)
weixin_33716154的博客
09-06 938
做项目的时候根据需求，WPF现有的控件不能完全满足我们的需求， 很多时候我们需要对现有的控件做一下加工。 最简单的我们可能会把Tree转换成List形式有的叫Grid形式就像下图一样 今天我先做一个完全用样式加工的例子，有时间我再把它做深加工写成一下通能形式 我们要先把treeView重写一下 publicclassTreeListVi...
WPF笔记汇总之TreeView控件
Dahlin哥's 博客
09-17 958
紧接上一篇《WPF笔记汇总之ListView控件》，这篇主要总结WPF中最复杂的控件之一，TreeView控件，TreeView控件使你能够展示带有层级的数据，每一个数据由树中的一个节点代表。每一个节点可以拥有子节点，子节点也可以拥有自己的子节点。
DevExpress WPF Tree List组件，让数据可视化程度更高！（二）
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
08-02 1883
DevExpress WPF Tree List组件是一个功能齐全的数据可视化控件，欢迎下载最新版产品体验！
WPF界面开发必备技能！TreeListView - 如何快速更新多个项目属性
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
10-22 509
DevExpress广泛应用于ECM企业内容管理、 成本管控、进程监督、生产调度，在企业/政务信息化管理中占据一席重要之地。通过DevExpress WPF Controls，您能创建有着强大互动功能的XAML基础应用程序，这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件的衍伸产品，还是以数据为中心的商业智能产品，都能通过该控件来实现。 本文主要为...
TreeView样式自定义
diesi2328的博客
03-21 688
---恢复内容开始--- wpf自带的TreeView样式相对比较简单，为了设计符合自己设想中的样式，从头理了一下xmal的样式定义流程。 1、新建ResourceDictionary，便于对自定义样式资源分类、管理 2、编写样式TreeView.xmal <ResourceDictionary xmlns="http://schemas.microsoft....
wpf treelistview
11-20
WPF TreeListView 是一种用于在 WPF 应用程序中显示层次结构数据的控件。它结合了 TreeView 和 ListView 的特点，可以显示树状结构的数据，同时也可以展示每个节点的详细信息。 WPF TreeListView 具有灵活的数据绑定能力，可以轻松地将数据与 UI 控件进行关联。用户可以自定义每个节点的外观和行为，实现不同的界面效果。同时，它还支持对节点进行排序、筛选和搜索，帮助用户更方便地管理和浏览复杂的数据结构。 这个控件还提供了丰富的事件处理功能，用户可以针对节点的展开、折叠、选择等操作进行相应的处理。另外，WPF TreeListView 也支持虚拟化和异步加载，能够处理大量数据和复杂操作，保证应用程序的性能和用户体验。 总之，WPF TreeListView 是一个功能强大、灵活多样的控件，非常适合用于需要展示层次结构数据的 WPF 应用程序中。它不仅提供了丰富的功能和灵活的定制能力，还能够帮助用户更高效地组织和管理复杂的数据，是开发人员在设计界面时的一个有力工具。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值