Контур вокруг кнопки переключения в WPF - PullRequest
Новая
       39

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

4 голосов
/ 27 июля 2011

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

Мой стиль: 

<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 ]

3 голосов
/ 27 июля 2011

Я думаю, что ваша проблема в том, что шаблон для 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>
2 голосов
/ 27 июля 2011

Скорее всего, вашей проблемой является 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}"/>

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

0 голосов
/ 17 марта 2014

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

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

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

...