WinRT: 體驗ControlTemplate – 定義一個簡單的Button控制項範本

 

僅僅是一種非常簡單的Button控制項範本。不過顏色變化都是漸層的。Foreground，Background和Border設定和普通Button一樣，滑鼠指向時高亮色，點擊後顏色和IsEnabled為False的顏色可以通過修改XAML資源，定義在BtnPressed，BtnHighlighted和BtnDisabled資源中。當Button.IsEnabled為False時，Background變成Transparent，然後Foreground和BorderBrush會被設定成BtnDisabled資源定義的顏色。

 

色彩坡形的時間可以通過修改VisualStateGroup.Transitions內預設VisualTransition的GeneratedDuration屬性。

 

總體來說WinRT中的控制項範本類似WPF4（和WPF4以前還是有較多差別的，那時沒有VisualStateManager這些東西）和Silverlight的。但是也有一些小細節，比如WPF4中VisualStateGroup和VisualState都有Name屬性。而在Silverlight和WinRT中必須使用x:Name。還有WPF和Silverlight中Button的CommonStates中的滑鼠指向狀態名稱是MouseOver，但是在WinRT該名稱是PointerOver。（Pointer在WinRT中完全覆蓋了Mouse這個名詞，因為WinRT是支援案頭和平板的架構，因此使用Pointer這個抽象概念來代表任何滑鼠或者觸控螢幕的操作）

 

XAML代碼：

<!-- 需要的顏色定義 -->

<Color x:Key="BtnPressed">Black</Color>

<Color x:Key="BtnHighlighted">Gray</Color>

<Color x:Key="BtnDisabled">Gray</Color>

 

<!-- MyButtonStyle -->

<Style x:Key="MyButtonStyle" TargetType="Button">

    <Setter Property="Padding" Value="10"/>

    <Setter Property="Background" Value="Transparent"/>

    <Setter Property="Template">

        <Setter.Value>

            <ControlTemplate TargetType="Button">

                <Border Background="{TemplateBinding Background}"

                       BorderBrush="{TemplateBinding BorderBrush}"

                       BorderThickness="{TemplateBinding BorderThickness}"

                       Name="border">

                   

                    <ContentPresenter Margin="{TemplateBinding Padding}" Name="content"/>

 

                    <VisualStateManager.VisualStateGroups>

                        <VisualStateGroup x:Name="CommonStates">

                            <VisualState x:Name="Normal"/>

                            <VisualState x:Name="PointerOver">

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"

                                                   Duration="0" To="{StaticResource BtnHighlighted}"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Pressed">

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"

                                                   Duration="0" To="{StaticResource BtnPressed}"/>

                                </Storyboard>

                            </VisualState>

                            <VisualState x:Name="Disabled">

                                <Storyboard>

                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"

                                                   Duration="0" To="Transparent"/>

                                    <ColorAnimation Storyboard.TargetName="border" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)"

                                                   Duration="0" To="{StaticResource BtnDisabled}"/>

                                    <ColorAnimation Storyboard.TargetName="content" Storyboard.TargetProperty="(ContentControl.Foreground).(SolidColorBrush.Color)"

                                                   Duration="0" To="{StaticResource BtnDisabled}"/>

                                </Storyboard>

                            </VisualState>

                           

                            <VisualStateGroup.Transitions>

                                <VisualTransition GeneratedDuration="0:0:0.5"/>

                            </VisualStateGroup.Transitions>

                        </VisualStateGroup>

                    </VisualStateManager.VisualStateGroups>

                </Border>

            </ControlTemplate>

        </Setter.Value>

    </Setter>

</Style>