You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.22 08:41:53