让文本在单选按钮模板中对齐

Question

我正在尝试制作一个如下所示的单选按钮模板： enter image description here

这是我添加的模板：

<Style
        x:Key="MainWindowTemplateConfigurationWindowRadioButtonStyle"
        TargetType="RadioButton"
        BasedOn="{StaticResource MainWindowRadioButtonImageStyle}">
        <Setter
            Property="Margin"
            Value="3,3" />
        <Setter
            Property="Template">
            <Setter.Value>
                <ControlTemplate
                    TargetType="{x:Type RadioButton}">
                    <Border BorderThickness="2" BorderBrush="{StaticResource BRInactiveItemBackgroundBrush}" >
                        <StackPanel x:Name="Panel" Background="{StaticResource ControlsLightBorderBrush}" VerticalAlignment="Stretch"
                                    >
                            <TextBlock x:Name="ButtonText" TextAlignment="Center" FontSize="25" Padding="7,7" VerticalAlignment="Center"
                                       />
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.SystemConfiguration}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource SystemConfigurationRadioButton}" />
                            <Setter
                                Property="Background"
                                TargetName="Panel"
                                Value="{StaticResource BRInactiveItemBackgroundBrush}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.SystemConfiguration}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource SystemConfigurationRadioButton}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.PlateSetup}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource PlateSetup}" />
                            <Setter
                                Property="Background"
                                TargetName="Panel"
                                Value="{StaticResource BRInactiveItemBackgroundBrush}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.PlateSetup}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource PlateSetup}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.ThermalCyclingProtocol}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource ThermalProtocol}" />
                            <Setter
                                Property="Background"
                                TargetName="Panel"
                                Value="{StaticResource BRInactiveItemBackgroundBrush}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.ThermalCyclingProtocol}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource ThermalProtocol}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.Reports}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="True" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource ReportsRadioButton}" />
                            <Setter
                                Property="Background"
                                TargetName="Panel"
                                Value="{StaticResource BRInactiveItemBackgroundBrush}" />
                        </MultiDataTrigger>
                        <MultiDataTrigger>
                            <MultiDataTrigger.Conditions>
                                <Condition 
                                    Binding="{Binding Tag, RelativeSource={RelativeSource Self}}"
                                    Value="{x:Static views:DisplayModes.Reports}"/>
                                <Condition
                                    Binding="{Binding IsChecked, RelativeSource={RelativeSource Self}}"
                                    Value="False" />
                            </MultiDataTrigger.Conditions>
                            <Setter
                                Property="Text"
                                TargetName="ButtonText"
                                Value="{StaticResource ReportsRadioButton}" />
                        </MultiDataTrigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

然而，我得到的结果是这样的： enter image description here

我已经尝试使用 StackPanel 和 TextBlock 之间的所有属性来将文本对齐到单选按钮的中心，但是当我这样做时，我得到的结果是文本居中对齐，但是然后内容不适合填充单选按钮的 space。我无法附上更多图片，因为我没有足够的声誉，抱歉...

我基本上是通过将 StackPanel 的 VerticalAlignment 从 Stretch 更改为 Center 而得到的，但是它并没有正确填充整个区域。我强制使用这种样式的每个 RadioButton 的高度与最高按钮（那个说 Thermal Cyling Protocol 的按钮）的高度相同，而且我似乎无法弄清楚如何使两个文本都居中并同时填写多余的高度...

如有任何帮助，我们将不胜感激。如果有帮助，这是我布置单选按钮的方式：

<Grid Margin="5,5">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" >
                    <Grid.RowDefinitions>
                        <RowDefinition SharedSizeGroup="A"/>
                        <RowDefinition SharedSizeGroup="A"/>
                        <RowDefinition SharedSizeGroup="A"/>
                        <RowDefinition SharedSizeGroup="A"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <RadioButton Grid.Row="0" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}" 
                                 HorizontalAlignment="Stretch"
                                 Height="{Binding ActualHeight, ElementName=ThermalCyclingProtocolButton}"
                                 Tag="{x:Static views:DisplayModes.SystemConfiguration}">
                    </RadioButton>
                    <RadioButton Grid.Row="1" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}" 
                                 HorizontalAlignment="Stretch"
                                 Height="{Binding ActualHeight, ElementName=ThermalCyclingProtocolButton}"
                                 Tag="{x:Static views:DisplayModes.PlateSetup}">
                    </RadioButton>
                    <RadioButton Grid.Row="2" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}" 
                                 HorizontalAlignment="Stretch" x:Name="ThermalCyclingProtocolButton"
                                 Tag="{x:Static views:DisplayModes.ThermalCyclingProtocol}">
                    </RadioButton>
                    <RadioButton Grid.Row="3" Style="{StaticResource MainWindowTemplateConfigurationWindowRadioButtonStyle}" 
                                 HorizontalAlignment="Stretch"
                                 Height="{Binding ActualHeight, ElementName=ThermalCyclingProtocolButton}"
                                 Tag="{x:Static views:DisplayModes.Reports}">
                    </RadioButton>
                </Grid>
            </Grid>
        </Grid>
    </Grid>

Answer 1

将模板中的面板从 StackPanel 更改为 Grid。现在已经达到了我想要的效果。

让文本在单选按钮模板中对齐

Getting text to align in a radio button template

wpf

templates

textblock

radio-button