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>

###圆形按钮设置

来源：oschina

链接：https://my.oschina.net/u/114127/blog/112715