分享

TreeView控件研究(WPF篇)(创建+数据绑定+整行选中)

 牛人的尾巴 2016-04-03

TreeView控件研究(WPF篇)(创建+数据绑定+整行选中)

(2013-03-11 10:46:58)
标签:

treeview

wpf

分类: SL/WPF控件研究

接着上篇silverlight的treeview控件研究,本篇来研究下wpf的这个控件。

默认情况下的效果:

TreeView控件研究(WPF篇)(创建+数据绑定+整行选中) 默认情况下treeviewItem只有选中效果,且不能整行选中

修改样式后效果:

TreeView控件研究(WPF篇)(创建+数据绑定+整行选中) 增加了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>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="auto"/>
                                        <ColumnDefinition/>
                                    </Grid.ColumnDefinitions>

                                    <Rectangle x:Name="Hover" Grid.ColumnSpan="2" Stroke="#FFd8f0ff" StrokeThickness="1" HorizontalAlignment="Stretch" RadiusX="4" RadiusY="4" IsHitTestVisible="False" Opacity="0">
                                        <Rectangle.Fill>
                                            <LinearGradientBrush StartPoint=".5,0" EndPoint=".5,1">
                                                <GradientStop Offset="0" Color="#ffe5f4ff" />
                                                <GradientStop Offset="1" Color="#FFd8f0ff" />
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                    <Rectangle x:Name="Selection"  Grid.ColumnSpan="2" Stroke="#FFfee69e" HorizontalAlignment="Stretch" RadiusX="4" RadiusY="4" IsHitTestVisible="False" Opacity="0" >
                                        <Rectangle.Fill>
                                            <LinearGradientBrush>
                                                <GradientStop Offset="0" Color="#FFfff2ca" />
                                                <GradientStop Offset="1" Color="#FFfee69e" />
                                            </LinearGradientBrush>
                                        </Rectangle.Fill>
                                    </Rectangle>
                                   
                                    <ToggleButton x:Name="Expander" ClickMode="Press" IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource TemplatedParent}}" Style="{StaticResource ExpandCollapseToggleStyle}"/>
                                    <ContentPresenter x:Name="PART_Header" Grid.Column="1" ContentSource="Header" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                                </Grid>
                            </Border>
                        
                            <ItemsPresenter x:Name="ItemsHost"/>
                        </StackPanel>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsExpanded" Value="false">
                                <Setter Property="Visibility" TargetName="ItemsHost" Value="Collapsed"/>
                            </Trigger>
                            <Trigger Property="HasItems" Value="false">
                                <Setter Property="Visibility" TargetName="Expander" Value="Hidden"/>
                            </Trigger>
                            <Trigger Property="IsSelected" Value="true">
                                <!--<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>-->
                                <Setter Property="Opacity" TargetName="Selection" Value="1"/>
                                <!--<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>-->
                            </Trigger>
                            <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"/>-->
                                <Setter Property="Opacity" TargetName="Hover" Value="1"/>
                            </MultiTrigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true"/>
                                    <Condition Property="IsSelectionActive" Value="false"/>
                                </MultiTrigger.Conditions>
                                <!--<Setter Property="Background" TargetName="Bd" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>-->
                                <Setter Property="Opacity" TargetName="Selection" Value="1"/>
                                <!--<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>-->
                            </MultiTrigger>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="VirtualizingStackPanel.IsVirtualizing" Value="true">
                    <Setter Property="ItemsPanel">
                        <Setter.Value>
                            <ItemsPanelTemplate>
                                <VirtualizingStackPanel/>
                            </ItemsPanelTemplate>
                        </Setter.Value>
                    </Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约