Windows 8.1 RT XAML 中的可点击图片

Question

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

我该如何实现？

Answer 1

您可以使用图像控件的 "PointerPressed" 和 "PointerReleased" 事件来执行此操作并更改每个事件中的源属性。这会使图像闪烁，所以你可以通过检查这个来解决这个问题Link

Answer 2

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

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

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

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

中完成了

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

Windows 8.1 RT XAML 中的可点击图片

Clickable image in Windows 8.1 RT XAML

windows

xaml

winrt-xaml

windows-phone-8.1