当使用ImageBrush作为背景时，如何从WPF RepeatButton中移除边框和效果？

Question

我正在使用WPF中的repeatbutton对象，按钮需要基于图形（图像刷背景，无边框或其他多余效果）。

我的问题是，无论我尝试什么，按钮周围仍然有一个白色矩形，而且，经过几个小时的研究后，我不确定我是否完全理解为什么或如何去除它。

我已使用以下XAML创建按钮：

 <RepeatButton Content="" BorderThickness="0" HorizontalAlignment="Left" Margin="334,265,0,0" VerticalAlignment="Top" Width="149" Height="100" Background="{DynamicResource ImageBrush_Decrement}" Style="{DynamicResource RepeatButtonStyle_noflash}" d:LayoutOverrides="HorizontalAlignment"/>

您会注意到我正在引用一种“ RepeatButtonNoFlash”样式，它被用来移除默认渲染（因为它会导致闪烁效果），该样式在共享字典中定义如下：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
    <Style x:Key="ButtonFocusVisual">
        <Setter Property="Control.Template">
            <Setter.Value>
                <ControlTemplate>
                    <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="0" StrokeDashArray="1 2"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <!-- Resource dictionary entries should be defined here. -->

    <Style x:Key="BaseButtonStyle" TargetType="{x:Type ButtonBase}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" Background="{TemplateBinding Background}" RenderMouseOver="False" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="False" SnapsToDevicePixels="true" Style="{DynamicResource ButtonChromeStyle_noborder}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Microsoft_Windows_Themes:ButtonChrome>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsKeyboardFocused" Value="true">
                            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="ToggleButton.IsChecked" Value="true">
                            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="RepeatButtonStyle_noflash" BasedOn="{StaticResource BaseButtonStyle}" TargetType="{x:Type RepeatButton}">
        <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
    </Style>
</ResourceDictionary>

敬启者

丹

- user1350555

Answer 1

这来自于Microsoft_Windows_Themes:ButtonChrome，尝试将其替换为边框或其他内容，应该可以消除它。

<Style x:Key="BaseButtonStyle" TargetType="{x:Type ButtonBase}">
        <Setter Property="FocusVisualStyle" Value="{StaticResource ButtonFocusVisual}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
</Style>

- Andy

---

Blend为您创建的模板具有<Microsoft_Windows_Themes:ButtonChrome行。这就是绘制您可以看到的白色边框的原因。如果您查看我发布的代码，您就会发现我已经删除了ButtonChrome并将其替换为简单的边框。我还必须从下面的集合中删除一些引用chrome边框名称的触发器。 - Andy

谢谢，我刚刚接近一台电脑可以测试这个，它完美地工作了...非常感谢你。 - user1350555