创建自定义 Windows Phone 按钮

Question

我在我的 WP 应用程序中创建了一个自定义按钮。我想让它看起来像一个标准的 windows phone 8 按钮。 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>

事件处理程序的代码

private void btnCancle_ManipulationStarted(object sender, System.Windows.Input.ManipulationStartedEventArgs e)
    {
        Brush br = (Brush)Application.Current.Resources["PhoneAccentBrush"];
        ellipseCancle.Fill = br;

    }

private void btnCancle_ManipulationCompleted(object sender, System.Windows.Input.ManipulationCompletedEventArgs e)
    {
        Brush br = (Brush)Application.Current.Resources["PhoneBackgroundBrush"];
        ellipseCancle.Fill = br;            
    }

我的问题是，当我单击按钮时，在按钮充当正常按钮之前会有一点延迟。（背景更改为 PhoneAccentColor 并返回）。只要我触摸它，背景颜色就不会改变。但经过一两次尝试后，它表现正常。我正在编写代码以在 Tap 事件处理程序中执行该按钮的操作。但是一旦用户触摸它，我就需要让它像普通按钮一样工作。我做错了什么，我能做些什么来解决它？请帮忙..提前谢谢..

Answer 1

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

添加一个按钮到您的手机页面，然后在设计器的右侧选择 文档大纲 转到您要重新设置样式的按钮，右键单击该按钮，在 模板 选择编辑副本...。您现在可以命名样式并将其添加到页面资源中。现在只需在 VisualStateManager.Groups 下方找到绘制按钮的源代码，您可以将其替换为您的代码：

<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