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>

无论我设置厚度多大，都没有边框，只有可点击的图像。

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中使用这些属性添加边框。

图像按钮上的边框

1 个答案: