Xaml UWP按钮按下图像

我正在开发一款针对手机和平板电脑的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>

---

如果我是你，我会在按钮模板内制作该图像。 它不仅可以消除按钮不需要的现有元素/外观（例如它们是灰色的正方形），还可以让您轻松地为其提供行为，例如当您将鼠标悬停在按钮上/按下按钮时的行为

要以最简单的方式执行此操作，请将以下内容粘贴到

中：

[[任何你想要的按钮都放在这里]]

---

在我标记的区域“[[你想要的任何按钮都可以在这里]]”你现在可以用

到

到

或

等简单的部分来构建你想要的按钮外观。要在按下按钮时设置图像，你需要编辑按钮模板并编辑“按下”陈述

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

<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>

---

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

使用语句添加以下内容：

使用制度； 使用Windows.UI.Xaml.Media.Imaging

在单击事件中，添加以下代码：

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

---

以下是使用抽头事件的另一个示例：

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) };

        }
    }

---

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

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

以下是XAML使用示例：

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

---

问题是关于UWP的，这个控件是用于WinRT应用程序的。还有另一个UWP工具包，作为今天的操作系统，它没有ImageButton控件或类似的控件。这是如何回答这个问题的？OP询问在按下按钮时如何使用另一个（图像）图标。这个答案简单地解释了如何在按钮中放置图像。@Ash，因为导致它显示半透明灰色正方形的行为，正如OP在他的帖子中解释的，是一个问题，与默认按钮模板的状态更改有关；通过删除模板，将其重建为一个精确的目标，他既通过删除导致它的隐藏过程来解决了灰色方块问题，又优化了按钮，使其在视觉上完全符合自己的要求。在回答问题时，重要的是不要只看标题和结论，还要看整篇文章。为了清晰起见，让我重新措辞：如果你能提供更多细节，说明需要进入“[[你想要的任何按钮都在这里]]”来帮助解决“当按下按钮时，我如何使用其他图标？”.你的回答确实触及到了一个可能解决方案背后的理论，很好，只是缺少了确切的实现。

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) };

        }
    }

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

xmlns:toolkit ="using:WinRTXamlToolkit.Controls"