WPF: стилизация радио кнопок в квадрат

Question

У меня есть приложение WPF, в котором мне нужно, чтобы пользователь выбрал один и только один угол экранной рамки.

Для меня имеет смысл, чтобы тип кнопки был переключателем. Точно один угол может быть выбран за один раз.

Но в Windows и WPF кнопки «Радио» естественно круглые. Но WPF позволяет переустанавливать элементы пользовательского интерфейса, если они понимают, как.

Может кто-нибудь показать мне, как это может быть рестайлинг. Я хотел бы, чтобы это было сделано таким образом, чтобы это не влияло на внешний вид других переключателей в том же окне.

Answer 1

Чтобы стилизовать RadioButton так, как вы хотите, вам нужно изменить ControlTemplate на пользовательский. Эта ссылка имеет образец 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" />