自定义WPF TreeSelect，Combox+TreeView

最新推荐文章于 2025-07-03 21:44:44 发布

逸风Y

最新推荐文章于 2025-07-03 21:44:44 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： WPF 控件文章标签： WPF TreeSelect TreeView Combox 树形选择框

本文链接：https://blog.youkuaiyun.com/Johnson55925/article/details/85988891

WPF 控件专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种统一WPF应用程序中TreeSelect和MultiTreeSelect控件样式的方案，包括鼠标悬浮、选中样式、滚动条样式、BorderColor配置、Popup宽度自适应等功能。提供了详细的XAML样式代码和调用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1.功能

1.1 实现功能

效果：
在这里插入图片描述

1、对其中鼠标悬浮、选中的样式进行统一
2、对其中滚动条样式进行全局统一配置
3、对控件的Border Color 进行全局统一配置
4、绑定数据时设置已选中项
5、Popup 宽度根据内容自适应
6、MultiTreeSelect 可设置已选中项展示样式（横向/纵向）

2 TreeSelect

2.1 控件代码

XAML 样式

 <ComboBox.Style>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="Width" Value="200" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="MaxDropDownHeight" Value="200" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <Border SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"  Width="{TemplateBinding Width}" 
                                    Height="{TemplateBinding Height}" BorderBrush="{StaticResource DefaultBrush}" BorderThickness="1">
                                <Grid x:Name="PART_Root">
                                    <Grid x:Name="PART_InnerGrid" Margin="0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="0.3*" MaxWidth="30" />
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Margin="5 5 0 0 " Text="{Binding Path=DisplayText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}"></TextBlock>
                                        <ToggleButton x:Name="PART_DropDownToggle" IsTabStop="False"  
                                         IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                         Grid.Column="1" Template="{StaticResource ComboBoxToggleButton}" />
                                    </Grid>
                                </Grid>
                            </Border>
                            <Popup AllowsTransparency="True"  Focusable="False" StaysOpen="False"
                               IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                <Grid MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}" MinHeight="100" MaxHeight="{Binding MaxDropDownHeight, RelativeSource={RelativeSource TemplatedParent}}" >
                                    <local:TreeView x:Name="tvItems" Margin="0" SelectedItemChanged="tvItems_SelectedItemChanged" 
                                                    BorderBrush="{StaticResource DefaultBrush}"
                                                    BorderThickness="1" Padding="0 0 12 0" 
                                                    IsExpandedAll="{Binding IsExpandedAll,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                                    ItemsSource="{Binding Path=ItemsSource, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}">
                                        <TreeView.ItemTemplate>
                                            <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                                                <StackPanel MinHeight="25" Orientation="Horizontal" Background="Transparent" HorizontalAlignment="Left" >
                                                    <TextBlock Text="{Binding Text}" Margin="3 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                                                </StackPanel>
                                            </HierarchicalDataTemplate>
                                        </TreeView.ItemTemplate>
                                    </local:TreeView>
                                </Grid>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.Style>

2.2 调用代码

页面控件调用

<fcode:TreeSelect x:Name="tsTest" Width="200" MinHeight="30" IsExpandedAll="False"></fcode:TreeSelect>

后台代码

tsTest.ItemsSource = new ObservableCollection<TreeSelectItem>(tree);

3 MultiTreeSelect

3.1 控件代码

XAML 样式

<ComboBox.Style>
        <Style TargetType="{x:Type ComboBox}">
            <Setter Property="Width" Value="200" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="SnapsToDevicePixels" Value="True" />
            <Setter Property="MaxDropDownHeight" Value="200" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ComboBox}">
                        <Grid>
                            <Border x:Name="Bg" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="{StaticResource DefaultBrush}" BorderThickness="1"  >
                                <Grid x:Name="PART_Root">
                                    <Grid x:Name="PART_InnerGrid" Margin="0">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="0.3*" MaxWidth="30" />
                                        </Grid.ColumnDefinitions>
                                        <ListBox x:Name="lvSelected" ItemsSource="{Binding Path=SelectedArray, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}" SelectionMode="Multiple" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                            <ListBox.ItemsPanel>
                                                <ItemsPanelTemplate>
                                                    <VirtualizingStackPanel Orientation="{Binding Path=SelectedOrientation, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}" VirtualizingStackPanel.IsVirtualizing="True" />
                                                </ItemsPanelTemplate>
                                            </ListBox.ItemsPanel>
                                            <ListBox.ItemContainerStyle>
                                                <Style TargetType="ListBoxItem">
                                                    <Setter Property="BorderThickness" Value="0"/>
                                                    <Setter Property="IsSelected" Value="True"/>
                                                    <Setter Property="Template">
                                                        <Setter.Value>
                                                            <ControlTemplate TargetType="ListBoxItem">
                                                                <TextBlock Padding="0 5 0 0">
                                                                    <CheckBox BorderThickness="0" Click="chbRemove_Click" VerticalAlignment="Center" HorizontalAlignment="Center" 
                                                                              IsChecked="{Binding IsChecked}" Content="{Binding Text}" >
                                                                    </CheckBox>
                                                                </TextBlock>
                                                            </ControlTemplate>
                                                        </Setter.Value>
                                                    </Setter>
                                                </Style>
                                            </ListBox.ItemContainerStyle>
                                        </ListBox>

                                        <!--下拉按钮-->
                                        <ToggleButton x:Name="PART_DropDownToggle" IsTabStop="False"  
                                         IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
                                         Grid.Column="1" Template="{StaticResource ComboBoxToggleButton}" />
                                    </Grid>
                                </Grid>
                            </Border>
                            <!--弹出多选列表-->
                            <Popup x:Name="PART_Popup" AllowsTransparency="True"  Focusable="False" StaysOpen="False"
                               IsOpen="{Binding IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}"
                               PopupAnimation="{DynamicResource {x:Static SystemParameters.ComboBoxPopupAnimationKey}}" Placement="Bottom">
                                <Grid MinWidth="{Binding ActualWidth, RelativeSource={RelativeSource TemplatedParent}}" MinHeight="100" 
                                      MaxHeight="{Binding MaxDropDownHeight, RelativeSource={RelativeSource TemplatedParent}}" >
                                    <local:TreeView x:Name="tvItems" Margin="0" BorderBrush="{StaticResource DefaultBrush}" 
                                                    BorderThickness="1" IsMultiChecked="True" Padding="0 0 12 0"
                                                    IsExpandedAll="{Binding IsExpandedAll,Mode=TwoWay,RelativeSource={RelativeSource TemplatedParent}}"
                                                    ItemsSource="{Binding Path=ItemsSource, Mode=TwoWay, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ComboBox}}">
                                        <TreeView.ItemTemplate>
                                            <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                                                <StackPanel MinHeight="25" Orientation="Horizontal" Background="Transparent" HorizontalAlignment="Left" >
                                                    <CheckBox Margin="3 0" VerticalAlignment="Center" HorizontalAlignment="Left"
                                                              IsChecked="{Binding IsChecked,Mode=TwoWay}" 
                                                              IsEnabled="{Binding IsEnabled}"
                                                              Content="{Binding Text}"
                                                              Click="CheckBox_Click">
                                                    </CheckBox>
                                                </StackPanel>
                                            </HierarchicalDataTemplate>
                                        </TreeView.ItemTemplate>
                                    </local:TreeView>
                                </Grid>
                            </Popup>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ComboBox.Style>

3.2 调用代码

页面控件调用

<fcode:MultiTreeSelect x:Name="mtsTest" Width="200" IsExpandedAll="True"  MinHeight="30"></fcode:MultiTreeSelect>

后台代码

mtsTest.SetSource(new ObservableCollection<TreeSelectItem>(tree));

本文代码资源已上传：
https://download.youkuaiyun.com/download/johnson55925/10900504

项目开源地址：
https://gitee.com/fcode_me/FCODE_DEMO