在UWP中设置RadioButton样式

时间:2016-10-24 13:19:54

标签: xaml radio-button uwp win-universal-app uwp-xaml

我设置了单选按钮以创建颜色选择器。我删除了单选按钮的内容属性和其他一些样式。见下文。 预期行为:仅椭圆没有填充空间。 但即使设置了单选按钮的宽度和高度,我也会在椭圆周围获得额外的空间。我做错了什么?

enter image description here

我的XAML:

    <RadioButton x:Name="Blue" Tag="0" Width="32" Height="32"
                 RelativePanel.AlignTopWithPanel="True" 
                 RelativePanel.AlignLeftWithPanel="True"
                 GroupName="ColorPicker"
                 Background="#C6F5F9" Checked="Color_Checked" Style="{StaticResource ColorPickerStyle}"/>

我的单选按钮样式:

<Style x:Key="ColorPickerStyle" TargetType="RadioButton">
    <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/>
    <Setter Property="Margin" Value="4,4,4,4"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <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" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse x:Name="OuterEllipse" Stroke="Black" StrokeThickness="2" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" UseLayoutRounding="False"/>
                    <FontIcon x:Name="CheckGlyph" FontSize="16" Height="16" Width="16" Glyph="&#xE8FB;" 
                                      UseLayoutRounding="False" AutomationProperties.Name="Select"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

1 个答案:

答案 0 :(得分:1)

将MinWidth和MinHeight属性设置为0修复了问题。