您的位置：首页 > Web前端 > CSS

No. 8958 实现Windows 7样式Aero TreeView控件（三）：样式绘制

2010-07-02 02:43 225 查看
Windows7AeroTreeView的效果样式，不说废话，分析样式：







左图为Windows7资源管理器树型目录一部分的截图，当他放大到800%时就能看到右侧的清晰的像素级图片，可以看到音乐项的效果，放大的部分是鼠标划过树目录项的效果，简单的来分析一下效果，最外边是一个深色的单像素边框，在内侧仔细看有一层接近白色的一像素内边框，内部背景呢，则是由上而下的一个渐变颜色，用取色软件分析之后有了以下的色彩结构：





开始的时候，我以为内边框只是一个简单单色边框，后来对比效果才发现，内边框原来也是由上而下的渐变颜色，TreeViewItem的控件模板结构如下：


<ControlTemplateTargetType="{x:TypeTreeViewItem}">
<ControlTemplate.Resources>
<o2ds:IndentConverterIndent="19"x:Key="indentConverter"/>
</ControlTemplate.Resources>
<StackPanelHeight="Auto">
<Borderx:Name="outBorder"BorderThickness="1"CornerRadius="2"Margin="1,1,0,0">
<Borderx:Name="itemBorder"Padding="{TemplateBindingPadding}"Margin="0"

CornerRadius="1"Background="{TemplateBindingBackground}"
BorderBrush="{TemplateBindingBorderBrush}"
BorderThickness="{TemplateBindingBorderThickness}">
<GridMargin="{BindingConverter={StaticResourceindentConverter},RelativeSource=

{RelativeSourceTemplatedParent}}">
<Grid.ColumnDefinitions>
<ColumnDefinitionWidth="19"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ToggleButtonGrid.Column="0"x:Name="ArrowButton"Style="{StaticResource

TreeViewArrowButtonStyle}"
IsChecked="{BindingPath=IsExpanded,RelativeSource={RelativeSource

TemplatedParent}}"
ClickMode="Press"/>
<ContentPresenterGrid.Column="1"x:Name="PART_Header"ContentSource="Header"
HorizontalAlignment="{TemplateBinding

HorizontalContentAlignment}"/>
</Grid>
</Border>
</Border>
<ItemsPresenterx:Name="ItemsHost"/>
</StackPanel>
</ControlTemplate>


在模板里面设置了根节点StackPanel，上面分析了边框是两层，所以定义了两个嵌套的Border对象，由于某些列表项可能会有不相同的设置，所以我酌情绑定了一些相对的属性，比如说在内边框绑定Padding属性，如果真有需求比如像Margin的属性可能就要酌情绑定到外侧outBorder对象上去了，至于选中效果的布局问题我在上一篇博文里面有详细的说明，具体色彩的实现以及交互效果呢，都是通过Trigger来实现的，代码如下：




<ControlTemplate.Triggers>
<TriggerProperty="IsExpanded"Value="False">
<SetterTargetName="ItemsHost"Property="Visibility"Value="Collapsed"/>
</Trigger>
<TriggerProperty="HasItems"Value="False">
<SetterTargetName="ArrowButton"Property="Visibility"Value="Hidden"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<ConditionProperty="HasHeader"Value="False"/>
<ConditionProperty="Width"Value="Auto"/>
</MultiTrigger.Conditions>
<SetterTargetName="PART_Header"Property="MinWidth"Value="75"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<ConditionProperty="HasHeader"Value="False"/>
<ConditionProperty="Height"Value="Auto"/>
</MultiTrigger.Conditions>
<SetterTargetName="PART_Header"Property="MinHeight"Value="19"/>
</MultiTrigger>
<TriggerProperty="IsSelected"Value="true">
<SetterTargetName="itemBorder"Property="Background"Value="{StaticResource

ResourceKey=SelectedBackgroundBrush}"/>
<SetterTargetName="itemBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=SelectedInnerBorderBrush}"/>
<SetterTargetName="outBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=SelectedOutBorderBrush}"/>
</Trigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<ConditionProperty="IsSelected"Value="true"/>
<ConditionProperty="IsSelectionActive"Value="false"/>
</MultiTrigger.Conditions>
<SetterTargetName="itemBorder"Property="Background"Value="{StaticResource

ResourceKey=SelectedLostFoucsBackgroundBrush}"/>
<SetterTargetName="itemBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=SelectedLostFoucsInnerBorderBrush}"/>
<SetterTargetName="outBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=SelectedLostFoucsOutBorderBrush}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<ConditionProperty="IsMouseOver"Value="True"/>
<ConditionProperty="IsSelected"Value="True"/>
</MultiTrigger.Conditions>
<SetterTargetName="itemBorder"Property="Background"Value="{StaticResource

ResourceKey=SelectedMouseMoveBackgroundBrush}"/>
<SetterTargetName="itemBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=SelectedMouseMoveInnerBorderBrush}"/>
<SetterTargetName="outBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=SelectedMouseMoveOutBorderBrush}"/>
</MultiTrigger>
<MultiTrigger>
<MultiTrigger.Conditions>
<ConditionSourceName="itemBorder"Property="IsMouseOver"Value="True"/>
<ConditionProperty="IsSelected"Value="False"/>
</MultiTrigger.Conditions>
<SetterTargetName="itemBorder"Property="Background"Value="{StaticResource

ResourceKey=MouseMoveBackgroundBrush}"/>
<SetterTargetName="itemBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=MouseMoveInnerBorderBrush}"/>
<SetterTargetName="outBorder"Property="BorderBrush"Value="{StaticResource

ResourceKey=MouseMoveOutBorderBrush}"/>
</MultiTrigger>
</ControlTemplate.Triggers>




上面代码可以看出来这里面定义了大概四种状态，分别是：





笔刷代码就不重复帖出了，状态效果配色方案如上所示。

此博文由WindowsLiveWriter4编辑完成，微软在前些天发布了WindowsLiveEssentialsWave4Beta版本在线安装包，安装后甚是欣喜，启用了全新的Ribbon工具栏，WindowsLiveMail的列表加载新添了淡入效果，而WindowsLiveMessanger的鼠标划入也添加了更多的动画元素，其中淡入和渐变的几个特殊效果单元与Apple新发布的iOS4操作系统的很多界面元素有重合，不知道是否最新的界面设计流行元素的前兆，待而观之。

由这篇博文之后，高仿Windows7AeroTreeView效果就基本上实现了，还有类似于鼠标移出TreeView所有Arrow全部消失得效果，我决定在有空的时候在添加，从代码的角度，这是我能实现的感觉上最优雅的写法，希望有高人高法，可以不吝赐教。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航