标签:
用法一
1 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 3 <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/> 4 <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}"> 5 <Setter Property="Focusable" Value="False"/> 6 <Setter Property="Width" Value="16"/> 7 <Setter Property="Height" Value="16"/> 8 <Setter Property="Template"> 9 <Setter.Value> 10 <ControlTemplate TargetType="{x:Type ToggleButton}"> 11 <Border Background="Transparent" Height="16" Padding="5,5,5,5" Width="16"> 12 <Path x:Name="ExpandPath" Data="{StaticResource TreeArrow}" Fill="Transparent" Stroke="#FF989898"> 13 <Path.RenderTransform> 14 <RotateTransform Angle="135" CenterY="3" CenterX="3"/> 15 </Path.RenderTransform> 16 </Path> 17 </Border> 18 <ControlTemplate.Triggers> 19 <Trigger Property="IsMouseOver" Value="True"> 20 <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF1BBBFA"/> 21 <Setter Property="Fill" TargetName="ExpandPath" Value="Transparent"/> 22 </Trigger> 23 <Trigger Property="IsChecked" Value="True"> 24 <Setter Property="RenderTransform" TargetName="ExpandPath"> 25 <Setter.Value> 26 <RotateTransform Angle="180" CenterY="3" CenterX="3"/> 27 </Setter.Value> 28 </Setter> 29 <Setter Property="Fill" TargetName="ExpandPath" Value="#FF595959"/> 30 <Setter Property="Stroke" TargetName="ExpandPath" Value="#FF262626"/> 31 </Trigger> 32 </ControlTemplate.Triggers> 33 </ControlTemplate> 34 </Setter.Value> 35 </Setter> 36 </Style> 37 <Style TargetType="{x:Type TreeViewItem}"> 38 <Setter Property="Background" Value="Transparent"/> 39 <Setter Property="HorizontalContentAlignment" Value="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 40 <Setter Property="VerticalContentAlignment" Value="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/> 41 <Setter Property="Padding" Value="1,0,0,0"/> 42 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 43 <Setter Property="FocusVisualStyle" Value="{x:Null}"/> 44 <Setter Property="Template"> 45 <Setter.Value> 46 <ControlTemplate TargetType="{x:Type TreeViewItem}"> 47 <Grid> 48 <Grid.ColumnDefinitions> 49 <ColumnDefinition Width="19"/> 50 <ColumnDefinition/> 51 </Grid.ColumnDefinitions> 52 <Grid.RowDefinitions> 53 <RowDefinition/> 54 <RowDefinition/> 55 </Grid.RowDefinitions> 56 <Border Grid.ColumnSpan="2" Margin="-1600,0,0,0" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"/> 57 <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/> 58 <ContentPresenter Grid.Column="1" x:Name="PART_Header" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/> 59 <ItemsPresenter x:Name="ItemsHost" Grid.ColumnSpan="2" Grid.Column="1" Grid.Row="1"/> 60 61 </Grid> 62 <ControlTemplate.Triggers> 63 <Trigger Property="IsExpanded" Value="false"> 64 <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/> 65 </Trigger> 66 <Trigger Property="HasItems" Value="false"> 67 <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/> 68 </Trigger> 69 <Trigger Property="IsSelected" Value="true"> 70 <Setter Property="Background" TargetName="Bd" Value="#FF404040" /> 71 <Setter Property="Background" TargetName="Expander" Value="#FF404040"/> 72 </Trigger> 73 <MultiTrigger> 74 <MultiTrigger.Conditions> 75 <Condition Property="IsSelected" Value="true"/> 76 <Condition Property="IsSelectionActive" Value="false"/> 77 </MultiTrigger.Conditions> 78 <Setter Property="Background" TargetName="Bd" Value="#FF404040"/> 79 80 <Setter Property="Background" TargetName="Expander" Value="#FF404040"/> 81 </MultiTrigger> 82 <Trigger Property="IsEnabled" Value="false"> 83 <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/> 84 </Trigger> 85 </ControlTemplate.Triggers> 86 </ControlTemplate> 87 </Setter.Value> 88 </Setter> 89 </Style> 90 91 </ResourceDictionary>
这种用法只能显示背景,无法显边框 ,原因在于:
<Border Grid.ColumnSpan="2" Margin="-1600,0,0,0" x:Name="Bd" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"/> 中的margin设置成-1600;无法精确的设置margin
方法二(转截没有确正可行性)
方法更可行,但操作困难些
记得原来做Winfrom通过Item的Bounds可以获得整行的区域,但是在WPF中进行了几个布局方式都没能成功!
VS中的解决方案效果布局如下:
这样在第一行第二列方式Border控件,此为选中区域。而如果要实现右侧系统的效果,必须要在选中区域的时候补齐第二行第一列的宽度,但是如果在TreeViewItem的Template不设置子节点列表缩进的话,将无法定位子节点列表缩进!
对比了Winform的TreeNode类型有两个关键的属性:FullPath和Level。只要知道一个就可以根据Indent算出相应的缩进宽度,从这样的思路上,这个Item布局结构就要更改如下了:
代码结构如下:
<StackPanel>
<Border x:Name=”itemBorder”>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinitions Width=”19” />
<ColumnDefinitions Width=”*” />
</Grid.ColumnDefinitions>
<Path x:Name=”TreeArrow” Grid.Column=”0” />
<ContentPresenter ContentSource=”Header” Grid.Column=”1” />
</Grid>
</Border>
<ItemsPresenter x:Name="ItemsHost" />
</StackPanel>
可是此时的子节点列表没有缩进怎么办?
做几个预备动作,在TreeViewItem里面有一个TreeNode的特殊特性,叫做Level,获得节点所在的层级,在这里我做了个Extensions类:
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 (null != tvi)
return tvi.GetDepth() + 1;
elem = elem.Parent as FrameworkElement;
}
return 0;
}
}
用来获得TreeViewItem在TreeView里面的层级深度。然后就是怎么将缩进的绑定到它该在的地方了!
在上面那段TreeViewItem的Template代码里面的itemBorder就是节点项的整体范围了,如果我们想让选中边框始终保持Aero样式中满行选中的状态就只能在itemBorder中的Grid上做手脚了,上面扩展了TreeViewItem对象,可以获取的到层级深度,而缩进值则等于节点层级和缩进值的乘积,而应用缩进值需要实现一个缩进的转换类型方法:
public class IndentConverter:IValueConverter
{
public double Indent{ get; set; }public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var item = value as TreeViewItem;
if (null == item)
return new Thickness(0);
return new Thickness(Indent* item.GetDepth(), 0, 0, 0);
}public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
然后就是改造上一段模板内容。完整代码如下:
<Style TargetType="{x:Type TreeViewItem}" x:Key="aaa">
<Setter Property="FocusVisualStyle" Value="{StaticResource TreeViewItemFocusVisual}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TreeViewItem}">
<ControlTemplate.Resources>
<o2ds:IndentConverter Indent="19" x:Key="indentConverter" />
</ControlTemplate.Resources>
<StackPanel>
<Border Name="itemBackground" Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}">
<Grid Margin="{Binding Converter={StaticResource indentConverter},RelativeSource={RelativeSource TemplatedParent}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="19" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0" x:Name="ArrowButton" Style="{StaticResource TreeViewArrowButtonStyle}"
IsChecked="{Binding Path=IsExpanded, RelativeSource={RelativeSource TemplatedParent}}"
ClickMode="Press" />
<ContentPresenter Grid.Column="1" x:Name="PART_Header" ContentSource="Header"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Grid>
</Border>
<ItemsPresenter x:Name="ItemsHost" />
</StackPanel><ControlTemplate.Triggers>
Trigger something…
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
标签:
原文地址:http://www.cnblogs.com/qq247039968/p/4217256.html