WPF：将单选按钮样式化为正方形

Question

我有一个 WPF 应用程序，我需要用户在其中选择一个屏幕框的一个角。

按钮的类型是单选按钮对我来说很有意义。一次只能选择一个角。

但是，单选按钮在 Windows 和 WPF 中自然是圆形的。但是 WPF 允许人们重新设置 UI 元素的样式，前提是他们知道如何操作。

谁能告诉我如何重新设计它。我希望以一种不会影响同一窗口中其他单选按钮外观的方式完成它。

Answer 1

要按照您想要的方式设置RadioButton 的样式，您需要将其ControlTemplate 更改为自定义样式。这个link 有一个样本ControlTemplate。我已经对其进行了调整，使RadioButton 显示为一个正方形。这是一个简化的ControlTemplate，因为它没有动画：

<Style x:Key="SquareRadioButton" TargetType="{x:Type RadioButton}">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="FocusVisualStyle" Value="{DynamicResource RadioButtonFocusVisual}" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type RadioButton}">
                <BulletDecorator Background="Transparent">
                    <BulletDecorator.Bullet>
                        <Grid Width="13" Height="13">
                            <Rectangle
                                x:Name="Border"
                                StrokeThickness="1"
                                Stroke="Black"
                                Fill="White"
                                />
                            <Rectangle
                                x:Name="CheckMark"
                                Fill="Black"
                                Visibility="Collapsed"
                                Margin="2"
                                />
                        </Grid>
                    </BulletDecorator.Bullet>
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                            <VisualState x:Name="MouseOver" />
                            <VisualState x:Name="Pressed" />
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ColorAnimationUsingKeyFrames
                                        Storyboard.TargetName="Border"
                                        Storyboard.TargetProperty="Stroke.Color"
                                        >
                                        <DiscreteColorKeyFrame KeyTime="0" Value="LightGray" />
                                    </ColorAnimationUsingKeyFrames>
                                    <ColorAnimationUsingKeyFrames
                                        Storyboard.TargetName="CheckMark"
                                        Storyboard.TargetProperty="Fill.Color"
                                        >
                                        <DiscreteColorKeyFrame KeyTime="0" Value="LightGray" />
                                    </ColorAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked" >
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames
                                        Storyboard.TargetName="CheckMark"
                                        Storyboard.TargetProperty="(UIElement.Visibility)"
                                        >
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="{x:Static Visibility.Visible}" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked" />
                            <VisualState x:Name="Indeterminate" />
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <ContentPresenter
                        Margin="4,0,0,0"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        RecognizesAccessKey="True"
                        />
                </BulletDecorator>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后你可以将它应用到你想要设置样式的RadioButton：

<RadioButton Style="{StaticResource SquareRadioButton}" Content="Option 1" />