【Windows phone 8】控件模板

【效果】

【代码】

<Style x:Key="CircleButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <Border x:Name="Button_RootElement" Width="100" Height="100" RenderTransformOrigin="0.5,0.5" CornerRadius="50 0 50 50">
                            <!--Border变换-->
                            <Border.RenderTransform>
                                <CompositeTransform x:Name="BorderRotation" Rotation="0"></CompositeTransform>
                            </Border.RenderTransform>
                            <!--VisualStateGroups-->
                            <VisualStateManager.VisualStateGroups>
                                <!--VisualStateGroup-->
                                <VisualStateGroup x:Name="CommonStates">
                                    <!--变换-->
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition From="Normal" To="Pressed" GeneratedDuration="0:0:0.5"></VisualTransition>
                                        <VisualTransition From="Pressed" To="Normal" GeneratedDuration="0:0:0.5"></VisualTransition>
                                    </VisualStateGroup.Transitions>
                                    <!--状态-->
                                    <VisualStateGroup.States>
                                        <VisualState x:Name="Normal"></VisualState>
                                        <!--按下旋转360度-->
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="BorderRotation" Storyboard.TargetProperty="Rotation" To="360"></DoubleAnimation>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup.States>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>

                            <Border.Background>
                                <SolidColorBrush Color="#cccccc"></SolidColorBrush>
                            </Border.Background>
                            <!--边框颜色设置.-->
                            <Border.BorderBrush>
                                <SolidColorBrush x:Name="BorderBrush" Color="Black"/>
                            </Border.BorderBrush>

                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                         VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

按键按下旋转360度（0.5秒内完成），松开逆向旋转360度（0.5秒内完成）