XAML UWP 单选按钮图标对齐到中心答案

【问题标题】：XAML UWP Radio button icon aligned to centerXAML UWP 单选按钮图标对齐到中心
【发布时间】：2016-01-21 16:40:49
【问题描述】：

这是我的代码：

<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 的解决方案，但它不适用于我的情况。

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

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

【问题讨论】：

我尝试了你的风格和 xaml。按预期工作。但是如何使用上面的 xaml 获得这个高度？
@asitis 我是 xaml 的新手。使用填充设置元素的高度。你是这个意思吗？我不需要特定的高度。文本/单选按钮周围只有一点间距
我使用了相同的 xaml & 样式。我得到了正确对齐的项目。但高度适合单选按钮
你能分享产生图像中设计的确切代码吗？
以上几乎是该页面的所有代码——只是缺少标准的Page标签

标签： c# wpf xaml uwp

【解决方案1】：

这可以通过修改RadioButton 的默认样式来完成。你可以使用LiveVisualTree查看RadioButton的默认样式，一个RadioButton实际上是一个Grid，其中包含另一个Grid和3个Ellipses和一个ContentPresenter，如下所示：

使用Live Visual Tree可以实时查看你正在运行的XAML代码，你可以在VS2015中调试应用时使用这个工具，在vs2015左侧打开：
如果你编辑了RadioButton的默认样式的副本，你可以看到Grid和3个Ellipses是这样的<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的模板，我们可以在“Document Outline”中选择“[RadioButton]”并右键，然后选择“编辑模板”→“编辑副本...”。

【讨论】：

酷，我会在今天晚些时候试一试，让你知道我的进展如何。我从没想过这么简单的事情会有这么复杂的解决方案！

【解决方案2】：

将 verticalAligment property 设置为 center 为 RadioButton ， Radiobutton中的Ellipse总是在最上面，要解决这个问题，你必须改变模板

   <Style x:Key="RadioButtonStyle1" TargetType="{x:Type RadioButton}">
            <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" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RadioButton}">
                        <Grid x:Name="templateRoot" Background="Transparent" SnapsToDevicePixels="True">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Border x:Name="radioButtonBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="100" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="1,1,2,1" VerticalAlignment="Center">
                                <Grid x:Name="markGrid" Margin="2">
                                    <Ellipse x:Name="optionMark" Fill="#FF212121" MinWidth="6" MinHeight="6" Opacity="0"/>
                                </Grid>
                            </Border>
                            <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" ContentStringFormat="{TemplateBinding ContentStringFormat}" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="HasContent" Value="True">
                                <Setter Property="FocusVisualStyle">
                                    <Setter.Value>
                                        <Style>
                                            <Setter Property="Control.Template">
                                                <Setter.Value>
                                                    <ControlTemplate>
                                                        <Rectangle Margin="14,0,0,0" SnapsToDevicePixels="True" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/>
                                                    </ControlTemplate>
                                                </Setter.Value>
                                            </Setter>
                                        </Style>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="Padding" Value="4,-1,0,0"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFF3F9FF"/>
                                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF5593FF"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="False">
                                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFE6E6E6"/>
                                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FFBCBCBC"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="#FF707070"/>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter Property="Background" TargetName="radioButtonBorder" Value="#FFD9ECFF"/>
                                <Setter Property="BorderBrush" TargetName="radioButtonBorder" Value="#FF3C77DD"/>
                                <Setter Property="Fill" TargetName="optionMark" Value="#FF212121"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="True">
                                <Setter Property="Opacity" TargetName="optionMark" Value="1"/>
                            </Trigger>
                            <Trigger Property="IsChecked" Value="{x:Null}">
                                <Setter Property="Opacity" TargetName="optionMark" Value="0.56"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

【讨论】：

设置这个似乎没有任何改变
VerticalAligment 应该给出答案否则，使用答案中的样式

【解决方案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}"/>

【讨论】：

谢谢，我稍后再试试，告诉你结果

【解决方案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>

【讨论】：