WPF新手求助:如何为两个TreeView分别应用不同样式?
给两个对比用的TreeView设置不同样式的几种方法
当然可以实现啦!作为WPF新手,我给你推荐几种简单易上手的方案,你可以根据自己的需求选择:
1. 内联直接定义Style(最直观,适合快速测试)
直接在每个TreeView内部写专属的Style,不用额外管理资源字典,一眼就能看到每个控件的样式:
<!-- 第一个TreeView:蓝色系样式 --> <TreeView x:Name="Source1PermissionTreeView" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="630" Width="890"> <TreeView.Style> <Style TargetType="TreeView"> <Setter Property="Background" Value="#F0F8FF"/> <!-- 淡蓝色背景 --> <Setter Property="BorderBrush" Value="#4169E1"/> <!-- 蓝色边框 --> <Setter Property="BorderThickness" Value="2"/> </Style> </TreeView.Style> <TreeView.Resources> <DataTemplate DataType="{x:Type entities:SharePointUser}"> <DockPanel> <CheckBox /> <Image Source="E:\S..."/> <!-- 你的其他子项内容 --> </DockPanel> </DataTemplate> </TreeView.Resources> </TreeView> <!-- 第二个TreeView:红色系样式 --> <TreeView x:Name="Source2PermissionTreeView" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="630" Width="890"> <TreeView.Style> <Style TargetType="TreeView"> <Setter Property="Background" Value="#FFF5EE"/> <!-- 淡红色背景 --> <Setter Property="BorderBrush" Value="#CD5C5C"/> <!-- 红色边框 --> <Setter Property="BorderThickness" Value="2"/> </Style> </TreeView.Style> <TreeView.Resources> <DataTemplate DataType="{x:Type entities:SharePointUser}"> <DockPanel> <CheckBox /> <Image Source="E:\S..."/> <!-- 你的其他子项内容 --> </DockPanel> </DataTemplate> </TreeView.Resources> </TreeView>
2. 用x:Key定义可复用的Style(适合后期维护)
如果以后需要修改样式,把样式统一放在Window/UserControl的资源里,用x:Key标记,然后在TreeView里引用,改一次就能生效:
<!-- 先在窗口/用户控件的资源里定义两个样式 --> <Window.Resources> <!-- 第一个TreeView的专属样式 --> <Style x:Key="Source1TreeViewStyle" TargetType="TreeView"> <Setter Property="Background" Value="#F0F8FF"/> <Setter Property="BorderBrush" Value="#4169E1"/> <Setter Property="BorderThickness" Value="2"/> <!-- 还可以给TreeViewItem加样式,比如鼠标悬停效果 --> <Setter Property="ItemContainerStyle"> <Style TargetType="TreeViewItem"> <Setter Property="Foreground" Value="#2F4F4F"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#B0C4DE"/> </Trigger> </Style.Triggers> </Style> </Setter> </Style> <!-- 第二个TreeView的专属样式 --> <Style x:Key="Source2TreeViewStyle" TargetType="TreeView"> <Setter Property="Background" Value="#FFF5EE"/> <Setter Property="BorderBrush" Value="#CD5C5C"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="ItemContainerStyle"> <Style TargetType="TreeViewItem"> <Setter Property="Foreground" Value="#8B4513"/> <Style.Triggers> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="#F08080"/> </Trigger> </Style.Triggers> </Style> </Setter> </Style> </Window.Resources> <!-- 引用样式到TreeView --> <TreeView x:Name="Source1PermissionTreeView" Style="{StaticResource Source1TreeViewStyle}" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="630" Width="890"> <!-- 你的TreeView资源和内容 --> </TreeView> <TreeView x:Name="Source2PermissionTreeView" Style="{StaticResource Source2TreeViewStyle}" ScrollViewer.VerticalScrollBarVisibility="Visible" Height="630" Width="890"> <!-- 你的TreeView资源和内容 --> </TreeView>
3. 给子项DataTemplate也设置不同样式(如果需要)
如果连TreeView里的子项(比如你的SharePointUser)也想显示不同效果,同样可以给每个TreeView单独定义DataTemplate:
<TreeView x:Name="Source1PermissionTreeView" ...> <TreeView.Resources> <DataTemplate DataType="{x:Type entities:SharePointUser}"> <DockPanel> <CheckBox Foreground="#4169E1"/> <!-- 蓝色复选框 --> <Image Source="E:\S..." Width="20"/> <TextBlock Text="{Binding Name}" Margin="5,0"/> </DockPanel> </DataTemplate> </TreeView.Resources> </TreeView> <TreeView x:Name="Source2PermissionTreeView" ...> <TreeView.Resources> <DataTemplate DataType="{x:Type entities:SharePointUser}"> <DockPanel> <CheckBox Foreground="#CD5C5C"/> <!-- 红色复选框 --> <Image Source="E:\S..." Width="24"/> <TextBlock Text="{Binding Name}" Margin="5,0" FontWeight="Bold"/> <!-- 加粗文字 --> </DockPanel> </DataTemplate> </TreeView.Resources> </TreeView>
新手建议先从第一种方法开始尝试,直观且容易调试,熟悉WPF样式系统后再用第二种方法来提升代码的可维护性~
内容的提问来源于stack exchange,提问作者Sanjay Ranavaya
相关产品推荐
相关产品推荐

