Question

我有这两个单选按钮，点击后我将单选按钮内的文字加粗。发生这种情况时，单选按钮的宽度会增加几个像素。我该如何防止这种情况发生？在这个例子中，单选按钮内的“内容”是硬编码的，但是将来不会硬编码，所以给按钮设置宽度不是一种选择。关于如何实现这一目标的任何想法？

<Page
x:Class="ButtonTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:ButtonTest"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
    <Style x:Key="RadioButtonStyle" TargetType="RadioButton">
        <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}" />
        <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}" />
        <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}" />
        <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="0" />
        <Setter Property="UseSystemFocusVisuals" Value="True" />
        <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3" />
        <Setter Property="Padding" Value="16,12" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="RadioButton">
                    <Grid x:Name="RootGrid" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="PointerOver">
                                    <VisualState.Setters>
                                        <Setter Target="ContentPresenter.Foreground" Value="Purple" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <VisualState.Setters>
                                        <Setter Target="FocusContentPresenter.FontWeight" Value="Bold" />
                                        <Setter Target="ContentPresenter.FontWeight" Value="Bold" />
                                        <Setter Target="FocusContentPresenter.(UIElement.Opacity)" Value="1" />
                                        <Setter Target="ContentPresenter.(UIElement.Opacity)" Value="0" />
                                    </VisualState.Setters>
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="TopBorder">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked" />
                                <VisualState x:Name="Indeterminate" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid Height="32" VerticalAlignment="Top">
                            <Border x:Name="TopBorder" BorderBrush="#FF054EEA" BorderThickness="0,5,0,0" HorizontalAlignment="Left" Height="20" VerticalAlignment="Top" Width="82" Margin="15,1,-77,0" Visibility="Collapsed"></Border>
                        </Grid>
                        <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" />
                        <ContentPresenter x:Name="FocusContentPresenter" Opacity="0" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

</Page.Resources>

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Margin="13,183,231,411">
        <RadioButton Content="RadioButton" x:Name="Radio1" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}"/>
    </Grid>
    <Grid Margin="13,257,227,341">
        <RadioButton Content="RadioButton" GroupName="Menu" HorizontalAlignment="Left" VerticalAlignment="Top" Style="{StaticResource RadioButtonStyle}" />
    </Grid>
</Grid>

Answer 1

只需将此不可见的TextBlock放在ContentPresenter旁边。

<TextBlock Text="{TemplateBinding Content}"
           VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
           HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
           TextWrapping="Wrap"
           Opacity="0"
           IsHitTestVisible="False"
           FontWeight="Bold"
           Margin="{TemplateBinding Padding}" />

如何在单击时加粗文本时保持radiobutton宽度不被扩展

1 个答案: