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

要按下设置图像，您需要编辑按钮模板并编辑“按下”状态

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

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

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

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

中

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

在我标记＆＃34; [[您想要制作按钮的任何内容]到此处的区域]]＆＃34; 您现在可以构建您想要按钮的外观与从<Grid/>到<Image/>的任何内容一样，到<Ellipse/>或<Rectangle/>等简单部分

Answer 3

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

添加以下使用声明：

使用System; 使用Windows.UI.Xaml.Media.Imaging;

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

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

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

如果您需要稍后将图像替换回原始图像，则只需复制/粘贴上述代码并将图片名称（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) };

        }
    }

＆lt; ---上面的代码允许两个图像的互换（在多个IF语句上无限制 - 无穷无尽！）。您需要做的就是在每个'MyBox'语句之后添加您的编码，以执行您之后编程所需的任何操作。

如果您通过使用按钮单击事件组合我之前的回复，则只需添加上面列出的编码 - 这意味着单击按钮可用于执行许多任务，并且还可以使用许多不同的图像。范围是无穷无尽的，因为您可以在编码的每个部分中使用无限的IF语句。希望这能帮助你们...约翰尼

Answer 5

您还可以使用NuGet上提供的WintRT ToolKit：

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

以下是XAML使用示例：

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

请记住在页面顶部使用xmlns添加：

xmlns:toolkit ="using:WinRTXamlToolkit.Controls"

UWP按钮按下图像

5 个答案: