WPF中切换按钮周围的轮廓线

Question

WPF中切换按钮周围的轮廓线

4

我有一些切换按钮，可以控制一些选项卡的可见性。这些按钮的样式是按下时变蓝，未按下时变灰。问题在于，当一个切换按钮被按下，然后另一个切换按钮被按下时，第一个切换按钮会变回灰色，但有蓝色的轮廓。如果选择其他控件（不是其中之一的切换按钮），则按钮将变为灰色而无需蓝色轮廓。我不想要蓝色轮廓。

我的样式是：

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

- nash

3个回答

2

很可能您遇到的问题是焦点视觉样式。您可以通过将以下结构添加到资源中来解决它：

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

那应该能去掉你的蓝色轮廓了。

- Ed Bayiates

感谢您的帮助，但不幸的是这对我没有起作用。 - nash

0

在 .net 4.0 中，我只是添加了这个。

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

当我切换到另一个按钮时，它会去掉蓝色的轮廓，但是该按钮无法再通过键盘聚焦。

- Seltymar

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fredrik Hedblad · Accepted Answer

我认为你的问题在于 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>