Question

这是我的代码：

<StackPanel Name="stackPanelMain" Orientation="Vertical">
    <RadioButton Content="Work" Style="{StaticResource Rick_RadioButtonOption}"/>
    <RadioButton Content="Non-Work" Style="{StaticResource Rick_RadioButtonOption}"/>
</StackPanel>

这是风格：

<Style TargetType="RadioButton" x:Key="Rick_RadioButtonOption">
    <Setter Property="Background" Value="White" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="Margin" Value="5" />
    <Setter Property="FontSize" Value="18" />
    <Setter Property="Padding" Value="27" />
</Style>

我增加了填充，因此更明显的是发生了什么。文本按预期/需要居中，但实际的单选按钮仍保持左上角：

如何让单选按钮垂直居中并略微向右？我已经尝试过解决方案here，但它对我的情况不起作用。

EDIT 根据@asitis请求 - 如果我在样式中设置这两个属性，这就是我得到的：

<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="Red" />

Answer 1

只需修改RadioButton的默认样式即可完成此操作。您可以使用LiveVisualTree查看RadioButton的默认样式，RadioButton实际上是Grid，其中包含另一个Grid，其中包含3 Ellipses和ContentPresenter这样：

使用Live Visual Tree可以获得正在运行的XAML代码的实时视图，您可以在调试应用程序时在VS2015中使用此工具，在vs2015的左侧打开它：
如果您修改RadioButton默认样式的副本，则可以看到Grid与Ellipses的{{1}}类似<Grid Height="32" VerticalAlignment="Top">。这就是为什么Ellipses位于顶部的原因。所以你可以自定义这样的风格：

<Style x:Key="RadioButtonStyle" TargetType="RadioButton">
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
    <!--<Setter Property="Padding" Value="8,6,0,0" />-->
    <Setter Property="Padding" Value="27" />
    <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="18" />
    <Setter Property="Margin" Value="5" />
    <Setter Property="MinWidth" Value="120" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="Template">
    ......
    <Grid Height="32" VerticalAlignment="Center">
       <Ellipse x:Name="OuterEllipse" Height="20" Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="20" />
       <Ellipse x:Name="CheckOuterEllipse" Fill="{ThemeResource SystemControlHighlightTransparentBrush}" Height="20" Opacity="0" Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}" StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" UseLayoutRounding="False" Width="20" />
       <Ellipse x:Name="CheckGlyph" Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" Height="10" Opacity="0" UseLayoutRounding="False" Width="10" />
    </Grid>
    ......
</Style>

顺便说一下，要修改RadioButton的模板，我们可以在“文档大纲”中选择“ [RadioButton] ”并右键单击，然后选择“修改模板”→“编辑副本... ”。

Answer 2

将verticalAligment property设置为center的{{1}}， Radiobutton中的椭圆始终位于顶部，要解决此问题，您必须更改模板

RadioButton

Answer 3

在页面或应用程序资源中添加此控件模板：

<ControlTemplate x:Key="RadioButtonControlTemplate1" TargetType="RadioButton">
            <Grid Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal" />
                        <VisualState x:Name="PointerOver">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
                                    Storyboard.TargetProperty="Stroke">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Stroke">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Pressed">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
                                    Storyboard.TargetProperty="Stroke">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Stroke">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
                                    Storyboard.TargetProperty="Stroke">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Stroke">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                    Storyboard.TargetProperty="Fill">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                    Storyboard.TargetProperty="Foreground">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetName="CheckGlyph"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1"
                                    Duration="0" />
                                <DoubleAnimation Storyboard.TargetName="OuterEllipse"
                                    Storyboard.TargetProperty="Opacity"
                                    To="0"
                                    Duration="0" />
                                <DoubleAnimation Storyboard.TargetName="CheckOuterEllipse"
                                    Storyboard.TargetProperty="Opacity"
                                    To="1"
                                    Duration="0" />
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked" />
                        <VisualState x:Name="Indeterminate" />
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="20" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Grid VerticalAlignment="Center" Height="32" >
                    <Ellipse x:Name="OuterEllipse"
                        Width="20"
                        Height="20"
                        UseLayoutRounding="False"
                        Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                        StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
                    <Ellipse x:Name="CheckOuterEllipse"
                        Width="20"
                        Height="20"
                        UseLayoutRounding="False"
                        Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}"
                        Fill="{ThemeResource SystemControlHighlightTransparentBrush}"
                        Opacity="0"
                        StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}"
                             />
                    <Ellipse x:Name="CheckGlyph"
                        Width="10"
                        Height="10"
                        UseLayoutRounding="False"
                        Opacity="0"
                        Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
                </Grid>
                <ContentPresenter x:Name="ContentPresenter"
                    Content="{TemplateBinding Content}"
                    ContentTransitions="{TemplateBinding ContentTransitions}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    Margin="{TemplateBinding Padding}"
                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    Grid.Column="1"
                    AutomationProperties.AccessibilityView="Raw"
                    TextWrapping="Wrap" />
            </Grid>
        </ControlTemplate>

并以这种方式将其应用于您的单选按钮：

<RadioButton Content="Non-Work" Style="{StaticResource Rick_RadioButtonOption}" Template="{StaticResource RadioButtonControlTemplate1}"/>

Answer 4

Margin和Padding有4个值：Left，Top，Right，Bottom。如果仅使用一个值，则所有四个值都将设置为相同。要将RadioButton向右移动，您必须增加Left Margin值。您还应该使用TargetType="{x:Type RadioButton}"：

   <Style TargetType="{x:Type RadioButton}" x:Key="Rick_RadioButtonOption">
        <Setter Property="Background" Value="White" />
        <Setter Property="HorizontalAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="Margin" Value="10,5,5,5" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="Padding" Value="27" />
    </Style>

XAML UWP单选按钮图标与中心对齐

4 个答案: