自定义TreeView数据模板

效果

在这里插入图片描述

自定义数据样式模板

<UserControl x:Class="TestApp.CustomUserControl.TreeViewTest"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:TestApp.CustomUserControl"
             mc:Ignorable="d" Name="My_UC">
	<UserControl.Resources>
		<Style TargetType="TreeViewItem">
			<Setter Property="IsExpanded" Value="True"/>
		</Style>
		
	</UserControl.Resources>
	<Grid x:Name="_ModuleList" VerticalAlignment="Top"
          Background="#ffffff"
          Height="{Binding ElementName=_My_UC,Path=ActualHeight}"
          Width="{Binding ElementName=_My_UC, Path=ActualWidth}">
		<ScrollViewer VerticalScrollBarVisibility="Visible" HorizontalScrollBarVisibility="Auto"
                  CanContentScroll="True" Template="{DynamicResource MyScrollViewer}">
			<TreeView Name="TView">
				<TreeView.ItemTemplate>
					<HierarchicalDataTemplate DataType="{x:Type local:CBbPropertyNodeItem}" ItemsSource="{Binding Path=Children}">
						<StackPanel x:Name="CBbPropertyNodeName" Tag="{Binding CBbFrameType}" Orientation="Horizontal"
									ContextMenu="{Binding m_contextMenu}">
							<Image VerticalAlignment="Center" Source="{Binding Icon}" Width="16" Height="16" Margin="0,0,2,2"/>
							<TextBlock x:Name="CBbPropertyNodeTName" VerticalAlignment="Center" Height="25" FontSize="12"
														Text="{Binding DisplayName}" />
						</StackPanel>
					</HierarchicalDataTemplate>
				</TreeView.ItemTemplate>
			</TreeView>
		</ScrollViewer>
	</Grid>
</UserControl>

CS

namespace TestApp.CustomUserControl
{
    /// <summary>
    /// TreeViewTest.xaml 的交互逻辑
    /// </summary>
    public partial class TreeViewTest : UserControl
    {
		public System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem> itemList { get; set; }
		public ContextMenu secondaryNodeMenus;
		public List<MenuItem> secondaryNodeMenuItems = new List<MenuItem>()
		{
			new MenuItem()
			{
				Name = "Update",
				Header = "Update",
			},
			new MenuItem()
			{
				Name = "Delete",
				Header = "Delete",
			}
		};
		public TreeViewTest()
        {
            InitializeComponent();

			secondaryNodeMenus = new ContextMenu()
			{
				ItemsSource = secondaryNodeMenuItems,
			};

			itemList = new System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem>();
			CBbPropertyNodeItem App1 = new CBbPropertyNodeItem()
			{
				NodeType = "App",
				DisplayName = "APP",
				ToolTip = "这是工程文件首相",
				Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
				Children =new System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem>()
				{ 
					new CBbPropertyNodeItem()
					{ 
						NodeType="Test1",
						DisplayName="Test1",
						ToolTip ="Test1",
						Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
						Children=new System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem>()
						{ 
							new CBbPropertyNodeItem()
							{
								NodeType="Test1_1",
								DisplayName="Test1_1",
								ToolTip ="Test1_1",
								Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
							    m_contextMenu = secondaryNodeMenus,
							}
						}
					},
					new CBbPropertyNodeItem()
					{
						NodeType="Test2",
						DisplayName="Test2",
						ToolTip ="Test2",
						Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
						Children=new System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem>()
						{
							new CBbPropertyNodeItem()
							{
								NodeType="Test2_1",
								DisplayName="Test2_1",
								ToolTip ="Test2_1",
								Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
								m_contextMenu = secondaryNodeMenus,
							}
						}
					},
					new CBbPropertyNodeItem()
					{
						NodeType="Test3",
						DisplayName="Test3",
						ToolTip ="Test3",
						Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
						Children=new System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem>()
						{
							new CBbPropertyNodeItem()
							{
								NodeType="Test3_1",
								DisplayName="Test3_1",
								ToolTip ="Test3_1",
								Icon = "pack://application:,,,/TestApp;component/Images/address-book-open.png",
							    m_contextMenu = secondaryNodeMenus,
							}
						}
					},
				}
			};
			itemList.Add(App1);
			this.TView.SetBinding(TreeView.ItemsSourceProperty, new Binding("itemList")
			{
				Source = this
			});
		}
    }
	public class CBbPropertyNodeItem 
	{
		public string Icon { get; set; }
		public string CBbFrameType { get; set; }
		public string DisplayName { get; set; }
		/// <summary>
		/// 节点类型
		/// </summary>
		public string NodeType { get; set; }
		public string ToolTip { get; set; }
		public System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem> Children { get; set; }
		private ContextMenu contextMenu;
		/// <summary>
		/// 右键菜单集合
		/// </summary>
		public ContextMenu m_contextMenu
		{
			get => contextMenu;
			set
			{
				contextMenu = value;
			}
		}
		public CBbPropertyNodeItem()
		{
			Children = new System.Collections.ObjectModel.ObservableCollection<CBbPropertyNodeItem>();
		}
	}
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值