按钮背景边距

Button Background Margin

我正在寻找一种在具有专用边距的按钮中设置背景图像的方法。现在我有这样的东西:

<Button Grid.Column="3" Margin="2,0">
    <Button.Background>
        <ImageBrush Stretch="Fill" TileMode="None">
            <ImageBrush.ImageSource>
                <DrawingImage Drawing="{StaticResource MyImage}" />
            </ImageBrush.ImageSource>
        </ImageBrush>
    </Button.Background>
</Button>

这使我的按钮完全充满了图像。这是(我认为......)正确的行为。现在我想在背景图片周围留一点边距。我没有找到办法做到这一点,因为图像画笔和绘图图像都没有提供这样的属性。我知道我可以使用按钮内容来获得提供边距的图像,但是通过这种方法,当我将按钮放在滚动查看器控件中时,按钮图像表现得很奇怪(当我调整视图大小时按钮变大,但图像保持小)。处理此问题的最佳方法是什么?

根据下面的答案,自定义样式似乎是最合适的。无论如何,也许我的问题不是真正的按钮本身,而是按钮周围的滚动查看器。我附上了两张图片,第一张带有滚动视图,第二张没有。使用滚动查看器时,图像很小并且不适合按钮,所以这可能是根本原因吗?任何建议:

没有滚动查看器:

设置Padding,Margin用于设置控件外的间距,而Padding用于在有界控件内提供space,你应该做以下事情,

  1. 而不是 背景 属性 你必须设置 内容 属性 个按钮。
  2. 而不是 ImageBrush 使用 Image 控件 作为按钮内容。
<Button
        Grid.Column="3"
        Width="300"
        Height="30"
        Margin="2,0"
        Padding="5"
        HorizontalContentAlignment="Stretch"
        VerticalContentAlignment="Stretch"
        BorderBrush="Red"
        Style="{DynamicResource ButtonStyle1}">
    <Button.Content>
        <Image Source="in.png" Stretch="Fill" />
    </Button.Content>
</Button>

设置 MarginPadding 在这里不起作用Margin 应用于按钮周围,而不是按钮内部,Padding 应用于内部 ContentPresenter。换句话说,填充将围绕 Content,而不是围绕 Background,因为那不是内容的一部分。

您解决问题的选择是:

  • 创建一个已经包含边距的绘图(重新缩放时边距不会保持不变)。

  • 创建图像作为 Button 的内容,然后 Padding 就可以了(推荐)。

    <Button Grid.Column="3" Padding="2, 0">
       <Button.Content>
          <Image Stretch="Fill">
             <Image.Source>
                <DrawingImage Drawing="{StaticResource MyImage}" />
             </Image.Source>
          </Image>
       </Button.Content>
    </Button>
    
  • 编辑默认控件模板和样式以更改应用背景的方式。这可能很乏味,并且会影响其他视觉状态,而不仅仅是静态状态,所以如果您选择这样做,请务必小心。这是一个 示例 它可能的样子。

    <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/>
    <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/>
    <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/>
    <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/>
    <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/>
    <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/>
    <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/>
    <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/>
    <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/>
    <Style x:Key="FocusVisual">
       <Setter Property="Control.Template">
          <Setter.Value>
             <ControlTemplate>
                <Rectangle Margin="2" StrokeDashArray="1 2" SnapsToDevicePixels="true" StrokeThickness="1" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
             </ControlTemplate>
          </Setter.Value>
       </Setter>
    </Style>
    <Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
       <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/>
       <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/>
       <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/>
       <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
       <Setter Property="BorderThickness" Value="1"/>
       <Setter Property="HorizontalContentAlignment" Value="Center"/>
       <Setter Property="VerticalContentAlignment" Value="Center"/>
       <Setter Property="Padding" Value="1"/>
       <Setter Property="Template">
          <Setter.Value>
             <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" Padding="{TemplateBinding Padding}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" SnapsToDevicePixels="true">
                   <Border x:Name="innerBorder" Background="{TemplateBinding Background}">
                      <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                   </Border>
                </Border>
                <ControlTemplate.Triggers>
                   <Trigger Property="IsDefaulted" Value="true">
                      <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                   </Trigger>
                   <Trigger Property="IsMouseOver" Value="true">
                      <Setter Property="Background" TargetName="innerBorder" Value="{StaticResource Button.MouseOver.Background}"/>
                      <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
                   </Trigger>
                   <Trigger Property="IsPressed" Value="true">
                      <Setter Property="Background" TargetName="innerBorder" Value="{StaticResource Button.Pressed.Background}"/>
                      <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
                   </Trigger>
                   <Trigger Property="IsEnabled" Value="false">
                      <Setter Property="Background" TargetName="innerBorder" Value="{StaticResource Button.Disabled.Background}"/>
                      <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/>
                      <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/>
                   </Trigger>
                </ControlTemplate.Triggers>
             </ControlTemplate>
          </Setter.Value>
       </Setter>
    </Style>
    

    如果把这些样式放在作用域的资源字典中,就可以这样使用了。

    <Button Grid.Column="3" Style="{StaticResource ButtonStyle}" Padding="20, 0">
       <Button.Background>
          <ImageBrush Stretch="Fill" TileMode="None">
             <ImageBrush.ImageSource>
                <DrawingImage Drawing="{StaticResource MyImage}" />
             </ImageBrush.ImageSource>
          </ImageBrush>
       </Button.Background>
    </Button>
    

    当然,如果您省略样式键,您也可以根据需要将其设为隐式。