WPF : 21. Button에 MouseOver시 배경색 변경하는 법

Trigger를 이용해 마우스가 Button위에 있는 경우, 배경색과 글자색을 변경한다.

<Button Content="Click" 
        FontSize="50" 
        FontWeight="Bold">
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                    <Setter Property="Foreground" Value="Blue"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

• 기본 상태

• MouseOver된 경우

MouseOver된 경우 글자색은 변경되었지만, 배경색은 지정한 색상으로 변경되지 않았다. Button의 자체 Template에 지정된 MouseOver 색상이 지정돼있어서, Trigger를 이용해서 변경할 수 없다.

해결방법

Button의 Template을 재정의하여 기존의 스타일을 제거한 후 Trigger를 적용한다.

• 의존 속성 정의
  • MouseOver시 지정할 색상을 정의한다.

public class SimpleButton : Button
{
    public Brush MouseOverColor
    {
        get { return (Brush)GetValue(MouseOverColorProperty); }
        set { SetValue(MouseOverColorProperty, value); }
    }

    public static readonly DependencyProperty MouseOverColorProperty =
        DependencyProperty.Register("MouseOverColor", typeof(Brush), typeof(SimpleButton),
            new PropertyMetadata(new SolidColorBrush(Colors.Red)));

    public Brush MouseOverBorderColor
    {
        get { return (Brush)GetValue(MouseOverBorderColorProperty); }
        set { SetValue(MouseOverBorderColorProperty, value); }
    }

    public static readonly DependencyProperty MouseOverBorderColorProperty =
        DependencyProperty.Register("MouseOverBorderColor", typeof(Brush), typeof(SimpleButton),
            new PropertyMetadata(new SolidColorBrush(Colors.Red)));
}

• Template 정의

<Style TargetType="{x:Type local:SimpleButton}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:SimpleButton}">
                <Grid>
                    <Border x:Name="baseBorder"
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}"/>
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="baseBorder" 
                                Property="Background" 
                                Value="{Binding MouseOverColor, RelativeSource={RelativeSource TemplatedParent}}"/>
                        <Setter TargetName="baseBorder" 
                                Property="BorderBrush" 
                                Value="{Binding MouseOverBorderColor, RelativeSource={RelativeSource TemplatedParent}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>                
        </Setter.Value>
    </Setter>
</Style>

• 사용법

<local:SimpleButton MouseOverColor="Red" 
                    MouseOverBorderColor="Green" 
                    Content="Click" 
                    FontSize="50" 
                    FontWeight="Bold"/>

• MouseOver된 경우