Windows 8 metro app XAML - 单击时自定义按钮会闪烁吗？

Question

所以从this免费软件，我可以自己做我自己的地铁按钮，如下所示：

图标是白色的，所以可能看不到它，我把它放在我的网格（用XAML编写）中：

技术上仍然是一个图像，所以我把它变成了Button，这里是一个转换成图像到按钮的代码：

<Button x:Name="Button_CreateAccount" Content="" HorizontalAlignment="Center" Height="65" Margin="0" Style="{StaticResource Button_CreateAccount}" Width="65" Click="Button_CreateAccount_Clicked"/>

请参阅我将其命名为“Button_CreateAccount”，添加一个Clicked事件处理程序“Button_CreateAccount_Clicked”，并使用自定义样式“{StaticResource Button_CreateAccount}”

它按照我的预期工作，但与其他任何按钮不同，它在按下时不会闪烁并在释放时释放闪烁，可能是因为它在技术上是一个图像。因此，我认为通过改变其风格，我可以通过编程方式使其“眨眼”。这是Blend在Visual Studio 2012中自动添加的未编辑样式：

<Style x:Key="Button_CreateAccount" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Pressed"/>
                                <VisualState x:Name="Disabled"/>
                                <VisualState x:Name="PointerOver"/>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused"/>
                                <VisualState x:Name="PointerFocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

但是，我不会说XAML语言:(我不知道如何在按下后如何简单地改变图像背景的颜色。任何帮助都会深深感激，谢谢！

Answer 1

首先，您应该使图像具有透明背景而不是绿色背景。之后不要使用你的风格并将你的按钮更改为

<Button x:Name="Button_CreateAccount" HorizontalAlignment="Center" 
        Height="65" Margin="0" Width="65" Click="Button_CreateAccount_Clicked"
        Background="Green">
    <Image Source="Assets/Icons_White/add_user.png" Stretch="Fill"/>
</Button>

从这里开始，按下时您将看到颜色发生变化。如果要更改颜色，请为按钮指定新样式。最好的方法是使用Visual Studio或Blend并右键单击Button（在设计视图或文档大纲中）并选择Edit Template - ＆gt;编辑副本......

更改按下的VisualState中的颜色，以便在按下按钮时更改颜色。

<VisualState x:Name="Pressed">
    <Storyboard>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0">
                <DiscreteObjectKeyFrame.Value>
                    <SolidColorBrush Color="Blue"/>
                </DiscreteObjectKeyFrame.Value>
            </DiscreteObjectKeyFrame>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>