Question

我想制作一个图片按钮。使用默认状态的图像和按下状态的不同图像。没有其他突出的亮点。

我该如何实现？

Answer 1

您可以通过为Button控件定义自己的样式来实现这一目标。我会告诉你我的榜样。

首先，我在项目中添加了两个图像。

Normal.png
normal button image

Pressed.png
enter image description here

然后，我根据默认的Button样式在 App.xaml 文件中定义了新样式。

<Application.Resources>
    <ImageBrush x:Name="ImageButtonNormal" ImageSource="Assets/ImageButton/Normal.png" />
    <ImageBrush x:Name="ImageButtonPressed" ImageSource="Assets/ImageButton/Pressed.png" />
    <Style x:Key="ImageButtonStyle" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Grid x:Name="Grid" Background="Transparent">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver"/>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ImageButtonPressed}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="Border" 
                                Background="{StaticResource ImageButtonNormal}" >
                            <ContentPresenter x:Name="ContentPresenter" 
                                              AutomationProperties.AccessibilityView="Raw" 
                                              ContentTemplate="{TemplateBinding ContentTemplate}" 
                                              Content="{TemplateBinding Content}" 
                                              Foreground="{TemplateBinding Foreground}" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Margin="{TemplateBinding Padding}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Application.Resources>

如您所见，我已为2个按钮状态定义了2个ImageBrush个对象。按钮的外观定义为Border，带有一些内容。我们想要更改Border的背景。 VisualStateGroups将处理此问题。我在名为Storyborad的{{1}}中添加了VisualState，仅通过切换Pressed来更改Border的背景。简单！

您要做的最后一件事是将新样式应用于XAML中的ImageBrush。我是在 MainPage.xaml 中完成的。

Button

Answer 2

您可以使用＆＃34; PointerPressed＆＃34;和＆＃34; PointerReleased＆＃34; Image控件的事件来执行此操作并更改每个事件中的Source属性。这将使图像闪烁，因此您可以通过选中此Link

来解决此问题

Windows 8.1 RT XAML中的可单击图像

2 个答案: