Windows 8.1 RT XAML 中的可点击图像答案

【问题标题】：Clickable image in Windows 8.1 RT XAMLWindows 8.1 RT XAML 中的可点击图像
【发布时间】：2015-02-26 08:33:03
【问题描述】：

我想做一个图片按钮。带有默认状态的图像和按下状态的不同图像。没有其他按下的亮点。

我该如何实现？

【问题讨论】：

标签： windows xaml windows-phone-8.1 winrt-xaml

【解决方案1】：

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

首先，我在我的项目中添加了两张图片。

普通.png

Pressed.png

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

<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 会处理这个问题。我在VisualState 中添加了Storyborad，命名为Pressed，只需切换ImageBrush 即可更改Border 的背景。简单！

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

<Button Style="{StaticResource ImageButtonStyle}" />

【讨论】：

【解决方案2】：

您可以使用 Image 控件的“PointerPressed”和“PointerReleased”事件来执行此操作并更改每个中的 Source 属性。这样会导致图片闪烁，可以通过查看Link来解决这个问题

【讨论】：