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" />

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

1 个答案: