1. ホーム
  2. wpf

[解決済み] WPFでボタンMouseOverのBackgroundを変更するには?

2022-12-16 05:49:24

質問

私のページには、このXAMLを使ったボタンがあります。

<Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Bottom" 
    Width="50" Height="50" HorizontalContentAlignment="Left" 
    BorderBrush="{x:Null}" Foreground="{x:Null}" Margin="50,0,0,0">
    <Button.Style>
        <Style TargetType="Button">
            <Setter Property="Background" Value="Green"/>
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Background" Value="Red"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

しかし、マウスをボタンの上に置くと、ボタンの背景がデフォルトのウィンドウズのグレーの背景に変わってしまいます。

何が問題なのでしょうか?

マウスオーバー前と後のボタン画像です。

マウスオーバー前



後です。




どのように解決するのですか?

デフォルトの MouseOver の振る舞いを削除するには Button を変更する必要があります。 ControlTemplate . を変更することで Style の定義を以下のように変更するとうまくいくでしょう。

<Style TargetType="{x:Type Button}">
    <Setter Property="Background" Value="Green"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="1">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="Red"/>
        </Trigger>
    </Style.Triggers>
</Style>

EDIT:数年遅れですが、実はボーダーブラシは入っているボーダーの内側に設定することができるんですね。指摘されていたのかどうかは分かりませんが、そうではないような...。