Какое свойство здесь изменяется при наведении курсора?

Какое свойство вызывает появление этого синего прямоугольника при наведении курсора мыши для этой пользовательской кнопки-переключателя? У меня такое чувство, что это может быть очень глупый вопрос, но я не могу найти ответ поиском. Я несколько новичок в XAML, но я думаю, что учусь довольно быстро. Вот изображения кнопки включения и выключения наведения мыши.

Кнопка при наведении

Кнопка при выключенном наведении

Ниже приведен мой код для создания этого стиля в словаре ресурсов.

<ResourceDictionary xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml">
    <Style BasedOn = "{StaticResource {x:Type ToggleButton}}"
           TargetType = "{x:Type ToggleButton}"
           x:Key = "ControlButtonToggle">
        <Style.Setters>
            <Setter Property = "Background" Value = "Transparent"/>
            <Setter Property = "BorderThickness" Value = "0"/>
            <Setter Property = "OverridesDefaultStyle" Value = "True"/>
            <Setter Property = "Background" Value = "Transparent"/>
            <Setter Property = "Template">
                <Setter.Value>
                    <ControlTemplate TargetType = "ToggleButton">
                        <Border Background = "{TemplateBinding Background}"
                                BorderBrush = "{TemplateBinding BorderBrush}"
                                BorderThickness = "{TemplateBinding BorderThickness}"
                                CornerRadius = "20">
                            <ContentPresenter HorizontalAlignment = "Center"
                                              VerticalAlignment = "Center"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property = "IsMouseOver" Value = "True">
                                <Setter Property = "Background" Value = "Yellow"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style.Setters>

        <Style.Triggers>
            <!-- TRUE TRIGGER -->
            <Trigger Property = "IsChecked"
                     Value = "True">
                <Setter Property = "Background" Value = "LightGreen"/>
                <Setter Property = "Template">
                    <Setter.Value>
                        <ControlTemplate TargetType = "ToggleButton">
                            <Border CornerRadius = "10"
                                    Background = "LightGreen"
                                    Width = "{TemplateBinding Width}"
                                    Height = "{TemplateBinding Height}"
                                    BorderBrush = "Green"
                                    BorderThickness = "2">
                                <Grid>
                                    <Rectangle StrokeThickness = "1"/>
                                    <Button Margin = "1"
                                            Content = "Enabled"
                                            BorderThickness = "0"
                                            Background = "Transparent"
                                            VerticalContentAlignment = "Center"
                                            Padding = "5"
                                            Foreground = "Black"
                                            BorderBrush = "Green"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property = "IsMouseOver" Value = "True">
                                    <Setter Property = "Opacity" Value = "0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>

            <!-- FALSE TRIGGER -->
            <Trigger Property = "IsChecked"
                     Value = "False">
                <Setter Property = "Background" Value = "#FFFF5454"/>
                <Setter Property = "Template">
                    <Setter.Value>
                        <ControlTemplate TargetType = "ToggleButton">
                            <Border CornerRadius = "10"
                                    Background = "#FFFF5454"
                                    Width = "{TemplateBinding Width}"
                                    Height = "{TemplateBinding Height}"
                                    BorderBrush = "Red"
                                    BorderThickness = "2">
                                <Grid>
                                    <Rectangle StrokeThickness = "1"/>
                                    <Button Margin = "1"
                                            Content = "Disabled"
                                            BorderThickness = "0"
                                            Background = "Transparent"
                                            VerticalContentAlignment = "Center"
                                            Padding = "5"
                                            Foreground = "Black"
                                            BorderBrush = "Red"/>
                                </Grid>
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property = "IsMouseOver" Value = "True">
                                    <Setter Property = "Opacity" Value = "0.8"/>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Trigger>
        </Style.Triggers>
    </Style>
</ResourceDictionary>

Я попытался заставить ControlTemplate.Trigger для OnMouseHover изменить фон, и я сделал общий триггер вне самого ControlTemplate, но ни один из них не сработал. Я искал свойства элементов этого стиля, но не могу понять, что вызывает этот внешний вид. Я хотел бы либо затемнить все закругленное поле при наведении, либо просто сделать это свойство просто прозрачным, так как курсор все равно изменяется при наведении. Любая помощь очень ценится, я извиняюсь, если это очень простой вопрос, лол.

Отвечает ли это на ваш вопрос? Как убрать эффект наведения мыши по умолчанию на кнопках WPF?

Étienne Laneville 05.07.2023 21:12

@ÉtienneLaneville Я не уверен, будет ли тот факт, что это решение является UserControl.Resources, отличаться от того факта, что мое решение является ResourceDictionary?

Colm Ukrainec 05.07.2023 21:23

Вы поместили Button внутри ToggleButton, не установив для стиля значение Button, и, таким образом, стиль Button по умолчанию, который включает цвет MouseOver, применяется к Button. Вложение Button в ToggleButton в данном случае не имеет смысла.

emoacht 05.07.2023 22:25

@emoacht Тогда я смогу просто изменить Button на ToggleButton здесь? Или мне нужно было бы упрекнуть стиль полностью?

Colm Ukrainec 06.07.2023 14:37
Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
1
4
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Прямо сейчас я даже не могу щелкнуть ваш ToggleButton, чтобы изменить его состояние на: Включить/Отключить

  1. Этот прямоугольник создан благодаря вашей кнопке внутри ToggleButton, почему вместо этого вы не используете Label или TextBlock? Если вы это сделаете, не забудьте добавить в свою сетку HorizontalAlignment = "Center", чтобы после этого центрировать текст.

  2. Или, если вы не хотите избавляться от своих кнопок, вы можете добавить: IsHitTestVisible = "False" к этим двум кнопкам, чтобы отключить их стили/нажатие/взаимодействие, но это не очень приятно.

  3. Или измените фон ваших кнопок внутри вашего ToggleButton, когда запускается IsMouseOver.

Спасибо! #1 работал над исправлением прямоугольника. У меня есть IsChecked, привязанный к данным с помощью INotify, поэтому я не уверен, что это причина, по которой он не будет переключать свое состояние. До изменения я вручную обрабатывал событие щелчка, поэтому, если у вас были проблемы с ним, то вот почему.

Colm Ukrainec 06.07.2023 18:02

Другие вопросы по теме