首页 > 代码库 > 重写TreeView模板来实现数据分层展示(二)
重写TreeView模板来实现数据分层展示(二)
前面一片文章实现TreeView的基本的模板重写，那么照着这个思路，我们再来写一个稍稍复杂的TreeView ,其它的内容都和前面系列内容相似，还是和之前文章介绍的一样，首先看看做出的DEMO的最终样式，先来一睹为快。
其实并不复杂，关键的是要准确去理解TreeView这个控件，这个控件的核心是TreeViewItem，那么我们就重点来看看这个样式该怎么写。
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Background" Value="http://www.mamicode.com/Transparent"/>
<!--此处设置TreeViewItem的绑定样式-->
<Setter Property="IsExpanded" Value="http://www.mamicode.com/True"></Setter>
<Setter Property="HorizontalContentAlignment" Value="http://www.mamicode.com/{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="VerticalContentAlignment" Value="http://www.mamicode.com/{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
<Setter Property="Padding" Value="http://www.mamicode.com/1,0,0,0"/>
<Setter Property="Foreground" Value="http://www.mamicode.com/{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
<Setter Property="FocusVisualStyle" Value="http://www.mamicode.com/{StaticResource TreeViewItemFocusVisual}"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" Margin="10"></StackPanel>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="19"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="22"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="#00a3d9"
Grid.Row="0"
Grid.Column="1"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="true"
MaxWidth="300"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ContentPresenter x:Name="PART_Header"
ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
<Rectangle x:Name="VerLn" Grid.Row="1" Grid.Column="1" Width="1" Stroke="Green" HorizontalAlignment="Center" VerticalAlignment="Stretch" Height="50" SnapsToDevicePixels="true" Fill="White"/>
<Border x:Name="itemsBorder"
BorderBrush="#00a3d9"
BorderThickness="1"
Padding="2"
Margin="10,0,10,0"
Grid.ColumnSpan="3"
Grid.Column="0"
Grid.Row="2"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<ItemsPresenter x:Name="ItemsHost" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="http://www.mamicode.com/false">
<Setter Property="Visibility" TargetName="ItemsHost" Value="http://www.mamicode.com/Collapsed"/>
</Trigger>
<Trigger Property="HasItems" Value="http://www.mamicode.com/false">
<Setter Property="Height" TargetName="VerLn" Value="http://www.mamicode.com/0"/>
<Setter Property="Height" TargetName="itemsBorder" Value="http://www.mamicode.com/0"/>
</Trigger>
<Trigger Property="IsSelected" Value="http://www.mamicode.com/true">
<Setter Property="Background" TargetName="Bd" Value="http://www.mamicode.com/{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
<Setter Property="Foreground" Value="http://www.mamicode.com/{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="http://www.mamicode.com/true"/>
<Condition Property="IsSelectionActive" Value="http://www.mamicode.com/false"/>
</MultiTrigger.Conditions>
<Setter Property="Background" TargetName="Bd" Value="http://www.mamicode.com/{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Foreground" Value="http://www.mamicode.com/{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
</MultiTrigger>
<Trigger Property="IsEnabled" Value="http://www.mamicode.com/false">
<Setter Property="Foreground" Value="http://www.mamicode.com/{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="http://www.mamicode.com/true">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<VirtualizingStackPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
在这里我们把整个Grid分成了三行和三列，第0行第一列来来呈现我们每一个TreeViewItem的Header属性，我们让其居中显示，在第1行第一列我们来显示一条直线，这里我们也是用的Rectangle，当然使用Border和使用Path的效果其实是一样的，这个每个人习惯不同，最后面一行我们来显示ItemsPresenter，这个和上面一篇形式上是差不多的，我们就不详细介绍，这里需要重点注意的是下面的内容。
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" IsItemsHost="True" Margin="10"></StackPanel>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
即ItemsPresenter是放在一个容器中的，这个容器决定了里面的Item到底需要通过怎样的方式来呈现，这里我们是使用的是横向排列的StackPanel控件来作为父容器的，另外需要注意到这个常用的Trigger
<Trigger Property="HasItems" Value="http://www.mamicode.com/false">
<Setter Property="Height" TargetName="VerLn" Value="http://www.mamicode.com/0"/>
<Setter Property="Height" TargetName="itemsBorder" Value="http://www.mamicode.com/0"/>
</Trigger>
这个在TreeView控件中是非常常用的，这里需要特别注意。
接下里我们再看看当前的TreeView的具体数据绑定和其它的数据逻辑。
<TreeView Name="trvMenu" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<TreeView.ItemTemplate>
<HierarchicalDataTemplate DataType="{x:Type self:MyTreeViewItem}"
ItemsSource="{Binding Children}">
<StackPanel Orientation="Horizontal" Margin="10">
<Ellipse x:Name="ellipse" Width="16" Height="16" Margin="2,0,2,0" Fill="Transparent">
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard AutoReverse="True" RepeatBehavior="Forever">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="ellipse">
<EasingColorKeyFrame KeyTime="0:0:0.0" Value="http://www.mamicode.com/Transparent"/>
<EasingColorKeyFrame KeyTime="0:0:0.5" Value="http://www.mamicode.com/DarkGreen"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Image x:Name="image"
Source="/TestTreeView;component/Images/connect.png"
Margin="2,0,2,0"
Width="24"
Height="24"
Stretch="Fill">
</Image>
<TextBlock Text="{Binding TreeViewItemName}" VerticalAlignment="Center" FontSize="16" Foreground="White" Margin="2,0,2,0"/>
</StackPanel>
<HierarchicalDataTemplate.Triggers>
<DataTrigger Binding="{Binding NodeType}" Value="http://www.mamicode.com/采集服务器">
<Setter Property="Source" TargetName="image" Value="http://www.mamicode.com/TestTreeView;component/Images/connect.png"></Setter>
</DataTrigger>
<DataTrigger Binding="{Binding NodeType}" Value="http://www.mamicode.com/控制服务器">
<Setter Property="Source" TargetName="image" Value="http://www.mamicode.com/TestTreeView;component/Images/medium_alarm_hit.png"></Setter>
</DataTrigger>
</HierarchicalDataTemplate.Triggers>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
这里需要注意的是当前的TreeViewItem直接是作用在TreeView上的，如果TreeViewItem添加了x:Key属性，那么该如何引用该TreeViewItem样式呢？正确的方式是设置TreeView的ItemContainerStyle属性，这里需要注意，这篇文章就介绍到这里，如果能够与前面的一篇内容结合起来看，那么相信对TreeView控件会有更多的理解吧！
重写TreeView模板来实现数据分层展示(二)
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。