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.csdn.net/download/johnson55925/10900504
项目开源地址:
https://gitee.com/fcode_me/FCODE_DEMO