接著上篇silverlight的treeview控件研究，本篇來(lái)研究下wpf的這個(gè)控件。
默認(rèn)情況下的效果：
默認(rèn)情況下treeviewItem只有選中效果，且不能整行選中
修改樣式后效果：
增加了treeviewItem的鼠標(biāo)經(jīng)過(guò)狀態(tài)，提供整行選中效果
首先分析下treeview控件在silverlight和wpf下模板的不同：
1. wpf用了trigger控制模板內(nèi)控件的屬性變化，silverlight用了svm
2. wpf的treeview模板相比silverlgit下的少了一層Button。
不過(guò)以上兩個(gè)都不妨礙修改效仿著改模板^^
首先說(shuō)下前臺(tái)：
<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的層級(jí)縮進(jìn)放在了TreeView.ItemTemplate設(shè)置。因?yàn)椴荒苡胹ilverlight的那套東東。首先WPF里木有System.Windows.Controls.Toolkit.dll。后來(lái)我寫了自己的方法調(diào)用
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;
}
}
得到的結(jié)果elem.Parent返回永遠(yuǎn)是null，所以我只能作罷。在類里加了一個(gè)Level屬性，后臺(tái)賦值即可。
public class TvItem
{
public int Level { get; set; }
public string DisplayName { get; set; }
public List Children { get; set; }
public TvItem()
{
Children = new List();
}
}
好了，重點(diǎn)來(lái)啦！~現(xiàn)在開始分析TreeViewItem的模板啦！~
第一步，將三列兩行的Grid變成一個(gè)StackPanel
第二步，增加一個(gè)treeviewitem的狀態(tài)，默認(rèn)情況下只有選中的狀態(tài)，這個(gè)比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>
好啦，目前為止，基本功能都實(shí)現(xiàn)啦。如果對(duì)樣式要求更高，實(shí)現(xiàn)起來(lái)也很方便的。
效仿silverlight的做法，可以在模板里面添加幾個(gè)表示狀態(tài)的Rectangle，然后在trigger里面控制這幾個(gè)Rectangle的Opacity即可。
最后獻(xiàn)上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>
(2013-03-11 10:46:58)