Windows phone 8 创建自定义Windows Phone按钮

我在我的WP应用程序中创建了一个自定义按钮。我想让它看起来像一个标准的WindowsPhone8按钮。 XAML代码

<Grid Name="btnCancle" Height="76" Width="76"  Margin="24" ManipulationStarted="btnCancle_ManipulationStarted" ManipulationCompleted="btnCancle_ManipulationCompleted" >
                    <Ellipse Name="ellipseCancle" Grid.Row="2" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" />
                    <Canvas x:Name="appbar_close" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
                        <Path Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
                    </Canvas>
</Grid>

---

我的问题是，当我单击按钮时，在按钮作为正常按钮之前有一个轻微的延迟。（背景变为PhoneAccentColor和back）。我一接触背景色就不会改变。但在一次或两次尝试后，它的行为正常。我正在编写代码来执行Tap事件处理程序中该按钮的操作。但我需要让它在用户触摸它时像普通按钮一样工作。我做错了什么？我能做些什么来修复它？请帮忙。。提前感谢。

尝试使用更改按钮的控件模板/样式。这将允许您更改按钮的外观，但保留用户期望按钮的所有行为。XAML最大的优点之一就是能够做到这一点

因此，在手机页面上添加一个按钮，然后在designer的右侧选择Document Outline转到要重新设置样式的按钮，右键单击该按钮，在Template下选择Edit a Copy。。。。现在可以命名样式并将其添加到页面资源中。现在只需大声呼叫VisualStateManager。您将找到绘制按钮的源代码，您可以用代码替换它：

<phone:PhoneApplicationPage.Resources>
    <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="Fill" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ButtonBackground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="ContentContainer">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" 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>
                        <Ellipse Name="ButtonBackground" Grid.Row="2" Fill="{TemplateBinding Background}" Stroke="{StaticResource PhoneForegroundBrush}" StrokeThickness="3" Height="76" Width="76" />
                        <Canvas Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
                            <Path x:Name="ContentContainer"  Width="31.6666" Height="31.6667" Canvas.Left="22.1666" Canvas.Top="22.1667" Stretch="Fill" Fill="{StaticResource PhoneForegroundBrush}" Data="F1 M 26.9166,22.1667L 37.9999,33.25L 49.0832,22.1668L 53.8332,26.9168L 42.7499,38L 53.8332,49.0834L 49.0833,53.8334L 37.9999,42.75L 26.9166,53.8334L 22.1666,49.0833L 33.25,38L 22.1667,26.9167L 26.9166,22.1667 Z "/>
                        </Canvas>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    </phone:PhoneApplicationPage.Resources>

下面是按钮的外观。注意，样式设置为您刚刚创建的控件模板

    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}"/>

---

HTH

按钮的视觉外观很棒。它起作用了。但当我在模拟器中运行应用程序时，我得到一个未处理的异常。原因可能是什么？@KasunKV原因是视觉状态会尝试根据按钮模板的名称设置按钮，请参阅我的更新，它会将自定义按钮的颜色设置为与正常按钮在按下时的行为相同的颜色。

    <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource ButtonStyle1}"/>