CODEWITHSUNDEEP
c#wpf
SiennaSkies
SiennaSkies

Reputation: 33

WPF remove button highlight but maintain border

I'm trying to get the following to work: I replaced the default button layout with an image. After I click the button there a small border has to appear around the button. However, I am trying to remove the ugly highlighting effect the button has when I hover over it.

I have found out how to remove the highlight effect using a button style. However, when I apply the style I can't apply a border anymore.

XAML:

<Grid Background="DarkBlue">
    <Button x:Name="btnBlad" Width="150" Height="150" Background="Transparent" BorderBrush="Transparent" MouseEnter="btnBlad_MouseEnter" Click="btnBlad_Click" MouseLeave="btnBlad_MouseLeave">
        <Image x:Name="btnBladImage" Source="img/blad.png"/>
    </Button>
</Grid>

Code I tried to show a border around the button after it is clicked:

private void btnBlad_Click(object sender, RoutedEventArgs e)
    {
        btnBlad.BorderBrush = new SolidColorBrush(Colors.Red);
        btnBlad.BorderThickness = new Thickness(2, 2, 2, 2);
    }

This code works, until I try to remove the highlighting with the following code. After I apply the code, the click event won't create a border anymore.

<Style x:Key="MyButton" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Opacity" Value="0.8" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

So a short recap:

I have a button that I have assigned an image to. I want to remove the blue highlight when I hover over it and I want to draw a red border around it after it is clicked (I have to be able to remove it after I click another button).

I can remove the highlighting or I can be able to draw the border. But I can't seem to figure out how to get both to work.

Upvotes: 0

Views: 565

Answers (1)

ASh
ASh

Reputation: 35646

you have hard-coded values for BorderThickness and BorderBrush in Template:

<Border Name="border" BorderThickness="0" BorderBrush="Black" ...

which means that changing Button properties (btnBlad.BorderBrush = new SolidColorBrush(Colors.Red);, btnBlad.BorderThickness = new Thickness(2, 2, 2, 2);) won't change visual appearance.

use binding instead:

<Border Name="border" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ...

Upvotes: 2

Related Questions