0

I got this style for my button already: 

<Style x:Key="ControlButtons">
    <Setter Property="Button.Height" Value="25" />
    <Setter Property="Button.Width" Value="60" />
    <Setter Property="Button.Background" Value="#FF373E48" />
    <Setter Property="Button.Foreground" Value="White" />
    <Setter Property="Button.Margin" Value="3,15,0,5" />
    <Setter Property="Button.HorizontalAlignment" Value="Left" />
    <Setter Property="Button.VerticalAlignment" Value="Center" />
    <Setter Property="Button.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderThickness="0.5" BorderBrush="White">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="#FF3D4959" />
                        <Setter Property="Foreground" Value="#FF7B7F84" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#FF3A3F4C" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#FF373E48" />
                        <Setter Property="Foreground" Value="#FF000000" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now i wanted to change the border of it when the button is pressed and i can't figure out how it have to put in the code there... I found this already WPF changing button background on click but i really can't seem to find a way to incoorperate it into my code...

Any help appreciated!

Edit:

I changed my style to this and now it's working:

<Style x:Key="ControlButtons">
    <Setter Property="Button.Height" Value="25" />
    <Setter Property="Button.Width" Value="60" />
    <Setter Property="Button.Background" Value="#FF373E48" />
    <Setter Property="Button.Foreground" Value="White" />
    <Setter Property="Button.Margin" Value="3,15,0,5" />
    <Setter Property="Button.HorizontalAlignment" Value="Left" />
    <Setter Property="Button.VerticalAlignment" Value="Center" />
    <Setter Property="Button.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Name="brdbutton"  Background="{TemplateBinding Background}" BorderThickness="0.5" BorderBrush="White">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="#FF3D4959" />
                        <Setter Property="Foreground" Value="#FF7B7F84" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#FF3A3F4C" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#FF373E48" />
                        <Setter Property="Foreground" Value="#FF000000" />
                        <Setter Property="Border.BorderThickness" Value="0.5" TargetName="brdbutton" />
                        <Trigger.EnterActions>
                            <BeginStoryboard>
                                <Storyboard>
                                    <ColorAnimation Storyboard.TargetName="brdbutton"  Storyboard.TargetProperty="(Button.BorderBrush).(SolidColorBrush.Color)" To="LawnGreen"/>
                                </Storyboard>
                            </BeginStoryboard>
                        </Trigger.EnterActions>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
15ee8f99-57ff-4f92-890c-b56153
  • 36,786
  • 7
  • 62
  • 114
Flo
  • 325
  • 2
  • 6
  • 18

3 Answers3

2

You must change your code as what i edited below:

<Style x:Key="ControlButtons">
            <Setter Property="Button.Height" Value="25" />
            <Setter Property="Button.Width" Value="60" />
            <Setter Property="Button.Background" Value="#FF373E48" />
            <Setter Property="Button.Foreground" Value="White" />
            <Setter Property="Button.BorderBrush" Value="White" />
            <Setter Property="Button.Margin" Value="3,15,0,5" />
            <Setter Property="Button.HorizontalAlignment" Value="Left" />
            <Setter Property="Button.VerticalAlignment" Value="Center" />
            <Setter Property="Button.Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Border Background="{TemplateBinding Background}" BorderThickness="0.5" BorderBrush="{TemplateBinding BorderBrush}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" Value="#FF3D4959" />
                                <Setter Property="Foreground" Value="#FF7B7F84" />
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" Value="#FF3A3F4C" />
                                <Setter Property="Foreground" Value="White" />
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" Value="#FF373E48" />
                                <Setter Property="Foreground" Value="#FF000000" />
                                <Setter Property="BorderBrush" Value="Red" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
lifestyle
  • 188
  • 1
  • 12
  • 1
    You may have to add template binding for `BorderThickness` too and set some initial non-zero value. – Sinatr Jan 08 '18 at 12:58
  • @Sinatr yes, Although the main border in this example already have 0.5 fixed thickness rather than zero. +1 for your nice suggestion. – lifestyle Jan 08 '18 at 13:03
1

I've done in this way:

<Style x:Key="ControlButtons">
        <Setter Property="Button.Height" Value="25" />
        <Setter Property="Button.Width" Value="60" />
        <Setter Property="Button.Background" Value="#FF373E48" />
        <Setter Property="Button.Foreground" Value="White" />
        <Setter Property="Button.Margin" Value="3,15,0,5" />
        <Setter Property="Button.HorizontalAlignment" Value="Left" />
        <Setter Property="Button.VerticalAlignment" Value="Center" />
        <Setter Property="Button.Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border Name="brdbutton" Background="{TemplateBinding Background}" BorderThickness="0.5" BorderBrush="White">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" Value="#FF3D4959" />
                            <Setter Property="Foreground" Value="#FF7B7F84" />
                        </Trigger>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#FF3A3F4C" />
                            <Setter Property="Foreground" Value="White" />
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" Value="#FF373E48" />
                            <Setter Property="Foreground" Value="#FF000000" />
                            <Setter Property="Border.BorderBrush" Value="Yellow" TargetName="brdbutton" />
                            <Setter Property="Border.BorderThickness" Value="3" TargetName="brdbutton" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
Luke
  • 58
  • 6
1

Give the Border element an x:Name and specify the TargetName of the Setter:

<Style x:Key="ControlButtons">
    <Setter Property="Button.Height" Value="25" />
    <Setter Property="Button.Width" Value="60" />
    <Setter Property="Button.Background" Value="#FF373E48" />
    <Setter Property="Button.Foreground" Value="White" />
    <Setter Property="Button.Margin" Value="3,15,0,5" />
    <Setter Property="Button.HorizontalAlignment" Value="Left" />
    <Setter Property="Button.VerticalAlignment" Value="Center" />
    <Setter Property="Button.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="border" Background="{TemplateBinding Background}" BorderThickness="0.5" BorderBrush="White">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Background" Value="#FF3D4959" />
                        <Setter Property="Foreground" Value="#FF7B7F84" />
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#FF3A3F4C" />
                        <Setter Property="Foreground" Value="White" />
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <!-- change the properties of the Button itself:-->
                        <Setter Property="Background" Value="#FF373E48" />
                        <Setter Property="Foreground" Value="#FF000000" />
                        <!-- change the properties of the Border element in the template:-->
                        <Setter TargetName="border" Property="BorderBrush" Value="Red" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
mm8
  • 163,881
  • 10
  • 57
  • 88