Avalonia跨平台入门第三十三篇之TreeView

最新推荐文章于 2024-09-20 17:14:23 发布

dotNET跨平台

最新推荐文章于 2024-09-20 17:14:23 发布

阅读量241

点赞数

文章标签：服务器 linux 前端数据库运维

原文链接：https://mp.weixin.qq.com/s?__biz=MzAwNTMxMzg1MA==&mid=2654099238&idx=4&sn=7d1a88dfe040a3083c4f6e9ac30eb2fb&chksm=813309ab17b76ee06789223465ea93c2570bba8b4bce5e130aa5beaf529fad460ba327c974b1&scene=126&sessionid=0

版权

前面一篇分享了在DataGrid中玩耍多选下拉框;今天再来根据UI射击师的射击来玩耍一下TreeView,先来看看射击前和实现后:

1、本来想直接Expander+ListBox,想想还是选TreeView吧,毕竟后面如果再增加一个层级的话,直接在数据源增加一层数据就完事了;

2、TreeView的ControlTheme:

<ControlTheme x:Key="{x:Type TreeView}" TargetType="TreeView">
  <Setter Property="Foreground" Value="{DynamicResource TreeViewItemForeground}" />
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="BorderBrush" Value="Transparent" />
  <Setter Property="BorderThickness" Value="0" />
  <Setter Property="Padding" Value="0" />
  <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
  <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
  <Setter Property="ScrollViewer.IsScrollChainingEnabled" Value="True" />
  <Setter Property="ItemTemplate" Value="{StaticResource LedDataTemplate}"/>
  <Setter Property="ItemContainerTheme" Value="{StaticResource LedTreeViewItem}"/>
</ControlTheme>

3、TreeView的ItemTemplate:

<TreeDataTemplate  x:Key="LedDataTemplate" ItemsSource="{Binding SubNodes}">
  <WrapPanel Orientation="Horizontal">
    <Ellipse Width="10" Height="10"
         Fill="{Binding StatusType,Converter={StaticResource StatusTypeEnumToEllipseFillBrushConverter}}"/>
    <TextBlock x:Name="ShowTbk" Margin="10,0,0,0" Text="{Binding Title,Mode=TwoWay}"
           Foreground="{Binding Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type TreeViewItem}}}"
           FontSize="18"/>
  </WrapPanel>
</TreeDataTemplate>

4、关于TreeViewItem中Selected：

<Style Selector="^:selected">
  <Setter Property="Foreground" Value="{StaticResource TreeViewItemForegroundSelected}" />
</Style>


<Style Selector="^:selected /template/ Border#PART_LayoutRoot">
  <Setter Property="Background" Value="{DynamicResource TreeViewItemBackgroundPointerOver}" />
‍</Style>

5、关于ItemsSource绑定：

<TreeView Width="200" ItemsSource="{Binding Nodes}"/>

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