CODEWITHSUNDEEP
c#.netwpfxaml
user4344677
user4344677

Reputation:

Border on an Image-Button

I have a dynamic grid with buttons that act like images. For design purposes I want to be able to have a border around those pictures.

So here is the code: 

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);
}

For readability I deleted some lines that aren't involved with my question.

Here is the xaml code for the style that I use above. I found it somewhere on stackoverflow I think.:

<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>

No matter how big I set the Thickness, there is no Border at all, just the clickable Image.

Upvotes: 2

Views: 1707

Answers (1)

nkoniishvt
nkoniishvt

Reputation: 2521

Your ControlTemplate should look like:

<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>

When you set the BorderBrush and BorderThickness in your code it will set the component's BorderBrush and BorderThickness but in your Template you don't use those properties so they won't be used. You just need to add a border using those properties in your ControlTemplate.

Upvotes: 4

Related Questions