UWP 按钮按下图像

Question

我正在开发针对手机和平板电脑的 UWP 应用，目前正在实现使用相机拍照的功能。

我在相机预览上放置了一个按钮控件，并使用一个图标来表示该按钮（参见下面的 XAML 代码）。

我的问题是，当我按下按钮时，它变成了一个半透明的灰色方块，与我用作图标的绿色圆圈相去甚远。

按下按钮时如何使用其他图标

<Grid >
    <!--Camera preview-->
    <CaptureElement Name="PreviewControl" Stretch="Uniform"/>

    <Button Tapped="btnCancel_Tapped" Name="btnCancel" Margin="5,0,0,10" HorizontalAlignment="Left" VerticalAlignment="Bottom" Height="50" Width="65">
        <Button.Background>
            <ImageBrush ImageSource="/Assets/images/btn_cancel.png">
            </ImageBrush>
        </Button.Background>
    </Button>
    <Button HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,5" Name="btnPhoto" Tapped="btnPhoto_Tapped" IsEnabled="False" Width="70" Height="70">
        <Button.Background>
            <ImageBrush ImageSource="/Assets/Images/btn_takepicture_off.png">
            </ImageBrush>
        </Button.Background>
    </Button>

</Grid>

Answer 1

如果我是你，我会在 Button 的模板中制作该图像。它不仅会摆脱不需要的现有 elements/looks 按钮（例如它们的灰色方块），还可以让您轻松地赋予它一些行为，例如当您将鼠标悬停/按下它时它会做什么。

要以最简单的方式执行此操作，请将以下内容粘贴到您的 <Button></Button> 中：

    <Button.Template>
        <ControlTemplate TargetType="Button">
            [[Anything you want your button to be made of goes here]]
        </ControlTemplate>
    </Button.Template>

在我标记的区域 [[任何你想要的按钮都在这里]]" 你现在可以准确地构建你想要的按钮从 <Grid/> 到 <Image/> 到 <Ellipse/> 或 <Rectangle/>

等简单的部分

Answer 2

要在按下时设置图像，您需要编辑按钮模板并编辑 "pressed" 状态

只需在页面资源中添加此代码并编辑图像路径：

<Style x:Key="ButtonStyle1" TargetType="Button">

            <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
            <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
            <Setter Property="BorderBrush" Value="{ThemeResource SystemControlForegroundTransparentBrush}"/>
            <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}"/>
            <Setter Property="Padding" Value="8,4,8,4"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="VerticalAlignment" Value="Center"/>
            <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
            <Setter Property="FontWeight" Value="Normal"/>
            <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
            <Setter Property="UseSystemFocusVisuals" Value="True"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerUpThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <ImageBrush ImageSource="SET YOUR IMAGE HERE.jpg"/>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <PointerDownThemeAnimation Storyboard.TargetName="RootGrid"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="RootGrid">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ContentPresenter">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}"/>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

并将此样式应用于您的按钮：

Button Style="{StaticResource ButtonStyle1}"

Answer 3

单击后更改按钮图片时我使用以下代码：

添加以下 USING 语句：

使用系统；使用 Windows.UI.Xaml.Media.Imaging;

在点击事件中，添加这段代码：

        PicA.Source= new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/6.png", UriKind.Absolute) };

<--- PicA 表示图像（来自工具箱），6.png 是我资产文件夹中的新图片。

如果您稍后需要将图片替换回原始图片，只需 copy/paste 上面的代码并将图片名称（6.png 更改为任何内容）即可。

Johnny Smith - 英国设得兰群岛

Answer 4

这是另一个使用 TAPPED 事件的例子：

private void MyBox_Tapped(object sender, TappedRoutedEventArgs e)
{
    var image = sender as Image;
    var bitmapImage = image?.Source as BitmapImage;
    if (bitmapImage != null)
    {
        var source = bitmapImage.UriSource.LocalPath;
        if (source == "/Assets/Green1 (Custom).png")
        {
            MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Red1 (Custom).png", UriKind.Absolute) };

        }
        else if (source == "/Assets/Red1 (Custom).png")
        {
            MyBox.Source = new BitmapImage() { UriSource = new Uri("ms-appx:///Assets/Green1 (Custom).png", UriKind.Absolute) };

        }
    }

<--- 上面的代码允许交换两个图像（在大量 IF 语句上没有限制 - 无穷无尽！）。您需要做的就是在每个 'MyBox' 语句之后添加您的代码，以执行此后您的编程需要的任何事情。

如果你结合我之前的回复使用按钮点击事件，那么只需要添加上面列出的代码——意味着一次按钮点击可以用来完成很多任务，也可以使用很多不同的图像。范围是无止境的，因为您可以在整个编码过程中在此后的每个编码段中使用无限的 IF 语句。希望对大家有帮助... Johnny

Answer 5

您还可以使用 NuGet 上提供的 WintRT 工具包：

https://www.nuget.org/packages/winrtxamltoolkit/

在此工具包中，您可以使用 ImageButton，它是一个自定义按钮控件，可以使用一到三个图像来表示按钮的不同状态：正常、悬停、按下、禁用）。

这是XAML用法示例：

<toolkit:ImageButton NormalStateImageSource="ms-appx:///Assets/normal_button_state.png"
                     PressedStateImageSource="ms-appx:///Assets/pressed_button_state.png"/>

记得在页面顶部添加 using xmlns:

xmlns:toolkit ="using:WinRTXamlToolkit.Controls"

UWP 按钮按下图像

UWP Button pressed image

xaml

windows-phone

windows-10

windows-10-mobile

uwp