XAML UWP将背景放在自定义按钮上

Question

在XAML UWP应用程序上，我拥有一个扩展Button的类。 我已经设置了背景ImageBrush。

我的问题是，当我的按钮获得焦点或发生鼠标悬停事件时，我的按钮上会出现一个带有黑色边框的灰色矩形。

我试过了 一击 许多解决方案，从更改前景到在各种事件（ gotFocus ， mouseEntered ， mouseover ）上修改FocusVisualPrimary / SecondaryBrush。 什么都没做，最好的结果是设置button.Background = "originalBitmapImage"在mouseover事件上我设置了button.Background = "originalBitmapImage" （我创建了一个与原始背景具有相同图像路径的新ImageBrush，然后将其归因于BackGround），但是当触发mouseover（每次都重新加载新图像）。

这是显示问题的图片（左：普通按钮，右：鼠标悬停相同的按钮）：

我想在两种情况下保持相同的图像，但是我对如何执行此操作有些困惑。

public class MyButton : Button 
{

private static string Image_path = "ms-appx:///assets/Button.png";

        public MyButton()
        {

            ImageBrush brush = new ImageBrush()
            {
                ImageSource = new BitmapImage(new Uri(MyButton.Image_path))
            };
            this.Background = brush;

            this.PointerEntered += a;

        }

        // This almost work, but the image is flickering when event is fired
        private void a(object sender, PointerRoutedEventArgs e)
        {
            ImageBrush brush = new ImageBrush()
            {
                ImageSource = new BitmapImage(new Uri(MyButton.Image_path))
            };
            //this.Foreground = brush;
            this.Background = brush;
        }
}

Answer 1

我们可以复制Button的默认样式，然后可以在Template编辑VisualState的PointerOver 。

从默认样式开始，它将ButtonBackgroundPointerOver ThemeResource设置为PointerOver VisualState中按钮的Background 。 因此，我们可以在页面资源中定义ButtonBackgroundPointerOver ，而无需编辑Button的样式。

例如：

<Page.Resources>
    <StaticResource x:Key="ButtonBackground" ResourceKey="MyMyImageBrush" />
    <StaticResource x:Key="ButtonBackgroundPointerOver" ResourceKey="MyMyImageBrush" />
    <StaticResource x:Key="ButtonBackgroundPressed" ResourceKey="SystemControlBackgroundBaseMediumLowBrush" />
    <ImageBrush x:Key="MyMyImageBrush" ImageSource="ms-appx:///assets/Button.png" />
</Page.Resources>

Answer 2

最后，我找到了一个解决方案：我在项目的每个页面的5种类型的按钮中添加了样式。 这不是一个很好的解决方案，因为按钮是从c＃类（后面的代码）创建的，以分解代码，并且所有样式都添加了500多个代码行，以便在鼠标悬停时进行简单的图像修改。...

我使用了这种样式：

'

    <Style TargetType="local:MyButton">
        <!--<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="local:MyButton">
                    <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.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid"
                                               Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledTransparentBrush}" />
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="ContentPresenter"
                      BorderBrush="{TemplateBinding BorderBrush}"
                      BorderThickness="{TemplateBinding BorderThickness}"
                      Content="{TemplateBinding Content}"
                      ContentTransitions="{TemplateBinding ContentTransitions}"
                      ContentTemplate="{TemplateBinding ContentTemplate}"
                      Padding="{TemplateBinding Padding}"
                      HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                      VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                      AutomationProperties.AccessibilityView="Raw"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Page.Resources>'