WPF自定义模板--TreeView 实现菜单连接线

有些小伙伴说,在TreeView中,怎么每一个都加上连接线,进行显示连接。

代码和效果如下:

其实就是在原来的模板中增加一列显示线条,然后绘制即可

复制代码
<Window x:Class="XH.TemplateLesson.TreeViewWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:XH.TemplateLesson"
        mc:Ignorable="d"
        Title="TreeViewWindow" Height="450" Width="800">
<Window.Resources>
  <Style TargetType="{x:Type TreeViewItem}">
      <Setter Property="Background" Value="Transparent"/>
      <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
      <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
      <Setter Property="Padding" Value="1,0,0,0"/>
      <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
      <Setter Property="Template">
          <Setter.Value>
              <ControlTemplate TargetType="{x:Type TreeViewItem}">
                  <Grid>
                      <Grid.ColumnDefinitions>
                          <!--主要是放线-->
                          <ColumnDefinition Width="10"/>
                          <ColumnDefinition MinWidth="19" Width="Auto"/>
                          <ColumnDefinition Width="*"/>
                          <ColumnDefinition Width="auto"/>
                      </Grid.ColumnDefinitions>
                      <Grid.RowDefinitions>
                          <RowDefinition Height="Auto"/>
                          <RowDefinition/>
                      </Grid.RowDefinitions>
                      <Border x:Name="Bd" 
                              Background="Transparent" 
                              BorderBrush="{TemplateBinding BorderBrush}"
                              BorderThickness="{TemplateBinding BorderThickness}" 
                              Grid.Column="1" Padding="{TemplateBinding Padding}"
                              SnapsToDevicePixels="true">
                          <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                      </Border>
                      <ItemsPresenter x:Name="ItemsHost" Grid.Column="1" Grid.ColumnSpan="3" Grid.Row="2"/>
                      <!--线区域-->
                      <!--横线-->
                      <Border BorderBrush="Green" BorderThickness="0 1 0 0" Margin="0 0 0 1.75" VerticalAlignment="Center" />
                      <!--竖线-->
                      <Border BorderBrush="Green" BorderThickness="1 0 0 0" Grid.Row="1" HorizontalAlignment="Right" Margin="0 -8 0 9.5"/>
                  </Grid>
              </ControlTemplate>
          </Setter.Value>
      </Setter>
  </Style>
</Window.Resources>
  <Grid>
    <TreeView>
        <TreeViewItem Header="AAA" IsExpanded="True">
            <TreeViewItem Header="AAAA-1"/>
            <TreeViewItem Header="AAAA-2"/>
            <TreeViewItem Header="AAAA-3"/>
            <TreeViewItem Header="AAAA-4"/>
        </TreeViewItem>
    </TreeView>
  </Grid>
</Window>

样式:

可以根据自己的需要继续调整。

相关推荐
Hare_bai5 小时前
WPF的MVVM模式核心架构与实现细节
ui·架构·c#·wpf·交互·xaml·mvvm
张人玉7 小时前
WPF 静态样式与动态样式的定义及使用详解
ui·c#·wpf
山间点烟雨9 小时前
2. WPF程序打包成一个单独的exe文件
c#·wpf·独立打包exe
A达峰绮12 小时前
Actor模型在Actix中的应用
wpf·actix·actor模型
清风徐来Groot1 天前
WPF之HandyControl库使用
wpf
Aevget1 天前
界面控件DevExpress WPF v25.2预览 - 模板工具包全新升级
c#·wpf·界面控件·devexpress·ui开发
Aevget1 天前
界面控件DevExpress WPF v25.1 - 官宣支持Avalonia XPF
wpf·界面控件·devexpress·ui开发·.net 10
没有梦想的咸鱼185-1037-16631 天前
SWAT模型应用
arcgis·数据分析·wpf
ifeng09182 天前
HarmonyOS实战项目:打造智能家居控制中心(设备发现与控制)
wpf·智能家居·harmonyos
ifeng09182 天前
HarmonyOS实战项目:开发一个分布式新闻阅读客户端
分布式·wpf·harmonyos