帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:控制  vis  Visualstatemanager  SUP  animations  动画  


介绍

在Silverlight中,动画可以用的XAML来定义<font face="Courier New">VisualStateManager</font> 但是,这里技术有一些重大缺点,尤它的是在尝试创建可以重用的控件时。 此外,最好尝试在代码中保留视图的定义,或者以的XAML。 在两个地方都有使维护更加困难。 在 XAML的情况下,最好 XAML,这是创建收费的XAML的整个点,而不是遵循的技术 technology。

背景

我现在工作的小组有几个人负责用户界面的设计。 他们已经广泛使用了只包含 icon的按钮。 这些图标有与鼠标过和按下状态相关的行为。 我需要处理的初始图标是用单一路径定义的,只有一个颜色变化。 这意味着路径的填充必须根据 <font face="Courier New">VisualStateManager</font><font face="Courier New">CommonStates</font><font face="Courier New">MouseOver</font><font face="Courier New">Pressed</font> 最初解决的方法是为每个不同的icon 创建一个控制模板,作为按钮。 因为这意味着许多更改需要更改所有的按钮,因这里这不是完全希望的。 然后可以使用相同的icon 同时使用 ButtonToggleButton 控件。 我最初的概念是 <font face="Courier New">ControlTemplate</font> that了 <font face="Courier New">Content</font> 那是一个 <font face="Courier New">string </font> 那是a的路径值 <font face="Courier New">Path</font> 控件,以及 <font face="Courier New">Fill</font> 被定义为 <font face="Courier New">Foreground</font> :

<Stylex:Key="PathButton"TargetType="Button"><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="Button"><GridBackground="Transparent"><PathName="ButtonPath"HorizontalAlignment="Center"VerticalAlignment="Center"Fill="{TemplateBinding Foreground}"Data="{TemplateBinding Content}"/><VisualStateManager.VisualStateGroups><VisualStateGroupx:Name="CommonStates"><VisualStatex:Name="Normal"/><VisualStatex:Name="Pressed"><Storyboard><ColorAnimationDuration="0"Storyboard.TargetName="ButtonPath"Storyboard.TargetProperty="(Shape.Fill)
. (SolidColorBrush.Color)"To="{StaticResource AccentColor}"/></Storyboard></VisualState><VisualStatex:Name="MouseOver"/><VisualStatex:Name="Disabled"/></VisualStateGroup></VisualStateManager.VisualStateGroups></Grid></ControlTemplate></Setter.Value></Setter></Style>

这最初看起来是正确的解决方案,但它并没有处理所有的icon 按钮。

第一个公认的问题是当一个单一的路径出现时。 为了处理这种情况,我的一个员工创建了一个控制,它基本上管理了 <font face="Courier New">ControlTemplate</font> 用于 <font face="Courier New">Button</font> 它不仅处理多个路径的颜色,而且可以指出哪些路径会受到影响,并且应用渲染转换。 它似乎处理了我们所需要的所有按钮行为。

然后,我遇到了一个有多种颜色变化的情况, <font face="Courier New">ControlTemplate</font> 不处理多种颜色。 我可能会把现有 <font face="Courier New">ControlTemplate</font> 处理多种颜色,但我不喜欢这个概念。 基本上我们正在提供另一个 <font face="Courier New">VisualStateManager</font> "。"。 <font face="Courier New">VisualStateManager</font> 是Silverlight中的一个标准Silverlight开发人员理解。 它还为定义的行为提供了一个非常明显的定义。 不幸的是,Silverlight不允许你随意地创建 <font face="Courier New">DependencyProperties</font> 对于一个控件,甚至是 <font face="Courier New">ContentlPresenter</font> 我觉得最好是创建一个 <font face="Courier New">ContentControl</font> 包含了创建所需行为所需的属性。

因此,我创建了一个包含两个新 <font face="Courier New">DependencyProperties</font> : <font face="Courier New">Color1</font><font face="Courier New">Color2</font> 当初始化控件或者内容更改时,将使用以下方法扫描内容中的控件 <font face="Courier New">VisualTreeHelper.GetChild</font> 方法。每个要使用该方法更改的控件 <font face="Courier New">VisualStateManager </font> 有一个 <font face="Courier New">DependencyProperty </font> 集合中包含 <font face="Courier New">string </font> 这将指示该控件( <font face="Courier New">Shape</font> ) 填充颜色将由 <font face="Courier New">Color1</font> 或者 <font face="Courier New">Color2</font><font face="Courier New">DependencyProperty</font> ,并将被放入 <font face="Courier New">List </font> 这里关联 <font face="Courier New">Color </font> 属性。

iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 <font face="Courier New">Color1 </font><font face="Courier New">Color2 </font><font face="Courier New">DependencyProperties</font> 每个都有一个更改事件处理程序,将更新它的关联列表中的所有控件,以便将填充设置为 <font face="Courier New">SolidColorBrush</font> 使用新颜色。

使用代码

对于任何熟悉使用 <font face="Courier New">VisualStateManager</font> 这个控件的使用实际上非常简单。 不幸的是 <font face="Courier New">ControlTemplate</font> 必须创建以包含 <font face="Courier New">VisualStateManager</font> 在这里情况下,我将使用一个控件 <font face="Courier New">Button</font> :

<Stylex:Key="TwoColorChangeButton"TargetType="Button"><SetterProperty="VerticalContentAlignment"Value="Top"/><SetterProperty="BorderThickness"Value="0"/><SetterProperty="TabNavigation"Value="Local"/><SetterProperty="Template"><Setter.Value><ControlTemplateTargetType="Button"><GridBackground="{TemplateBinding Background}"><VisualStateManager.VisualStateGroups><VisualStateGroupx:Name="CommonStates"><VisualStateGroup.Transitions><VisualTransitionGeneratedDuration="0:0:0.1"><VisualTransition.GeneratedEasingFunction><QuadraticEaseEasingMode="EaseOut"/></VisualTransition.GeneratedEasingFunction></VisualTransition></VisualStateGroup.Transitions><VisualStatex:Name="Normal"/><VisualStatex:Name="MouseOver"><Storyboard><ColorAnimationDuration="0"To="LightGreen"Storyboard.TargetProperty="Color1"Storyboard.TargetName="ContentControl"/><ColorAnimationDuration="0"To="Black"Storyboard.TargetProperty="Color2"Storyboard.TargetName="ContentControl"/></Storyboard></VisualState><VisualStatex:Name="Pressed"><Storyboard><ColorAnimationDuration="0"To="Red"Storyboard.TargetProperty="Color1"Storyboard.TargetName="ContentControl"/><ColorAnimationDuration="0"To="Green"Storyboard.TargetProperty="Color2"Storyboard.TargetName="ContentControl"/></Storyboard></VisualState><VisualStatex:Name="Disabled"><Storyboard><ColorAnimationDuration="0"To="LightGray"Storyboard.TargetProperty="Color1"Storyboard.TargetName="ContentControl"/></Storyboard></VisualState></VisualStateGroup></VisualStateManager.VisualStateGroups><views:ColorAdapterControlx:Name="ContentControl"Color2="White"Color1="Black"Content="{TemplateBinding Content}"/></Grid></ControlTemplate></Setter.Value></Setter></Style><spanstyle="margin: 0px; line-height: 107%; font-family:"SegoeUI",sans-serif;font-size:10.5pt">Buttons </span>

你可以直接代码内容中的路径,但是由于这是大型项目的一部分,定义了 <font face="Courier New">Grid.Resources</font> :

<ControlTemplate x:Key="ButtonContent_Plus2" T
 argetType="ContentControl"> <Canvas Width="12.1092" Height="12.1096"> <Path Width="12.1092" Height="12.1096" Canvas.Left="0.390177" Canvas.Top="0.391614" Stretch="Fill" views:ColorAdapterExt.FillColorSelector="Color1" Data="F1 M 7.25134,0.446381C 10.5649,0.892731 12.8903,3.94067 12.4446,
 7.25317C 11.9994,10.5666 8.95322,12.8927 5.63794,12.4463C 2.32419,
 12.0019 0,8.95447 0.444702,5.64102C 0.890839,2.32654 3.93753,
 0.000457764 7.25134,0.446381"/>
 <Path Width="5.63623" Height="5.6366" Canvas.Left="3.63184" Canvas.Top="3.6283" Stretch="Fill" views:ColorAdapterExt.FillColorSelector="Color2" Data="F1 M 6.99142,9.26489L 5.90842,9.26489L 5.90842,6.98758L 3.63184,
 6.98758L 3.63184,5.90463L 5.90842,5.90463L 5.90842,3.6283L 6.99142,
 3.6283L 6.99142,5.90463L 9.26807,5.90463L 9.26807,
 6.98758L 6.99142,6.98758L 6.99142,9.26489 Z"/>
 </Canvas></ControlTemplate>

然后在Silverlight页面中,我需要的是下面的XAML来创建我的按钮:

隐藏复制代码
<Buttonx:Name="SelectButton"HorizontalAlignment="Center"VerticalAlignment="Center"Style="{StaticResource TwoColorChangeButton}"Background="Transparent"><ContentControlTemplate="{StaticResource ButtonContent_Plus2}"/><Button.RenderTransform><ScaleTransformScaleX="4"ScaleY="4"/></Button.RenderTransform></Button>

Points of Interest

我只使用了两种颜色,只改变了 <font face="Courier New">Fill</font> 路径的颜色代码设置为 <font face="Courier New">Shape</font> 可以在内容中使用。 这里技术可以用于许多不同的值 <font face="Courier New">DependencyProperties</font> 一个例子可以控制列中列或者宽度的高度 <font face="Courier New">Grid</font> 这些属性的类型如下 <font face="Courier New">GridLength</font> 因这里,不能由动画控制,但是使用像这样的适配器,它是可以能的。

历史记录

  • 第五 2011年05月: 初始帖子


文章标签:控制  SUP  vis  动画  animations  Visualstatemanager  

Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语