WPF/Silverlight 控件的基本组成

lovnet

浏览: 6704798 次
性别:
来自: 武汉

最近访客更多访客>>

u012363178

jx_colin

MauerSu

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7414)

社区版块

存档分类

2013-03 ( 20)
2013-02 ( 53)
2013-01 ( 90)
更多存档...

WPF Silverlight Blend .net HTML

WPF/Silverlight 的控件实现分逻辑和模板两个部分：以 Button 控件为例，如下图所示，他们之间通过 DataBinding 来协作。

上图来自：http://www.wpftutorial.net/Templates.html

每个控件都有一个默认模板，以展示控件的基本外观。我们在Blend中，选中控件，在右键菜单中点击，编辑模板 --》编辑副本。如下图，然后查看Xaml文件，我们就可以看到这个控件的默认模板Xaml代码。

对于控件模板的定义，有两种方式。

一种是： Styling (Styles)。

对控件作一些小的视觉改变，比如：背景，字体等。

一个简单例子：

Grid>
  Grid.Resources>
    Style x:Key="ButtonStyle" TargetType="Button">
      Setter Property="Foreground" Value="Gray"/>
      Setter Property="Background" Value="Purple"/>
      Setter Property="FontStyle" Value="Italic"/>
      Setter Property="FontFamily" Value="Cool.tff#Cool"/>
    Style>
  Grid.Resources>
  Button Width="100" Height="50"
     Style="{StaticResource ButtonStyle}" 
     Content="Button" />
Grid>

更多样式的知识可以参看下面这篇我的博客： Silverlight 样式

另外一种是：Skinning (Control Templates)

Control Templates 可以不改变控件基本行为前提下，重新定义控件的全部视觉树(Visual Tree)，以替换原先默认的视觉树(Visual Tree)。

Control Templates 又包括两部分：

look（外观），具体的展示外形。
feel（感觉），指一些改变发生时，交互的响应性。例如，在按下时、得到焦点时、失去焦点时、处于按下的状态时、处于不可用（disabled）状态时、内中有东西被选中时等等，它是如何反应的。我们经常地在用户象这样与控件做交互时，要执行动画效果。

先看look（外观）的一个简单例子：

Grid>
  Grid.Resources>
    <!-- Button Template -->
    ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
      Grid>
	 Path Data="M204,230 C208.84642,220.30716 211.16937,182.25732 225,
		  181 C248.57742,178.8566 242.08521,174.47534 258,201 C285.81909,173.18089 
		  251.23732,170 304,170 C317.57971,170 346.71796,167.80339 325,204 C338.91797,
		  201.68034 353.5448,203 368,203 C376.44458,203 377.05286,204.36786 370,222 
		  C359.54306,248.14235 356.68863,237 327,237 C331.94324,246.88651 338,251.45328 
		  338,263 C338,273.60532 336.69473,276.65265 326,282 C310.42996,289.78503 287,
		  287.73874 287,251 C281.99072,255.00742 234.25241,285.26208 229,259 C226.8019,
		  248.00948 241.02324,242.00388 223,239 C203.01422,235.66904 215.56958,244.12169 204,230 z" 
		Fill="{TemplateBinding Background}" Stretch="Fill" Stroke="#FFF77474" />
			  
         ContentPresenter Margin="30"/>
      Grid>
     ControlTemplate>
  Grid.Resources>

  <!-- Button -->
  Button Content="Button" 
          Template="{StaticResource ButtonTemplate}" Width="100" Height="80" Margin="263,202,277,198">
    Button.Background>
      RadialGradientBrush>
        GradientStop Color="#FFF4A1A1"/>
        GradientStop Color="#FFBD2121" Offset="1"/>
      RadialGradientBrush>
    Button.Background>
  Button>
Grid>

执行效果截图：

上面的Xaml 文件中，我们可以看到Control Templates和控件逻辑的数据绑定，是通过下面几种方式进行的

使用 {TemplateBinding} 来进行控件的属性和模板的数据绑定；
使用 ContentPresenter 和 ItemsPresenter 来进行控件内容和模板的数据绑定；

你可以在上面例子看到，我们的按钮控件现在拥有一个比较好看的外观。尽管它有了一个新的外观，但按钮依然象以前那样触发同样的焦点，点击，和悬浮事件。所以，使用按钮的开发人员在使用了我们的新控件模板的按钮后，不用改动任何代码，就可以修改外观。

但我们的新按钮控件模板的一个缺点是，它并不是交互的。这意味着，如果按钮获得/失去焦点，或者鼠标悬浮其上时，我得不到任何视觉反馈。点击时，我也得不到很好的按下/弹起的动画效果。这就涉及到 feel（感觉）。

对于 Control Templates 来说，feel（感觉），就是控件的状态变化时，在人机交互上如何给予体现。一般是通过用户定义的一个个动画来展示的。管理这些状态变化的就叫：Visual State Manager。

Visual State Manager (VSM-视觉状态管理器)包括2个部分：

Visual States (视觉状态)，例如，按钮这样的控件为自己定义了多个视觉状态： Normal（正常）, MouseOver（鼠标在此之上）, Pressed（按下）, Disabled（不可用）, Focused（获取焦点）, Unfocused（不具焦点）。
Visual Transitions （视觉转换过度），

以 Button 为例，在 Blend 中如果我们修改 Button 默认的 Control Templates 时，会看到它有以下几种状态及状态分组。

下面是按钮的默认模板时，FocusStates 状态组的 Xaml 代码。

VisualStateGroup x:Name="FocusStates">
	VisualState x:Name="Focused">
		Storyboard>
			DoubleAnimationUsingKeyFrames Storyboard.TargetName="FocusVisualElement" Storyboard.TargetProperty="Opacity">
				SplineDoubleKeyFrame KeyTime="0" Value="1"/>
			DoubleAnimationUsingKeyFrames>
		Storyboard>
	VisualState>
	VisualState x:Name="Unfocused"/>
VisualStateGroup>

上述写法表示：

同一状态组内是互斥的几个状态，即，上面例子中，按钮只能是获得焦点或者没有获得焦点状态之一，不能同时是这两个状态。
VisualState 类具有更改控件外观的 Storyboard 属性。控件进入 VisualState.Name 属性指定的状态时，Storyboard 开始。控件退出该状态时，Storyboard 停止。上面例子中，当按钮获得焦点时，FocusVisualElement 的 Opacity 变成 1。这时候的状态过度相当于下面选择的那个。