Windows Phone Button控件樣式自定義

##概述 Button是各類手機平臺中最重要的控件之一，咱們與系統的大部分交互都會經過按鈕進行，在Android和iOS中都提供了很方便的按鈕自定義方式，Android能夠採用selector背景選擇器進行按鈕狀態控制，iOS中則更簡單，提供了Default，Highlight，Selected，Disable四種狀態進行設置，而且能夠進行背景、圖片、標題，整個內容框的自定義，在WindowsPhone中則相對要複雜一些，由於Button在默認的屬性中並無直接提供與狀態相關的屬性進行設置，可是提供了樣式的方式進行修改。

###分析Button默認Style 下面是Windows Phone 8 按鈕的默認樣式 前面幾個屬性都是常見的屬性，Background(按鈕背景),BorderBrush(按鈕邊框),Foreground(前景),BorderThickness(邊框粗細), FontFamily(字體樣式),FontSize(字體大小),Padding(間距).

在Template的設置裏首先設置了按鈕控件的可視狀態，在Windows Phone裏按鈕狀態分爲四種，Normal 默認狀態，MouseOver 鼠標指針懸停在控件上，Pressed 控件已按下，Disabled 控件被禁用，都是隸屬於CommonStates的VisualStateGroup。

在VisualState 包含 Storyboard，用於更改 ControlTemplate 中的元素的外觀，在控件進入VisualState指定的狀態時，Storyboard開始，控件退出狀態時Storyboard結束，這個特性能夠給按鈕的狀態加入一些動畫等特殊效果。 在VisualStateGroups後設置的是內容模板，這裏主要控制按鈕的外觀樣式，好比將按鈕修改爲圓形，或者其餘形狀。

<!-- lang: xml -->
   <Style x:Key="ButtonStyle1"
           TargetType="Button">
        <Setter Property="Background"
                Value="Transparent" />
        <Setter Property="BorderBrush"
                Value="{StaticResource PhoneForegroundBrush}" />
        <Setter Property="Foreground"
                Value="{StaticResource PhoneForegroundBrush}" />
        <Setter Property="BorderThickness"
                Value="{StaticResource PhoneBorderThickness}" />
        <Setter Property="FontFamily"
                Value="{StaticResource PhoneFontFamilySemiBold}" />
        <Setter Property="FontSize"
                Value="{StaticResource PhoneFontSizeMedium}" />
        <Setter Property="Padding"
                Value="10,5,10,6" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver" />
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneAccentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                       Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush"
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="{StaticResource PhoneDisabledBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background"
                                                                       Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0"
                                                                    Value="Transparent" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ButtonBackground"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                CornerRadius="0"
                                Margin="{StaticResource PhoneTouchTargetOverhang}">
                            <ContentControl x:Name="ContentContainer"
                                            ContentTemplate="{TemplateBinding ContentTemplate}"
                                            Content="{TemplateBinding Content}"
                                            Foreground="{TemplateBinding Foreground}"
                                            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                            Padding="{TemplateBinding Padding}"
                                            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

###圓形按鈕設置