接着上篇silverlight的treeview控件研究,本篇来研究下wpf的这个控件。
默认情况下的效果:
默认情况下treeviewItem只有选中效果,且不能整行选中
修改样式后效果:
增加了treeviewItem的鼠标经过状态,提供整行选中效果
首先分析下treeview控件在silverlight和wpf下模板的不同:
1. wpf用了trigger控制模板内控件的属性变化,silverlight用了svm
2. wpf的treeview模板相比silverlgit下的少了一层Button。
不过以上两个都不妨碍修改效仿着改模板^^
首先说下前台:
<TreeView x:Name="MyTV"
Width="250" Padding="0" Margin="0" BorderThickness="1"
>
<TreeView.ItemTemplate>
<HierarchicalDataTemplate ItemsSource="{Binding
Children}">
<TextBlock x:Name="txt" VerticalAlignment="Center"
Text="{Binding DisplayName}" Margin="{Binding Level,
Converter={StaticResource IndentConverter}}"/>
</HierarchicalDataTemplate>
</TreeView.ItemTemplate>
</TreeView>
相比silverlight而言不用引用额外的dll。这里我把treeview的层级缩进放在了TreeView.ItemTemplate设置。因为不能用silverlight的那套东东。首先WPF里木有System.Windows.Controls.Toolkit.dll。后来我写了自己的方法调用
public static class
TreeViewItemExtensions
{
public static int GetDepth(this TreeViewItem item)
{
FrameworkElement elem = item;
while (elem.Parent != null)
{
var tvi = elem.Parent as TreeViewItem;
if (tvi != null)
{
return tvi.GetDepth() + 1;
}
elem = elem.Parent as FrameworkElement;
}
return 0;
}
}
得到的结果elem.Parent返回永远是null,所以我只能作罢。在类里加了一个Level属性,后台赋值即可。
public class TvItem
{
public int Level { get; set; }
public string DisplayName { get; set; }
public List Children { get; set; }
public TvItem()
{
Children = new List();
}
}
好了,重点来啦!~现在开始分析TreeViewItem的模板啦!~
第一步,将三列两行的Grid变成一个StackPanel
第二步,增加一个treeviewitem的状态,默认情况下只有选中的状态,这个比silverlight的要偷懒啊 = =
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver"
Value="true"/>
<Condition
Property="IsExpanded" Value="false"/>
<Condition
Property="IsSelected" Value="false"/>
</MultiTrigger.Conditions><Setter
Property="Background"
TargetName="Bd"Value="yellow"/>
</MultiTrigger>
好啦,目前为止,基本功能都实现啦。如果对样式要求更高,实现起来也很方便的。
效仿silverlight的做法,可以在模板里面添加几个表示状态的Rectangle,然后在trigger里面控制这几个Rectangle的Opacity即可。
最后献上TreeViewItem的样式代码:
<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="FocusVisualStyle"
Value="{StaticResource
TreeViewItemFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type
TreeViewItem}">
<StackPanel>
<Border x:Name="Bd" CornerRadius="2"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}" Padding="{TemplateBinding
Padding}"
SnapsToDevicePixels="true">
<Grid>