wpf实现metrol风格的Treeview样式

最新推荐文章于 2024-10-19 11:42:05 发布

sccdzgang

最新推荐文章于 2024-10-19 11:42:05 发布

阅读量2.6k

点赞数

分类专栏： WPF 文章标签： treeview win8 metro wpf

本文链接：https://blog.csdn.net/sccdzgang/article/details/11253459

版权

这篇博客介绍了如何利用WPF实现模仿Windows 8 Metro风格的Treeview控件，特别是参照Office 2013的左侧文件夹树结构。作者展示了完成后的样式效果，并提供了相应的样式文件。

摘要由CSDN通过智能技术生成

win8出来已经有一段时间了，其中主要以metrol风格的界面样式感觉很不错，最新的office2013完全使用metrol风格，感觉简洁大方。在此用wpf做一个office2013中左侧的文件夹树的属性结构样式。效果如下：

样式文件如下：

     <Style x:Key="TreeViewItemFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <PathGeometry x:Key="TreeArrow" Figures="M0,0 L0,6 L6,0 z"/>
    <Style x:Key="ExpandCollapseToggleStyle" TargetType="{x:Type ToggleButton}">
        <Setter Property="Focusable" Value="False"/>
        <Setter Property="Width" Value="16"/>
        <Setter Property="Height" Value="16"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ToggleButton}">
                    <Border Background="Transparent" Height="16" Padding="5,5,5,5" Width="16">
                        <Path x:Name="ExpandPath" Data="{StaticResource TreeArrow}" 
                                              Fill="Transparent" Stroke="#838688">
                            <Path.RenderTransform>
                                <RotateTransform Angle="135" CenterY="3" CenterX="3"/>
                            </Path.RenderTransform>
                        </Path>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="IsChecked" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Stroke" TargetName="ExpandPath" 
                                                    Value="transparent"/>
                            <Setter Property="Fill" TargetName="ExpandPath" Value="#2a8dd4"/>
                        </MultiTrigger>

                        <MultiTrigger>