Як видалити ефект наведення курсору миші на кнопки WPF?


85

Моя проблема полягає в тому, що в WPF, коли я намагаюся змінити колір фону кнопки за допомогою тригерів або анімації, ефект наведення миші за замовчуванням (сірий із цим помаранчевим сяйвом) видається пріоритетним.

Після обширних пошуків я не знаю, як зняти цей ефект.

Відповіді:


17

Вам потрібно створити свій власний шаблон кнопки, щоб мати повний контроль над зовнішнім виглядом у всіх штатах. Ось підручник .


2
Дякую, це було ідеально. Зробити це було складніше, ніж я думав, але зараз все це працює добре.
Неллій,

18
З якоїсь причини існує 100 відповідей про створення власних шаблонів для елементів керування WPF, і всі вони надмірно помиляються. Немає жодної причини намагатися написати 50 рядків коду шаблону для кнопки, щоб змінити 1 річ. Все, що вам потрібно зробити, це в конструкторі xaml клацнути правою кнопкою миші елемент керування та створити копію коду шаблону. VS створить стиль саме з цієї кнопки, і ви зможете налаштувати його звідти. Займає буквально 2 секунди.
Muffin Man

@TheMuffinMan Fantastic, але вам здається навіть трохи дивним, що потрібно 50 рядків коду шаблону, щоб зупинити кнопку від зміни кольору фону при наведенні миші? Яким тупо надскладним фреймворком є ​​WPF.
Еш

@Ash Або хтось міг би стверджувати, що це спрямовує користувача у тому напрямку, в якому він мав би рухатися. Якщо у вас є кнопка, яка вимагає нового стану наведення, це, швидше за все, новий ТИП кнопки; можливо, кнопка навігації, кнопка лотка тощо. Якщо це так, то вам не слід змінювати одноразові властивості для неї, вона повинна мати свій власний контроль або групу стилів. І це те, що змушує вас це робити.
Метт Кенефік,

108

Це схоже на рішення, про яке говорив Марк Хіт, але з не стільки коду, щоб просто створити дуже базову кнопку, без вбудованого ефекту миші над анімацією. Він зберігає простий ефект наведення курсору на чорний колір.

Стиль можна вставити, наприклад, у розділ 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>

2
Мені це рішення дуже подобається. Однак наведення курсору миші активується лише тоді, коли миша знаходиться над текстом на кнопці. Я додав текстовий блок із заданою шириною всередині кнопки, щоб вирішити цю проблему.
Дейв

Ви, сер, святий.
krobelusmeetsyndra

25

Просто додати дуже просте рішення, яке мені було досить добре, і я думаю, що це стосується питання ОП. Я використав рішення у цій відповіді, за винятком звичайного 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будь-яким бажаним значенням.


10

Чоловік-булочка мав дуже просту відповідь, яка мені підходила.

Щоб додати трохи більш конкретний напрямок, принаймні для VS 2013:

  • Клацніть правою кнопкою миші елемент керування
  • Виберіть Редагувати шаблон => Редагувати копію ...
  • Я вибрав "Додаток", де зберегти стиль
    • Звідси ви можете безпосередньо редагувати App.xaml і бачити інтуїтивно названі властивості. Для своїх цілей я просто встановив RenderMouseOver = "False"
  • Потім, у MainWindow.xaml або де б не був ваш графічний інтерфейс, ви можете вставити новий стиль у кінець тегу Button, наприклад ... Style="{DynamicResource MouseOverNonDefault}"/>

Хто такий Мафін?
Mike W

ЛОЛ. Він дав другу відповідь на відповідь, прийняту власником запитання. Не був впевнений, що ви запитуєте серйозно чи жартуєте. Важко сказати з таким іменем, як Мафін.
Benji-Man

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>

4

Якщо хтось не хоче замінити шаблон управління за замовчуванням, тоді ось рішення.

Ви можете створити DataTemplate для кнопки, яка може мати TextBlock, а потім ви можете написати триггер властивості у властивості IsMouseOver, щоб вимкнути ефект наведення курсора миші. Висота TextBlock і кнопки повинна бути однаковою.

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


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>
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.