Silverlight2 边学边练 之七 模板与状态

概述感觉书里讲的模板好复杂，看的我一头雾水。书中说常规Button组件的模板程序 打印出来需要4张纸那么多（恐怖～）。看来想利用好模板这东东还真不是件易事。 言归正传，本篇也以按键为例来练习模板（Template）与状态（State）相关知识。 首先要了解一下Button的状态，Button一共有2个状态组、6种状态： CommonStates：Normal、MouseOver、Pressed、Dis

感觉书里讲的模板好复杂，看的我一头雾水。书中说常规button组件的模板程序
打印出来需要4张纸那么多（恐怖～）。看来想利用好模板这东东还真不是件易事。
言归正传，本篇也以按键为例来练习模板（Template）与状态（State）相关知识。

首先要了解一下button的状态，button一共有2个状态组、6种状态：
CommonStates：normal、MouSEOver、pressed、Disabled
Focusstates：Focused、Unfocused
下面来了解一下如何利用这些状态为button设定模板，先看Demo效果：

XAML Code：

<UserControl x:Class="TemplateTest.Page"      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"       WIDth="400" Height="120">      <!--创建Resource-->      <UserControl.Resources>          <!--创建button模板-->          <ControlTemplate x:Key="buttonTemplate" targettype="button">              <!--设置RendertransformOrigin以button中心为变形原点-->              <GrID RendertransformOrigin="0.5,0.5">                  <!--默认GrID缩放比例为1：1-->                  <GrID.Rendertransform>                      <Scaletransform x:name="Scaletransform" ScaleX="1" ScaleY="1">                      </Scaletransform>                  </GrID.Rendertransform>                                    <!--创建VisualState组，共用2个组-->                  <visualstatemanager.VisualStateGroups>                                            <!--组1：常规状态组，共用4个状态-->                      <VisualStateGroup x:name="CommonStates">                          <!--状态1：鼠标从button上移开，从MouSEOver状态转为normal状态-->                          <VisualStateGroup.Transitions>                              <VisualTransition From="MouSEOver" To="normal"                                                 GeneratedDuration="0:0:0.7">                                  <Storyboard>                                      <!--将GrID ScaleX比例从0变为1，即从小变大-->                                      <DoubleAnimationUsingKeyFrames Storyboard.Targetname="Scaletransform"                                                                     Storyboard.TargetProperty="ScaleX">                                          <linearDoubleKeyFrame KeyTime="0:0:0.5" Value="0">                                          </linearDoubleKeyFrame>                                          <linearDoubleKeyFrame KeyTime="0:0:0.7" Value="1">                                          </linearDoubleKeyFrame>                                      </DoubleAnimationUsingKeyFrames>                                  </Storyboard>                              </VisualTransition>                          </VisualStateGroup.Transitions>                                                    <!--状态2：鼠标移动到button上的状态-->                          <VisualState x:name="MouSEOver">                              <Storyboard>                                  <!--button底色变为橙色-->                                  <colorAnimation Duration="0:0:0"                                                   Storyboard.Targetname="buttonBackgroundBrush"                                                   Storyboard.TargetProperty="color"                                                   To="Orange" />                              </Storyboard>                          </VisualState>                                                    <!--状态3：常规状态-->                          <VisualState x:name="normal">                              <Storyboard>                                  <!--button底色变为红色-->                                  <colorAnimation Duration="0:0:0"                                                   Storyboard.Targetname="buttonBackgroundBrush"                                                   Storyboard.TargetProperty="color"                                                   To="Red" />                                  <!--焦点框透明度为0-->                                  <DoubleAnimation Duration="0"                                                    Storyboard.Targetname="FocusVisualElement"                                                   Storyboard.TargetProperty="Opacity"                                                    To="0" />                              </Storyboard>                          </VisualState>                                                    <!--状态4：点击状态-->                          <VisualState x:name="pressed">                              <Storyboard>                                  <!--边框颜色变为黑色-->                                  <colorAnimation Duration="0:0:0"                                                   Storyboard.Targetname="borderBrush"                                                   Storyboard.TargetProperty="color"                                                   To="Black" />                              </Storyboard>                          </VisualState>                      </VisualStateGroup>                                            <!--组2：鼠标点击后的焦点状态，共2个状态-->                      <VisualStateGroup x:name="Focusstates">                                                    <!--状态1：点击状态-->                          <VisualState x:name="Focused">                              <Storyboard>                                  <!--焦点框透明度为1-->                                  <DoubleAnimation Duration="0"                                                    Storyboard.Targetname="FocusVisualElement"                                                   Storyboard.TargetProperty="Opacity"                                                    To="1" />                              </Storyboard>                          </VisualState>                                                    <!--状态2：非点击状态-->                          <VisualState x:name="Unfocused">                              <Storyboard>                                  <!--焦点框透明度0-->                                  <DoubleAnimation Duration="0"                                                    Storyboard.Targetname="FocusVisualElement"                                                   Storyboard.TargetProperty="Opacity"                                                    To="0" />                              </Storyboard>                          </VisualState>                      </VisualStateGroup>                  </visualstatemanager.VisualStateGroups>                                    <!--创建button属性-->                  <border x:name="buttonborder" borderThickness="5" CornerRadius="15">                      <!--边框色-->                      <border.borderBrush>                          <SolIDcolorBrush  x:name="borderBrush"                                             color="Orange"></SolIDcolorBrush>                      </border.borderBrush>                      <!--底色-->                      <border.Background>                          <SolIDcolorBrush  x:name="buttonBackgroundBrush"                                             color="Red"></SolIDcolorBrush>                      </border.Background>                      <!--文字显示部分绑定了button默认模板-->                      <ContentPresenter Content="{TemplateBinding Content}"                                        ContentTemplate="{TemplateBinding ContentTemplate}"                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"                                         margin="0,5,5" />                    </border>                                    <!--鼠标点击后的焦点框-->                  <Rectangle x:name="FocusVisualElement"                              stroke="Black" margin="8" Opacity="0"                             RadiusX="10" RadiusY="10"                              strokeThickness="1" strokeDashArray="1 2"></Rectangle>                </GrID>          </ControlTemplate>                    <!--设定button风格-->          <Style x:Key="buttonStyle" targettype="button">              <!--模板引用上面创建的buttonTemplate模板-->              <Setter Property="Template" Value="{StaticResource buttonTemplate}"></Setter>              <!--文字颜色-->              <Setter Property="Foreground" Value="White"></Setter>              <!--文字大小-->              <Setter Property="FontSize" Value="15"></Setter>          </Style>      </UserControl.Resources>            <!--创建两个button，均引用buttonStyle风格-->      <GrID x:name="LayoutRoot" Background="White" margin="5">          <GrID.RowDeFinitions>              <RowDeFinition Height="auto"></RowDeFinition>              <RowDeFinition Height="auto"></RowDeFinition>          </GrID.RowDeFinitions>          <button margin="5" Content="button One"                   Style="{StaticResource buttonStyle}"></button>          <button GrID.Row="2" margin="5" Content="button Two"                   Style="{StaticResource buttonStyle}" ></button>      </GrID>  </UserControl>

有时看书的上的内容怎么也搞不明白，不知道书里说什么呢。找一些实例 *** 练一下再返回去看书， 便知其所云，毛主席教导我们说：“实践出真知”吗。 本例参考自《Pro Silverlight 2 in C# 2008》CHAPTER 11 STYLES,TEMPLATES,AND CUSTOM CONTRolS

总结

以上是内存溢出为你收集整理的Silverlight2 边学边练 之七 模板与状态全部内容，希望文章能够帮你解决Silverlight2 边学边练 之七 模板与状态所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。