Контур вокруг кнопки переключения в WPF

У меня есть несколько переключателей, которые контролируют видимость некоторых вкладок. Кнопки имеют такой стиль, что при нажатии они становятся синими, а когда нет - серыми. Проблема состоит в том, что когда одна кнопка переключателя нажата, затем другая первая переключится обратно в серый цвет, но будет иметь синий контур. Если выбран какой-либо другой элемент управления (не одна из кнопок переключения), кнопка станет серой без синего контура. Я не хочу синий контур.

Мой стиль это:

<Style x:Key="TabToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="lightGray"/>
    <Setter Property="Margin" Value="3" />
    <Setter Property="Padding" Value="7,2,7,2" />
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="#FF41B8F2" />
        </Trigger>
    </Style.Triggers>
</Style>

Переключатели:

<DockPanel LastChildFill="False">
  <ToggleButton
      DockPanel.Dock="Right"
      Style="{StaticResource TabToggleButtonStyle}"
      Click="BtnOneClick"
      IsChecked="{Binding ElementName=_mainTabControl, Path=BtnOneTab.IsSelected}"
      Content="Agent Info"/>

    <ToggleButton
      DockPanel.Dock="Right"
      Style="{StaticResource TabToggleButtonStyle}"
      Click="BtnTwoClick"
      IsChecked="{Binding ElementName=_mainTabControl, Path=BtnTwoTab.IsSelected}"
      Content="Help"/>
</DockPanel>

Набор команд нажатия IsSelected = true на вкладке.

Источник

3 ответа

Решение

Я думаю, что ваша проблема в том, что шаблон для ToggleButton использует ButtonChrome для стилизации возможных состояний, таких как IsKeyboardFocused,

Поэтому, когда вы снимите флажок ToggleButton у него все еще будет фокус клавиатуры (так как вы только что щелкнули по нему), поэтому он все равно будет стилизован как таковой.

Шаблон по умолчанию для ToggleButton выглядит так

<ControlTemplate TargetType="{x:Type ToggleButton}">
    <MS_Themes:ButtonChrome x:Name="Chrome"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            Background="{TemplateBinding Background}"
                            RenderMouseOver="{TemplateBinding IsMouseOver}"
                            RenderPressed="{TemplateBinding IsPressed}"
                            RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
                            SnapsToDevicePixels="true">
        <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                          Margin="{TemplateBinding Padding}"
                          RecognizesAccessKey="True"
                          SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </MS_Themes:ButtonChrome>
    <ControlTemplate.Triggers>
        <Trigger Property="IsKeyboardFocused" Value="true">
            <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="true">
            <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Foreground" Value="#ADADAD"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

Удаление IsKeyboardFocused Триггер должен решить вашу проблему (для этого также необходимо добавить ссылку на PresentationFramework.Aero). Но так как вы не можете просто изменить части шаблона (это сделка "все или ничего"), вам придется переписать его

Итак ToggleButton стиль будет

<Style x:Key="TabToggleButtonStyle" TargetType="{x:Type ToggleButton}">
    <Setter Property="Background" Value="lightGray"/>
    <Setter Property="Margin" Value="3" />
    <Setter Property="Padding" Value="7,2,7,2" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type ToggleButton}"
                             xmlns:MS_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero">
                <MS_Themes:ButtonChrome x:Name="Chrome"
                                        BorderBrush="{TemplateBinding BorderBrush}"
                                        Background="{TemplateBinding Background}"
                                        RenderMouseOver="{TemplateBinding IsMouseOver}"
                                        RenderPressed="{TemplateBinding IsPressed}"
                                        RenderDefaulted="{TemplateBinding Button.IsDefaulted}"
                                        SnapsToDevicePixels="true">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        Margin="{TemplateBinding Padding}"
                                        RecognizesAccessKey="True"
                                        SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </MS_Themes:ButtonChrome>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsChecked" Value="true">
                        <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter Property="Foreground" Value="#ADADAD"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="#FF41B8F2" />
        </Trigger>
    </Style.Triggers>
</Style>
Источник

Скорее всего, вашей проблемой является Focus Visual Style. Вы можете избавиться от этого, добавив эту конструкцию к своим ресурсам:

<!-- StyleNoFocusRect -->
<Style x:Key="StyleNoFocusRect">
    <Setter Property="Control.Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Control}">
                <Canvas></Canvas>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Затем добавьте его в свой стиль ToggleButton:

<Setter Property="FocusVisualStyle" Value="{StaticResource StyleNoFocusRect}"/>

Это должно избавиться от вашего синего контура.

Источник

В.net 4.0 я только что добавил это

<Style TargetType="ToggleButton">
    <Setter Property="Focusable" Value="False" />
</Style>

Она убрала контур синего цвета, когда я переключаю другую кнопку, но кнопка больше не может быть сфокусирована клавиатурой.

Источник
Другие вопросы по тегам