WPFボタンのデフォルトのマウスオーバー効果を削除するにはどうすればよいですか？

84

私の問題は、WPFで、トリガーまたはアニメーションを使用してボタンの背景の色を変更しようとすると、デフォルトのマウスオーバー効果（オレンジ色の輝きで灰色になる）が優先されるように見えることです。

徹底的な検索の後、私はこの影響を取り除く方法について無知です。

wpf  button  mouseover 
— ネリウス
ソース

回答:

17

すべての状態の外観を完全に制御するには、独自のカスタムボタンテンプレートを作成する必要があります。これがチュートリアルです。

— マークヒース
ソース
2
おかげで、それは完璧でした。思ったよりも複雑でしたが、今ではすべてうまくいきました。
— ネリウス2010年
18
何らかの理由で、WPFコントロールのカスタムテンプレートの作成について100の回答があり、それらはすべて不必要に間違っています。1つのことを変更するためにボタンのテンプレートコードを50行書くのに苦労する理由はありません。xamlデザイナーでコントロールを右クリックし、テンプレートコードのコピーを作成するだけです。VSはその正確なボタンからスタイルを作成し、そこから微調整できます。文字通り2秒かかります。
— マフィンマン
@TheMuffinMan素晴らしいですが、ボタンがマウスホバーで背景色を変更するのを止めるのに50行のテンプレートコードが必要なのは少し奇妙だと思いますか？複雑なフレームワークWPFについては、なんと愚かなことでしょう。
— 灰
@Ashまたは、ユーザーが進むべき方向にユーザーを誘導していると主張することもできます。新しいホバー状態を必要とするボタンがある場合、それはおそらく新しいタイプのボタンです。おそらくナビゲーションボタン、トレイボタンなどです。その場合、1回限りのプロパティを変更するのではなく、独自のコントロールまたはスタイルグループを用意する必要があります。そして、それがあなたにそうさせます。
— マットケネフィック
107

これは、Mark Heathによって参照されたソリューションに似ていますが、組み込みのマウスオーバーアニメーション効果なしで、非常に基本的なボタンを作成するためのコードはそれほど多くありません。ボタンの境界線を黒で表示するという単純なマウスオーバー効果を維持します。

スタイルは、たとえばWindow.ResourcesセクションまたはUserControl.Resourcesセクションに挿入できます（図を参照）。

<UserControl.Resources>
    <!-- This style is used for buttons, to remove the WPF default 'animated' mouse over effect -->
    <Style x:Key="MyButtonStyle" TargetType="Button">
        <Setter Property="OverridesDefaultStyle" Value="True"/>
        <Setter Property="Margin" Value="5"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                    <Border Name="border" 
                        BorderThickness="1"
                        Padding="4,2" 
                        BorderBrush="DarkGray" 
                        CornerRadius="3" 
                        Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="border" Property="BorderBrush" Value="Black" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<!-- usage in xaml -->
<Button Style="{StaticResource MyButtonStyle}">Hello!</Button>
— dodgy_coder
ソース
2
私はその解決策がとても好きです。ただし、マウスオーバートリガーは、マウスがボタンのテキストの上にある場合にのみアクティブになります。その問題を修正するために、ボタンの内側に指定された幅のテキストブロックを追加しました。
— デイブ
あなたは聖人です。
— krobelusmeetsyndra
25

非常に単純なソリューションを追加するだけで、それで十分でした。OPの問題に対処していると思います。画像の代わりに通常の値を使用する以外は、この回答のソリューションを使用しましたBackground。

<Style x:Key="SomeButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Grid Background="{TemplateBinding Background}">
                    <ContentPresenter />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

テンプレート化されたボタンからBackground常にTransparent背景になるように強制する以外に再テンプレート化する必要はありません。これが行われると、マウスオーバーは背景に影響を与えなくなります。明らかにTransparent、任意の値に置き換えてください。

— Lyall
ソース
10

マフィンマンは私のために働いた非常に簡単な答えを持っていました。

少なくともVS2013の場合、もう少し具体的な方向性を追加するには、次のようにします。

  • コントロールを右クリックします
  • [テンプレートの編集] => [コピーの編集...]を選択します。
  • スタイルを保存する場所として「アプリケーション」を選択しました
    • ここから、App.xamlを直接編集して、直感的に名前が付けられたプロパティを確認できます。私の目的では、RenderMouseOver = "False"を設定するだけです。
  • 次に、MainWindow.xamlまたはGUIのどこにいても、Buttonタグの最後に新しいスタイルを貼り付けることができます。 ... Style="{DynamicResource MouseOverNonDefault}"/>
— ベンジマン
ソース
マフィンマンは誰ですか？
— マイクW
笑。彼は、質問所有者が受け入れた回答に対して2回目の回答をしました。あなたが真剣に尋ねているのか冗談を言っているのかわからなかった。マフィンマンのような名前ではわかりにくい。
— ベンジー・マン
5

このリンクは私を大いに助けてくれました http://www.codescratcher.com/wpf/remove-default-mouse-over-effect-on-wpf-buttons/

UserControl.ResourcesまたはWindow.Resourcesでスタイルを定義します

 <Window.Resources>
        <Style x:Key="MyButton" TargetType="Button">
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Cursor" Value="Hand" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border Name="border" BorderThickness="0" BorderBrush="Black" Background="{TemplateBinding Background}">
                            <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Opacity" Value="0.8" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>

次に、この方法でボタンにスタイルを追加しますStyle = "{StaticResource MyButton}"

<Button Name="btnSecond" Width="350" Height="120" Margin="15" Style="{StaticResource MyButton}">
    <Button.Background>
        <ImageBrush ImageSource="/Remove_Default_Button_Effect;component/Images/WithStyle.jpg"></ImageBrush>
    </Button.Background>
</Button>
— Arash.Zandi
ソース
4

誰かがデフォルトのコントロールテンプレートを上書きしたくない場合は、ここに解決策があります。

TextBlockを持つことができるボタンのDataTemplateを作成してから、IsMouseOverプロパティにプロパティトリガーを記述して、マウスオーバー効果を無効にすることができます。TextBlockとButtonの高さは同じである必要があります。

<Button Background="Black" Margin="0" Padding="0" BorderThickness="0" Cursor="Hand" Height="20">
    <Button.ContentTemplate>
        <DataTemplate>
            <TextBlock Text="GO" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" TextDecorations="Underline" Margin="0" Padding="0" Height="20">
                <TextBlock.Style>
                    <Style TargetType="TextBlock">
                        <Style.Triggers>
                            <Trigger Property ="IsMouseOver" Value="True">
                                <Setter Property= "Background" Value="Black"/>
                            </Trigger>
                        </Style.Triggers>
                    </Style>
                </TextBlock.Style>
            </TextBlock>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>
— プラテックライ
ソース
1

のサポートを追加するdodgy_coderの回答の拡張。

  • WPFボタンスタイルの維持

  • IsSelectedとホバーのサポートを追加します。つまり、ボタンを切り替えます

        <Style x:Key="Button.Hoverless" TargetType="{x:Type ButtonBase}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type ButtonBase}">
                    <Border Name="border"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Padding="{TemplateBinding Padding}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="Selector.IsSelected" Value="False" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="#FFBEE6FD" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True" />
                                <Condition Property="Selector.IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="#BB90EE90" />
                        </MultiTrigger>

                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="False" />
                                <Condition Property="Selector.IsSelected" Value="True" />
                            </MultiTrigger.Conditions>
                            <Setter Property="Background" Value="LightGreen" />
                        </MultiTrigger>

                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="border" Property="Opacity" Value="0.95" />
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

例..

<Button Content="Wipe On" Selector.IsSelected="True" /> <Button Content="Wipe Off" Selector.IsSelected="False" />

— stoj
ソース
0

テンプレートトリガーの使用：

<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="White"></Setter>
    ...
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="White"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
— ライネミカエル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.