Silverlight 下苹果(Mac OS)风格按钮的实现

您现在的位置：.Net中文社区>> Silverlight>>正文内容

Silverlight 下苹果(Mac OS)风格按钮的实现

发布时间：2008年12月19日点击数：次木野狐(Neil Chen)

在 Silverlight 2 beta 2 下，可以通过 Style 和 ControlTemplate 对控件的观感 (look and feel) 进行定制。并且在最新的 Expression Blend 2.5 June 2008 preview 版本中，可以用可视化的方式来进行设计（一些细微的地方仍然要代码调整），这样就方便多了。

本文介绍如何实现一个 Mac 风格的按钮。先看一下效果：

左边一排是普通按钮，右边一排是 Mac 风格的按钮。其中获得焦点的按钮在视觉上用一圈虚线框表示。

因为 Button 控件开放了一个 Template 属性，我们要做的就是创建一个 Style. 比如叫做 MacButton，然后让按钮实例去套用这个 Style 即可：

而 Style 本质上是用来设置属性值的，Template 也是一个特殊的属性，它是 CcontrolTemplate. 在 Xaml 语法中可以这样写：

所有控件的真实内容都在上面的 "...." 中定义即可。

再介绍一点基础知识
==========================
控件契约 (Control Contract)

Silverlight 2 beta 2 内置的每一种控件都有其自身的契约，我们在为控件创建 Style 时必须符合此契约的要求才能生效。

一般包含3个方面：

1) 属性
2) 控件可能用到的 UIElement. (用 TemplatePartAttribute 标记)
3) VisualState 对象 (用 TemplateVisualState 在控件上标记)

这里 VisualState 很有意思，表示控件的状态。并且状态可以分组，同一个组内的状态可以互相迁移。
比如 Button 有两组状态：一组是“普通”、“鼠标悬停”、“按下”、“禁用”；而另一组是“获得焦点”、“失去焦点”。
两组状态可以同时生效，互不影响。

在 ControlTemplate 内，我们可以定义各个状态以及状态间迁移时的动画 (用一个 Storyboard 定义)，以及状态之间迁移花费多少时间 (Duration) 等。

Button 控件的契约如下：

[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]

[TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]

[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]

[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]

[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]

[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]

public class Button : Control

{

public static readonly DependencyProperty BackgroundProperty;

public static readonly DependencyProperty BorderBrushProperty;

public static readonly DependencyProperty BorderThicknessProperty;

public static readonly DependencyProperty ContentProperty;

public static readonly DependencyProperty ContentTemplateProperty;

public static readonly DependencyProperty FontFamilyProperty;

public static readonly DependencyProperty FontSizeProperty;

public static readonly DependencyProperty FontStretchProperty;

public static readonly DependencyProperty FontStyleProperty;

public static readonly DependencyProperty FontWeightProperty;

public static readonly DependencyProperty ForegroundProperty;

public static readonly DependencyProperty HorizontalContentAlignmentProperty;

public static readonly DependencyProperty PaddingProperty;

public static readonly DependencyProperty TextAlignmentProperty;

public static readonly DependencyProperty TextDecorationsProperty;

public static readonly DependencyProperty TextWrappingProperty;

public static readonly DependencyProperty VerticalContentAlignmentProperty;

public Brush Background { get; set; }

public Brush BorderBrush { get; set; }

public Thickness BorderThickness { get; set; }

public object Content { get; set; }

public DataTemplate ContentTemplate { get; set; }

public FontFamily FontFamily { get; set; }

public double FontSize { get; set; }

public FontStretch FontStretch { get; set; }

public FontStyle FontStyle { get; set; }

public FontWeight FontWeight { get; set; }

public Brush Foreground { get; set; }

public HorizontalAlignment HorizontalContentAlignment { get; set; }

public Thickness Padding { get; set; }

public TextAlignment TextAlignment { get; set; }

public TextDecorationCollection TextDecorations { get; set; }

public TextWrapping TextWrapping { get; set; }

public VerticalAlignment VerticalContentAlignment { get; set; }

}

关于动画的更多知识参考 Silverlight 2 beta 2 文档。

简单说一下创建这个样式的步骤：

在 ExpressionBlend 2.5 中，首先我们往界面上拖一个 Button. 然后在右键菜单中：

选择 "Edit a Copy" 后，就会自动创建一个指定名称的 Style, 其内容是 Button 的默认模板。
因为模板内容非常繁琐，我们如果自己全部手写很困难，所以我们选择在默认模板的基础上修改。

后续的步骤，主要是在模板的控件树中删除掉不必要的内容，并且修改一些画刷等设置，重新定义动画等等。不再一一详述，具体请看代码。
另外这里我发现的一个特别需要注意的问题，就是 Button 默认生成的模板中，其 Unfocused 状态的动画必须删除掉才行：

<vsm:VisualState x:Name="Unfocused">
          <Storyboard>
             
          </Storyboard>
         </vsm:VisualState>

否则，你会发现套用了该风格的所有按钮都无法失去焦点，页面上会出现若干个按钮同时为高亮状态的滑稽情景。

下面是例子的全部代码：

点击展开示例

Silverlight 下苹果(Mac OS)风格按钮的实现

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新