Removing border style from disabled button

Question

I have a UserControl which contains a Button , this Button then contains an Image and a TextBlock . This enabled me to have an image button. I also want the button to have a borderless style, which I have achieved by setting the button BorderBrush to null. This part all works fine.

The problem I have is when I want to "disable" the UserControl. I can do this by settings the IsEnabled property to false , which cascades down to the button and appropriately prevents the button from being clicked. However, when the button is disabled it displays a border, which I do not want.

Question : How can I get rid of the button's border when it is disabled?

I have tried a few different methods such as setting the border from code:

MyButton.BorderBrush = Brushes.Transparent;

and using a style in the XAML:

<Button.Style>
    <Style TargetType="Button">
        <Setter Property="BorderBrush" Value="{x:Null}"/>
    </Style>
</Button.Style>

and a few other things just to try and get something to work, but nothing has made any difference so far.

NOTE: I have tried both above solutions with the Opacity property and both work fine in that respect, but not when I try to change the border

Answer 1

Unfortunately, the Style that is applied to the Button when it is disabled is applied in the default ControlTemplate . That means that if you want to change it, you'll need to define a new ControlTemplate for your Button . You can find the default ControlTemplate in the Button Styles and Templates page on MSDN.

When providing a new ControlTemplate , one sometimes misses parts from the original template, so a good starting point is to implement the default ControlTemplate as it is on that page and then 'tweak' it to your liking.

Answer 2

Since you already have a template for your Button you'll need to insert a Trigger with the Property="IsEnabled" Value="False" :

A sample ControlTemplate for a Button :

<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="border" TextBlock.Foreground="{StaticResource Button.Static.Foreground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true">
                        <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</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="border" Value="{StaticResource Button.MouseOver.Background}"/>
<Setter Property="BorderBrush"          TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/>
<Setter Property="TextBlock.Foreground" TargetName="border" Value="{StaticResource Button.MouseOver.Foreground}" />
</Trigger>
<Trigger Property="IsPressed" Value="true">
<Setter Property="Background"           TargetName="border" Value="{StaticResource Button.Pressed.Background}"/>
<Setter Property="BorderBrush"          TargetName="border" Value="{StaticResource Button.Pressed.Border}"/>
<Setter Property="TextBlock.Foreground" TargetName="border" Value="{StaticResource Button.Pressed.Foreground}" />
</Trigger>

//Here's the code where you want to change the border
//Change the Value part to whatever you want.

<Trigger Property="IsEnabled" Value="false">
<Setter Property="Background"             TargetName="border"           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>

Sorry about the indentation, but I believe you'll achieve what you want!