web-dev-qa-db-ja.com

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

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

広範囲にわたる検索の後、この効果を除去する方法についてはわかりません。

wpfbuttonmouseover
76
Nellius

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

15
Mark Heath

これは、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>
100
dodgy_coder

非常に簡単な解決策を追加するだけで十分であり、Ithinkは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を任意の優先値に置き換えてください。

21
Lyall

Muffin Manには非常に簡単な答えがあり、それが私にとってはうまくいきました。

少なくともVS 2013の場合、もう少し具体的な方向を追加するには：

  • コントロールを右クリック
  • [テンプレートの編集] => [コピーの編集]を選択します...
  • スタイルを保存する場所として「アプリケーション」を選択しました
    • ここから、App.xamlを直接編集して、直感的な名前のプロパティを確認できます。目的のために、RenderMouseOver = "False"を設定するだけです
  • 次に、MainWindow.xamlまたはGUIのどこにいても、Buttonタグの最後に新しいスタイルを貼り付けることができます。 ... Style="{DynamicResource MouseOverNonDefault}"/>
7
Benji-Man

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

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>
3
Prateek Rai

サポートを追加する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" />

1
stoj

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

<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>
0
Laine Mikael