xaml - Windows 8 Metro 应用程序 XAML - 单击时使自定义按钮闪烁？

Question

所以来自 this免费软件，我可以制作自己的地铁按钮，如下所示:



虽然图标是白色的，所以可能看不清它，我把它放在我的网格(用 XAML 编写)中:


从技术上讲它仍然是一个图像，所以我把它变成了按钮，这是将图像转换为按钮的代码:

<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 并右键单击按钮(在设计 View 或文档大纲中)并选择编辑模板 -> 编辑副本...

更改 Pressed 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>