码迷,mamicode.com
首页 > 其他好文 > 详细

TreeViewItem实现整行选中 (两种用法)

时间:2015-01-11 23:01:27      阅读:469      评论:0      收藏:0      [点我收藏+]

标签:

用法一

 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>

TreeViewItem实现整行选中 (两种用法)

标签:

原文地址:http://www.cnblogs.com/qq247039968/p/4217256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!