BorderBrush 不可见

【问题标题】：BorderBrush not visibleBorderBrush 不可见
【发布时间】：2018-03-27 21:05:19
【问题描述】：

我有 3 个单选按钮。在通常状态下，radioButton 中的borderBrush 不可见，但它的属性不为空。当我点击单选按钮时，中心单选按钮将可见，但 borderBrush 不可见。

为什么 BorderBrush 不可见？ 

<RadioButton Content="Low" 
             Tag="Low" 
             Grid.Row="1"
             BorderBrush="{StaticResource LowPrioritySolidColorBrush}"
             Checked="OnPriorityButtonChecked"
             FontSize="17"
             Visibility="Visible"
             Margin="0,15,0,0"/>
<RadioButton Grid.Column="1" 
             Margin="0,15,0,0"
             Grid.Row="1"
             Content="Medium" 
             Tag="Medium" 
             Visibility="Visible"
             BorderBrush="{StaticResource MediumPrioritySolidColorBrush}"
             Checked="OnPriorityButtonChecked"
             FontSize="17"/>
<RadioButton Grid.Column="2" 
             Margin="20,15,0,0"
             Grid.Row="1"
             Content="High"
             Tag="High" 
             Visibility="Visible"
             BorderBrush="{StaticResource HighPrioritySolidColorBrush}" 
             Checked="OnPriorityButtonChecked"
             FontSize="17"/>

【问题讨论】：

  • 你定义了边框宽度吗？
  • 可能边框和背景颜色一样？
  • 你是说 BorderThickness？
  • 不可能。它们有 3 种不同的颜色。
  • 您将不得不在此处为您的 RadioButton 样式发布 XAML，因为问题几乎肯定在其中。

标签： c# xaml uwp uwp-xaml


【解决方案1】：

这是 UWP 中 RadioButtons 的默认外观：

“复选框”的轮廓默认为黑色，并在选中按钮时将颜色更改为用户的强调色。里面的点也是黑色的。但是，在您的情况下，RadioButtons 看起来非常不同，里面有一个彩色圆点，没有轮廓，所以必须有一个自定义的 Style 应用于它们。尝试在您的解决方案中搜索TargetType="RadioButton" 以找到它。 RadioButtons 不必直接有Style，但对于没有定义x:Key 的Style 来定位它们就足够了。

当您将BorderBrush 和BorderThickness 应用到默认样式时，结果将如下所示：

我猜这不是你想要的:-)。为了实现您的目标，您必须声明自己的自定义样式，它将使用 BorderBrush 作为轮廓的源颜色：

<Color x:Key="LowPriorityColor">#60BA66</Color>
<Color x:Key="MediumPriorityColor">#FFB900</Color>
<Color x:Key="HighPriorityColor">#CE4949</Color>
<SolidColorBrush x:Key="LowPrioritySolidColorBrush" Color="{StaticResource LowPriorityColor}"/>
<SolidColorBrush x:Key="MediumPrioritySolidColorBrush" Color="{StaticResource MediumPriorityColor}"/>
<SolidColorBrush x:Key="HighPrioritySolidColorBrush" Color="{StaticResource HighPriorityColor}"/>
<Style x:Key="PriorityRadioStyle" TargetType="RadioButton">
    <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/>
    <Setter Property="Padding" Value="8,6,0,0"/>
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Left"/>
    <Setter Property="VerticalContentAlignment" Value="Top"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="MinWidth" Value="120"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="20"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="PointerOver">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseStrokePointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseFillPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedStrokePointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedFillPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphFillPointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphStrokePointerOver}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseStrokePressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseFillPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedStrokePressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedFillPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphFillPressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphStrokePressed}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseStrokeDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseFillDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedStrokeDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonOuterEllipseCheckedFillDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphFillDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Stroke">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonCheckGlyphStrokeDisabled}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Opacity" To="1"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="OuterEllipse" Storyboard.TargetProperty="Opacity" To="0"/>
                                    <DoubleAnimation Duration="0" Storyboard.TargetName="CheckOuterEllipse" Storyboard.TargetProperty="Opacity" To="1"/>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked"/>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid Height="32" VerticalAlignment="Top">
                        <Ellipse x:Name="OuterEllipse" Fill="{StaticResource RadioButtonOuterEllipseFill}" Height="20" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" Stroke="{TemplateBinding BorderBrush}" UseLayoutRounding="False" Width="20"/>
                        <Ellipse x:Name="CheckOuterEllipse" Fill="{ThemeResource RadioButtonOuterEllipseCheckedFill}" Height="20" Opacity="0" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" Stroke="{TemplateBinding BorderBrush}" UseLayoutRounding="False" Width="20"/>
                        <Ellipse x:Name="CheckGlyph" Fill="{TemplateBinding BorderBrush}" Height="10" Opacity="0" Stroke="{ThemeResource RadioButtonCheckGlyphStroke}" UseLayoutRounding="False" Width="10"/>
                    </Grid>
                    <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

我对默认样式所做的更改是：

  • 将OuterEllipse 的Stroke 设置为{TemplateBinding BorderBrush}
  • 将CheckOuterEllipse 的Stroke 设置为{TemplateBinding BorderBrush}
  • 将CheckGlyph 的Fill 设置为{TemplateBinding BorderBrush}

结果如下：

然而，当指针位于RadioButton 上方并按下时，这仍然可以通过更改默认黑色来改善。这可以在Style 中的每个VisualState 中完成。

当然，你一定不要忘记将样式应用到你的RadioButtons：

<RadioButton Style="{StaticResource PriorityRadioStyle}" Content="Low" 
                Tag="Low" 
                Grid.Row="1"
                BorderBrush="{StaticResource LowPrioritySolidColorBrush}"
                FontSize="17"
                Visibility="Visible"
                Margin="0,15,0,0"/>
<RadioButton Style="{StaticResource PriorityRadioStyle}" Grid.Column="1" 
                Margin="0,15,0,0"
                Grid.Row="1"
                Content="Medium" 
                Tag="Medium" 
                Visibility="Visible"
                BorderBrush="{StaticResource MediumPrioritySolidColorBrush}"
                FontSize="17"/>
<RadioButton Style="{StaticResource PriorityRadioStyle}" Grid.Column="2" 
                Margin="20,15,0,0"
                Grid.Row="1"
                Content="High"
                Tag="High" 
                Visibility="Visible"
                BorderBrush="{StaticResource HighPrioritySolidColorBrush}" 
                FontSize="17"/>

【讨论】：

  • 我有相同的代码。我的代码最后一次工作。我没有改变任何东西。但现在它不起作用。所以我需要你的帮助。
  • 有点切题：值得指出的是，虽然这是一个漂亮的结果，但它并不是很好的 UI。色盲的人无法区分颜色，所以这个人会丢失。一般来说，当你想通过颜色来区分时，你还应该尝试通过其他东西来区分——形状、图标、下划线等。这样你就可以了解每个项目对每个人的重要性。总而言之，解决方案+1；做得好。 :)
  • @AlexcandraKhotko 当然，您还必须使用Style="{StaticResource PriorityRadioStyle}" 将样式应用于您的单选按钮。我在答案中添加了一个示例。
  • @AriRoth 你是对的，但在这种情况下，每个单选按钮也有一个标签，它确实说明了优先级，所以它应该很好:-)。
  • @MartinZikmund 真的！在这种情况下，文本将涵盖它。我只是想指出，一般来说，简单的颜色不足以作为视觉分隔符（阴影除外——例如，较深/较浅的灰色阴影通常是可以的）。就像我说的，切线。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-04-04
  • 2017-09-26
  • 1970-01-01
  • 1970-01-01
  • 2017-02-26
  • 1970-01-01
  • 2017-03-18
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode