Yuchen

外观

自定义TreeView控件

约 538 字大约 2 分钟

WPF

2024-02-07

注

需求自定义一个控件 需要做到左边切换右边，右边滚动联动左边

tree

实现

  • 左边使用 ItemsControl
<ItemsControl ItemsSource="{Binding CellItemsSource,RelativeSource={RelativeSource AncestorType=local:CellList}}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <RadioButton GroupName="LeftCellBtn" x:Name="LeftCellBtn" Click="LeftCellBtn_Click"
                                    Content="{Binding CellName}" df:ShareProperties.Source="{Binding Source}" df:ShareProperties.Total="{Binding Total}" Tag="{Binding}" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>
  • 右边使用 treeview
    • 开始使用的每个细胞类型一个 treeview 然后发现选中会有问题，每个都可以 treeview 都可以选中，使用失去焦点时 取消选中或让选中项背景色透明
    • 需求变更右边滚动时需要左边按钮联动，想法是通过计算每个 item 项的高度 来算出当前可见范围的第一个 item 项 来反选左边的按钮，那么再使用上面的方式就不好操作了,做成一整个的 treeview
    • treeview 的第一层只是展示 需要禁用他的展开收起效果，试了通过控制模板属性来实现都无效，最后通过禁用双击事件来实现，本身的双击实现无法实现这个效果，需要使用PreviewMouseDoubleClick触发前禁用
    • treeview 第一层也不要选中,用数据绑定要报错，可以多条件判断，把第一项的背景色直接设置跟背景一样的
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition SourceName="Expander" Property="Visibility" Value="Collapsed"/>
        <Condition Property="HasItems" Value="true"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" Value="#FF212630" TargetName="itemBackground"/>
</MultiTrigger>
- treeview不同层级需要显示不同的样式，可以使用数据触发器(`DataTrigger`)实现

<HierarchicalDataTemplate ItemsSource="{Binding Children,Mode=TwoWay}" >
	<StackPanel Height="70" x:Name="level1" Orientation="Horizontal"/>
	<StackPanel Height="70" x:Name="level2" Orientation="Horizontal"/>
	<StackPanel Height="70" x:Name="level3" Orientation="Horizontal"/>
	<HierarchicalDataTemplate.Triggers>
	    <DataTrigger Binding="{Binding Level}" Value="1">
	        <Setter TargetName="level1" Property="Visibility" Value="Visible" />
	        <Setter TargetName="level2" Property="Visibility" Value="Collapsed" />
	        <Setter TargetName="level3" Property="Visibility" Value="Collapsed" />
	    </DataTrigger>
	    <DataTrigger Binding="{Binding Level}" Value="2">
	        <Setter TargetName="level2" Property="Visibility" Value="Visible" />
	        <Setter TargetName="level1" Property="Visibility" Value="Collapsed" />
	        <Setter TargetName="level3" Property="Visibility" Value="Collapsed" />
	    </DataTrigger>
	    <DataTrigger Binding="{Binding Level}" Value="3">
	        <Setter TargetName="level3" Property="Visibility" Value="Visible" />
	        <Setter TargetName="level1" Property="Visibility" Value="Collapsed" />
	        <Setter TargetName="level2" Property="Visibility" Value="Collapsed" />
	    </DataTrigger>
	</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>

tree1