WPF TreeView

属性名 属性类名 功能
Style Style 定义控件自身的样式,可包含(ItemContainerStyle、Template、ItemsPanel、ItemTemplate、ItemsPresenter)
ItemContainerStyle  Style  每个集合控件的Item的样式,可包含(ItemTemplate、ItemsPresenter)
Template  ControlTemplate  定义控件自身的外观
ItemsPanel  ItemsPanelTemplate  定义子元素的布局容器
ItemTemplate  DataTemplate  定义每个子元素的外观
HierarchicalDataTemplate  DataTemplate 定义每个子元素的子元素的外观,对应于(ItemsPresenter)

 ItemsPanel 使用示例(适用于已经存在 TreeViewItem 的静态数据)

<Window.Resources>
    <!--ItemTemplate最外层容器-->
    <ItemsPanelTemplate x:Key="ItemsPanelTemplateStyle">
        <StackPanel />
    </ItemsPanelTemplate>
</Window.Resources>
<StackPanel>
    <TreeView ItemsPanel="{StaticResource ItemsPanelTemplateStyle}">
        <TreeViewItem>
            <TreeViewItem.Header>
                <TextBlock Text="Header is Object"/>
            </TreeViewItem.Header>
        </TreeViewItem>
    </TreeView>
</StackPanel>

  

 ItemsPanel 结合 ItemTemplate 使用示例(使用于 C# 动态数据)

<Window.Resources>
    <!--ItemsTemplate最外层容器-->
    <ItemsPanelTemplate x:Key="ItemsPanelTemplateStyle">
        <StackPanel />
    </ItemsPanelTemplate>
    <!--ItemsTemplate每一项容器-->
    <DataTemplate x:Key="DataTemplateStyle">
        <TextBlock Text="{Binding Path=title}"/>
    </DataTemplate>
</Window.Resources>
<StackPanel>
    <TreeView x:Name="treeView" 
                ItemsPanel="{StaticResource ItemsPanelTemplateStyle}" 
                ItemTemplate="{StaticResource DataTemplateStyle}"></TreeView>
</StackPanel>

Style 使用实例,此方式可以包含(ItemsPanel、ItemTemplate)

<Window.Resources>
    <Style x:Key="TreeViewStyle" TargetType="TreeView">
        <!--TreeView 控件样式-->
        <Setter Property="Background" Value="White"/>
        <!--ItemsTemplate最外层容器-->
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <StackPanel />
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <!--ItemsTemplate每一项容器-->
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Text="{Binding Path=title}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <TreeView x:Name="treeView" Style="{StaticResource TreeViewStyle}"></TreeView>
</StackPanel>

 

ItemContainerStyle 使用示例

<Window.Resources>
    <Style x:Key="TreeViewItemContainerStyle" TargetType="TreeViewItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <!--ItemTemplate 元素-->
                        <ContentPresenter Grid.Row="0" ContentSource="Header"/>
                        <!--HierarchicalDataTemplate 元素-->
                        <ItemsPresenter Grid.Row="1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>
<StackPanel>
    <TreeView x:Name="treeView" ItemContainerStyle="{StaticResource TreeViewItemContainerStyle}">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Path=nodes}">
                <TextBlock Text="{Binding title}"/>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</StackPanel>

  

C# 动态数据

public partial class WindowDemo : Window
{
    public List<Demo> list;
    public WindowDemo()
    {
        InitializeComponent();
        list = new List<Demo>();
        list.Add(new Demo { id = 1, pid = 0, title = "测试1" });
        list.Add(new Demo { id = 2, pid = 1, title = "测试2" });
        list.Add(new Demo { id = 3, pid = 1, title = "测试3" });

        treeView.ItemsSource = GetTreeData(0, list);
    }
    /// <summary>
    /// 递归生成树形数据
    /// </summary>
    public List<Demo> GetTreeData(int parentid, List<Demo> nodes)
    {
        List<Demo> mainnodes = nodes.Where(x => x.pid == parentid).ToList<Demo>();
        List<Demo> othernodes = nodes.Where(x => x.pid != parentid).ToList<Demo>();
        foreach (Demo grp in mainnodes)
        {
            grp.nodes = GetTreeData(grp.id, othernodes);
        }
        return mainnodes;
    }
}
public class Demo
{
    public int id { set; get; }
    public int pid { set; get; }
    public string title { set; get; }
    public List<Demo> nodes { set; get; }
}

 

<HierarchicalDataTemplate x:Key="TreeViewItemTemplate" ItemsSource="{Binding Children,Mode=TwoWay}">
        <Grid  Background="Transparent">
            <Grid.Resources>
                <cvt:BoolToVisibility x:Key="BoolToVisibility"/>
                <cvt:VisibilityToReverse x:Key="VisibilityToReverse"/>
            </Grid.Resources>
            <Grid Visibility="{Binding Visibility,ElementName=Grouping,Converter={StaticResource VisibilityToReverse}}">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="60"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}" VerticalAlignment="Center" HorizontalAlignment="Left" Height="50" Width="50" Margin="5"/>
                <TextBlock Grid.Column="1" Text="{Binding Name}" FontSize="14" VerticalAlignment="Center" HorizontalAlignment="Left"/>
            </Grid>
            <Grid MinHeight="35" x:Name="Grouping" Visibility="{Binding IsGrouping,Converter={StaticResource BoolToVisibility}}">
                <Border x:Name="PART_Name" VerticalAlignment="Bottom">
                    <TextBlock Text="{Binding Name}" Margin="5 0" VerticalAlignment="Center" HorizontalAlignment="Left"/>
                </Border>
            </Grid>
        </Grid>
    </HierarchicalDataTemplate>

    <Style x:Key="TreeViewItemStyle" TargetType="{x:Type TreeViewItem}">
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="IsExpanded" Value="True"></Setter>
        <Setter Property="Margin" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type TreeViewItem}">
                    <ControlTemplate.Resources>
                        <cvt:IndentConverter  x:Key="IndentConverter"/>
                    </ControlTemplate.Resources>
                    <Grid Background="Transparent">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Border Name="itemBackground" Background="{TemplateBinding Background}"  
                                BorderBrush="{TemplateBinding BorderBrush}"  
                                BorderThickness="{TemplateBinding BorderThickness}"  
                                Padding="{TemplateBinding Padding}">
                            <Grid x:Name="ItemRoot" Margin="{Binding Converter={StaticResource IndentConverter},RelativeSource={RelativeSource TemplatedParent}}">
                                <ContentPresenter x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="Stretch"/>
                            </Grid>
                        </Border>
                        <!--子节点-->
                        <ItemsPresenter x:Name="ItemsHost" Grid.Row="1"/>
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsSelected" Value="True">
                            <Setter Property="Background" TargetName="itemBackground" Value="#C4C4C4"/>
                        </Trigger>
                        <!--包含有节点的的不被选中-->
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasItems" Value="True"/>
                                <Condition Property="IsFocused" Value="False"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Focusable" Value="False"/>
                        </MultiTrigger>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="HasItems" Value="False"/>
                                <Condition Property="IsFocused" Value="False"/>
                                <Condition SourceName="itemBackground" Property="IsMouseOver" Value="true"/>
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value=" #DCDAD9" TargetName="itemBackground"/>
                        </MultiTrigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TreeViewStyle" TargetType="{x:Type TreeView}">
        <Setter Property="ScrollViewer.CanContentScroll" Value="True" />
        <Setter Property="VirtualizingStackPanel.IsVirtualizing" Value="True"></Setter>
        <Setter Property="VirtualizingStackPanel.VirtualizationMode" Value="Recycling" />
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
        <Setter Property="ItemContainerStyle" Value="{StaticResource TreeViewItemStyle}"></Setter>
        <Setter Property="Background" Value="#EBE9E7"/>
        <Setter Property="BorderBrush" Value="#D6D6D6"/>
        <Setter Property="BorderThickness" Value="0 1 1 1"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True" Margin="0"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

  

WPF TreeView 样式:

参考:https://blog.csdn.net/qq_20758141/article/details/80345900

wpf treeview 之 整行选中 效果

https://www.cnblogs.com/aoldman/archive/2013/01/28/2879797.html

WPF的TreeView节点之间有连线

https://www.cnblogs.com/zhili/p/WPFTreeViewEx.html

WPF自定义TreeView控件样式实现QQ联系人列表效果

https://www.jb51.net/article/138521.htm

https://www.cnblogs.com/li-peng/p/3152982.html

 

https://www.cnblogs.com/lzjsky/p/17219184.html

 wpf treeview 不需要选中

<TreeView PreviewMouseDown="TreeView_PreviewMouseDown">
    <TreeView.ItemContainerStyle>
        <Style TargetType="TreeViewItem">
            <Setter Property="IsSelected" Value="False"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="IsSelected" Value="False"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
    <!-- TreeView items -->
</TreeView>

 C#代码:

private void TreeView_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
    // 阻止鼠标点击事件,不触发项的选中
    e.Handled = true;
}

 

posted @ 2021-06-03 10:25  microsoft-zhcn  阅读(654)  评论(0编辑  收藏  举报