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

尝试使用更改按钮的controltemplate / style。这将允许您更改按钮的外观，但保留用户从按钮所期望的所有行为。 XAML能够做到这一点的最大好处之一。

所以在手机页面添加一个按钮，然后在设计师右侧选择文档大纲转到你要重新设置的按钮，右键单击按钮，在模板<下/ em>选择编辑副本... 。您现在可以为样式命名并将其添加到页面资源。现在只需按下 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>  </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

创建自定义Windows Phone按钮

1 个答案: