Search code examples
wpfxamlvisual-studio-2008wpf-controlswpf-style

Style not being applied to WPF button on mouse over


I have defined a Style for my button:

<Style x:Key="MyStyle" TargetType="{x:Type Button}">

    <Setter Property="BorderBrush" Value="Transparent"/>
    <Setter Property="BorderThickness" Value="0 0 0 3"/>

    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="BorderBrush" Value="Orange" />
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="BorderBrush" Value="Red" />
        </Trigger>         
    </Style.Triggers>

</Style>

Now, I apply it to the WPF button as below:

<Button>
    <Button.Style>
        <Style TargetType="Button" BasedOn="{StaticResource MyStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <StackPanel Orientation="Vertical">
                            <Image Height="20" Width="20" Stretch="UniformToFill" Source="./Resources/Add.png"/>
                            <Label HorizontalAlignment="Center">Add</Label>
                        </StackPanel>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="BorderBrush" Value="Green" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

This shows a button with an image and a label under the image. Also, on mouse over, the button border at the bottom is shown with Orange color and on mouse pressed it change its bottom border to Green color (note that initial color is overrided. I have another button which I want to show its bottom border red and not green on mouse pressed).

My problem is that bottom border for button is not being shown orange on mouse over.

UPDATE:

As Mishka said I forgot the border... see now:

<Button>
    <Button.Style>
        <Style TargetType="Button" BasedOn="{StaticResource MyStyle}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                       <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                        <StackPanel Orientation="Vertical">
                            <Image Height="20" Width="20" Stretch="UniformToFill" Source="./Resources/Add.png"/>
                            <Label HorizontalAlignment="Center">Add</Label>
                        </StackPanel>
                      </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsPressed" Value="True">
                    <Setter Property="BorderBrush" Value="Green" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

Solution

  • No object(Like 'Border') exist in your ControlTemplate to receive that BorderBrush's value.

    You need to wrap you controls with a Border and have its value like BorderBrush and BorderThickness, TemplateBinding to the properties on the Button:

    <Border BorderBrush="{TemplateBinding BorderBrush}">
    </Border>