如何合并自定义TreeViewItem样式与皮肤？实现可换肤自定义TreeViewItem

我帮你梳理下在多文件多资源字典场景下，实现自定义TreeViewItem换肤的具体方案，亲测好用：

1. 拆分资源字典结构 #

核心思路是把基础布局逻辑和主题样式资源分开，避免耦合：

• 创建TreeViewItemBaseStyle.xaml：只存放TreeViewItem的模板结构、触发器逻辑这类和主题无关的内容，所有颜色、边框粗细这类主题属性用DynamicResource占位。
• 为每个主题创建单独的资源字典，比如TreeViewItemDarkTheme.xaml、TreeViewItemLightTheme.xaml：只定义主题相关的Brush、Color、Thickness等资源，并且合并基础样式字典。

2. 编写基础样式（TreeViewItemBaseStyle.xaml） #

这里的关键是所有主题相关属性都用DynamicResource绑定，确保换肤时能实时更新：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style x:Key="BaseTreeViewItemStyle" TargetType="TreeViewItem">
        <!-- 主题相关属性用DynamicResource占位 -->
        <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundBrush}"/>
        <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForegroundBrush}"/>
        <Setter Property="BorderBrush" Value="{DynamicResource TreeViewItemBorderBrush}"/>
        <Setter Property="BorderThickness" Value="{DynamicResource TreeViewItemBorderThickness}"/>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="TreeViewItem">
                    <!-- 你的自定义模板结构，所有主题资源都用DynamicResource -->
                    <Border x:Name="Bd"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ToggleButton x:Name="Expander"
                                          Style="{DynamicResource TreeViewItemExpanderStyle}"
                                          IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <ContentPresenter x:Name="PART_Header"
                                              Grid.Column="1"
                                              ContentSource="Header"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        </Grid>
                    </Border>
                    <!-- 触发器逻辑，比如选中、 hover状态的样式也用DynamicResource -->
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource TreeViewItemSelectedBackgroundBrush}"/>
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="Bd" Property="Background" Value="{DynamicResource TreeViewItemHoverBackgroundBrush}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

3. 编写主题资源字典（以深色主题为例） #

在主题字典里合并基础样式字典，并定义对应的主题资源：

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
    <!-- 合并基础样式字典，确保基础样式能被引用 -->
    <ResourceDictionary.MergedDictionaries>
        <ResourceDictionary Source="TreeViewItemBaseStyle.xaml"/>
    </ResourceDictionary.MergedDictionaries>

    <!-- 深色主题的具体资源定义 -->
    <SolidColorBrush x:Key="TreeViewItemBackgroundBrush" Color="#2D2D30"/>
    <SolidColorBrush x:Key="TreeViewItemForegroundBrush" Color="#F5F5F5"/>
    <SolidColorBrush x:Key="TreeViewItemBorderBrush" Color="#454545"/>
    <Thickness x:Key="TreeViewItemBorderThickness" Value="0 0 0 1"/>
    
    <SolidColorBrush x:Key="TreeViewItemSelectedBackgroundBrush" Color="#3E3E42"/>
    <SolidColorBrush x:Key="TreeViewItemHoverBackgroundBrush" Color="#333333"/>
    
    <!-- 扩展器的样式也可以在这里定义，同样用主题资源 -->
    <Style x:Key="TreeViewItemExpanderStyle" TargetType="ToggleButton">
        <!-- 扩展器的模板，颜色用主题资源 -->
    </Style>
</ResourceDictionary>

4. 主题切换逻辑 #

在代码中实现切换主题的方法，核心是替换Application资源中的主题字典：

private void SwitchToDarkTheme()
{
    UpdateTheme("Themes/TreeViewItemDarkTheme.xaml");
}

private void SwitchToLightTheme()
{
    UpdateTheme("Themes/TreeViewItemLightTheme.xaml");
}

private void UpdateTheme(string themeUri)
{
    // 先移除当前的TreeViewItem主题字典
    var existingTheme = Application.Current.Resources.MergedDictionaries
        .FirstOrDefault(d => d.Source?.OriginalString.Contains("TreeViewItem") == true);
    if (existingTheme != null)
    {
        Application.Current.Resources.MergedDictionaries.Remove(existingTheme);
    }

    // 添加新的主题字典
    var newThemeDict = new ResourceDictionary
    {
        Source = new Uri(themeUri, UriKind.Relative)
    };
    Application.Current.Resources.MergedDictionaries.Add(newThemeDict);
}

5. 在界面中引用样式 #

在需要使用自定义TreeViewItem的地方，直接引用基础样式的Key即可，因为主题字典已经合并了基础样式：

<TreeView>
    <TreeViewItem Style="{DynamicResource BaseTreeViewItemStyle}" Header="Group 1">
        <TreeViewItem Style="{DynamicResource BaseTreeViewItemStyle}" Header="Sub Item 1"/>
        <TreeViewItem Style="{DynamicResource BaseTreeViewItemStyle}" Header="Sub Item 2"/>
    </TreeViewItem>
</TreeView>

关键注意事项 #

• 所有主题相关的属性必须用DynamicResource，如果用StaticResource，换肤时不会实时更新。
• 资源字典的路径要确保正确，跨项目的话可以用pack URI（比如pack://application:,,,/YourAssemblyName;component/Themes/TreeViewItemDarkTheme.xaml）。
• 如果有多个控件需要换肤，可以把全局通用的主题资源（比如全局背景色）放到单独的全局主题字典里，让TreeViewItem的主题字典引用它，避免重复定义。

内容的提问来源于stack exchange，提问作者Ruben Bohnet