WPF效果第一百八十五篇之又玩TreeView

Posted 2022-05-30 dotNET跨平台

最近又有新的开发任务了,然后我提前瞄了一眼需要实现的效果;发现其中一个和我去年玩耍的有点类似;正好好久也没玩了,那就趁着这个机会再次学习一下;闲话也不多扯了,上效果:

2、来看看我的实现方式:

3、①是一个分组的数据模板

<HierarchicalDataTemplate x:Key="GroupDataTemplate" DataType="x:Type Nodes:TreeModel"
                              ItemsSource="Binding Children,Mode=TwoWay">
    <WrapPanel Margin="8,0,0,0">
        <Path Data="Binding NodeType,Converter=StaticResource NodeTypeEnumToPathConverter"
                  Stretch="Uniform" Fill="White" x:Name="IcoPath"
                  Width="Binding NodeType,Converter=StaticResource NodeTypeEnumToPathSizeConverter"
                  Height="Binding NodeType,Converter=StaticResource NodeTypeEnumToPathSizeConverter"/>
        <Grid>
            <TextBlock x:Name="ShowTbk" Margin="4,0,0,0" Text="Binding Name,Mode=TwoWay" Foreground="White"
                               FontSize="16"/>
        </Grid>
    </WrapPanel>
    <HierarchicalDataTemplate.Triggers>
        <MultiDataTrigger>
            <MultiDataTrigger.Conditions>
                <Condition Binding="Binding IsSelected, RelativeSource=RelativeSource FindAncestor, AncestorType=x:Type TreeViewItem"
                                   Value="True"/>
            </MultiDataTrigger.Conditions>
            <Setter TargetName="IcoPath" Property="Fill" Value="#1DF340" />
            <Setter TargetName="ShowTbk" Property="Foreground" Value="#1DF340" />
        </MultiDataTrigger>
    </HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>

4、②和③是另一个数据模板

<HierarchicalDataTemplate x:Key="ExpanderNodeDataTemplate" DataType="x:Type Nodes:TreeModel"
                              ItemsSource="Binding Children,Mode=TwoWay">
    <Expander Header="Binding Name" Style="DynamicResource ExpanderStyle1">
        <WrapPanel Margin="30,8,0,0" Orientation="Vertical">
            <TextBlock Text="Binding Processors.Type,Mode=TwoWay" Foreground="White" FontSize="14"/>
            <TextBlock Margin="0,4,0,0" Text="Binding Processors.IP,Mode=TwoWay" Foreground="White" FontSize="14"/>
            <TextBlock Margin="0,4,0,0" Text="Binding Processors.ID,Mode=TwoWay" Foreground="White" FontSize="14"/>
        </WrapPanel>
    </Expander>
</HierarchicalDataTemplate>

5、Expander模板自己玩吧,数据模板选择器:

public class TreeViewItemTemplateSelector: DataTemplateSelector
 
     public override DataTemplate SelectTemplate(object item, DependencyObject container)
     
         var fe = container as FrameworkElement;
         var treeModel = item as TreeModel;
         DataTemplate dt = null;
         if(treeModel != null && fe != null)
         
             var nodeType = treeModel.NodeType;
             //组
             if(nodeType == NodeTypeEnum.Group)
             
                 dt = fe.FindResource("GroupDataTemplate") as DataTemplate;
             
             //节点
             else
             
                 dt = fe.FindResource("ExpanderNodeDataTemplate") as DataTemplate;
             
         
         return dt;
     
 

6、前台ItemTemplateSelector：

<Setter Property="ItemTemplateSelector"  Value="StaticResource TreeViewItemTemplateSelector"/>

最终简单的效果先这样吧;以后有时间的话,可以再去摸索一下更复杂的效果;编程不息、Bug不止、无Bug、无生活;改bug的冷静、编码的激情、完成后的喜悦、挖坑的激动 、填坑的兴奋;这也许就是屌丝程序员的乐趣吧;今天就到这里吧;希望自己有动力一步一步坚持下去;生命不息,代码不止;大家抽空可以看看今天分享的效果,有好的意见和想法,可以在留言板随意留言;我看到后会第一时间回复大家,多谢大家的一直默默的关注和支持!如果觉得不错,那就伸出您的小手点个赞并关注一下,多谢您的支持！

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系