CODEWITHSUNDEEP
wpfxaml
Sithered
Sithered

Reputation: 481

XAML button template change when mouse cursor over it

I have a XAML ResourceDictionary, that I try to define a consistent design for all the buttons within my program.

I managed to make a single design for them, with this code :

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Style TargetType="{x:Type Button}">
        <Setter Property="OverridesDefaultStyle" Value="True" />
        <Setter Property="SnapsToDevicePixels" Value="True" />
        <Setter Property="Foreground" Value="MidnightBlue" />
        <Setter Property="Background" Value="White" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate x:Name="tmpltButton">
                    <Grid>
                        <Border x:Name="ButtonBorder" 
                            CornerRadius="7,7,7,7" 
                            BorderBrush="MidnightBlue"
                            BorderThickness="2">
                        </Border>

                        <ContentPresenter x:Name="ButtonContent"
                            Content="{Binding Path=Content, 
                            RelativeSource={RelativeSource TemplatedParent}}" 
                            HorizontalAlignment="center" 
                            VerticalAlignment="center">
                        </ContentPresenter>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

But it removed the default behavior when the user clik the button, or put his mouse over it. Despite all my effort to find a way of putting it back, I cannot find a way.

How can I make my buttons design change when the mouse is over it?

Upvotes: 0

Views: 1461

Answers (2)

fillobotto
fillobotto

Reputation: 3775

You are missing the Trigger property of ControlTemplate. Just put it inside tmpltButton element. Here's the default one:

    <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}"/>
    </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}"/>
    </Trigger>
    <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>

However, if you want to style any component, I suggest to right-click the component in designer view and then click Edit Template > Edit a copy, so you start styling it from scratches.

For the sake of completeness, as Mike said, Microsoft offers Expression Blend which is a tool included in Visual Studio bundle. It allows much more design capabilities and of course it deserves a try.

Upvotes: 3

James Harcourt
James Harcourt

Reputation: 6379

You should use style triggers to control it yourself.

To change background colour, you'll need to set the style triggers on the Button and then use a template binding within your control template to set the background.

Here is a simple example where I've made the button background a different colour for 3 situations - IsPressed, MouseOver=True and MouseOver=False:

<Style TargetType="{x:Type Button}">
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Pink"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="False">
            <Setter Property="Background" Value="Orange"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
            <Setter Property="Background" Value="IndianRed"/>
        </Trigger>
    </Style.Triggers>

    <Setter Property="SnapsToDevicePixels" Value="True" />
    <Setter Property="Foreground" Value="MidnightBlue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate x:Name="tmpltButton">
                <Grid Background="{TemplateBinding Background}">
                    <Border x:Name="ButtonBorder" CornerRadius="7,7,7,7" BorderBrush="MidnightBlue" BorderThickness="2"/>
                    <ContentPresenter x:Name="ButtonContent" Content="{Binding Path=Content, RelativeSource={RelativeSource TemplatedParent}}" 
                                      HorizontalAlignment="Center" VerticalAlignment="Center"/>

                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Upvotes: 1

Related Questions