c# - 图像按钮上的边框

Question

我有一个动态网格，其中的按钮就像图像一样。出于设计目的，我希望能够在这些图片周围添加边框。

代码如下:

EmployeeButton employeeTile = new EmployeeButton(); // inherits from Button, nothing fancy, just added three attributes for future use
Style style = this.FindResource("NoChromeButton") as Style;
employeeTile.Style = style;

// make it square (like a tile)
employeeTile.Width = Properties.Settings.Default.tileWidthInPx;
employeeTile.Height = employeeTile.Width;

// Create Background
var brush = new ImageBrush();
brush.ImageSource = item.Source; // item is an Image (part of a foreach)
employeeTile.Background = brush;

// set the margin between tiles
int margin = Properties.Settings.Default.tileMargin;
employeeTile.Margin = new Thickness(margin, margin, margin, 0);

// draw a border if the user wants to
if (Properties.Settings.Default.tileBorderThickness > 0)
{
    employeeTile.BorderBrush = Brushes.Black;
    employeeTile.BorderThickness = new Thickness(Properties.Settings.Default.tileBorderThickness);
}

为了便于阅读，我删除了一些与我的问题无关的行。

这是我在上面使用的样式的 xaml 代码。我想我在 stackoverflow 的某个地方找到了它。:

<Style x:Key="NoChromeButton" TargetType="{x:Type Button}">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/>
        <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}">
                    <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="false">
                            <Setter Property="Foreground" Value="#ADADAD"/>
                            <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

无论我设置Thickness多大，都没有Border，只有可点击的Image。

Answer 1

您的 ControlTemplate 应如下所示:

<ControlTemplate TargetType="{x:Type Button}">
    <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
        <Grid x:Name="Chrome" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>

    <ControlTemplate.Triggers>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#ADADAD"/>
            <Setter Property="Opacity" TargetName="Chrome" Value="0.5"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

当您在代码中设置 BorderBrush 和 BorderThickness 时，它会设置组件的 BorderBrush 和 BorderThickness，但在您的模板中您不使用这些属性，因此它们不会被使用。您只需在 ControlTemplate 中使用这些属性添加边框。