Блог

Главная - Вопросы по программированию - Стилизация RadioButton в UWP

Стилизация RadioButton в UWP

#xaml #radio-button #uwp #win-universal-app #uwp-xaml

#xaml #переключатель #uwp #win-универсальное приложение #uwp-xaml

Вопрос:

Я изменил стиль своего переключателя, чтобы создать средство выбора цвета. Я удалил свойство содержимого переключателя и некоторые другие стили. Смотрите ниже. Ожидаемое поведение: только эллипс без дополнительного пространства вокруг него. Но я получаю дополнительное пространство вокруг эллипса даже после установки ширины и высоты переключателя. Что я делаю не так?

введите описание изображения здесь

Мой XAML:

     <RadioButton x:Name="Blue" Tag="0" Width="32" Height="32"
                 RelativePanel.AlignTopWithPanel="True" 
                 RelativePanel.AlignLeftWithPanel="True"
                 GroupName="ColorPicker"
                 Background="#C6F5F9" Checked="Color_Checked" Style="{StaticResource ColorPickerStyle}"/>

Мой стиль переключателей:

 <Style x:Key="ColorPickerStyle" TargetType="RadioButton">
    <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/>
    <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/>
    <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/>
    <Setter Property="Margin" Value="4,4,4,4"/>
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
    <Setter Property="UseSystemFocusVisuals" Value="True"/>
    <Setter Property="FocusVisualMargin" Value="-7,-3,-7,-3"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RadioButton">
                <Grid x:Name="RootGrid" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Background="Transparent">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal"/>
                            <VisualState x:Name="Pressed">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                        <VisualStateGroup x:Name="CheckStates">
                            <VisualState x:Name="Checked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckGlyph">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Indeterminate"/>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Ellipse x:Name="OuterEllipse" Stroke="Black" StrokeThickness="2" Width="{TemplateBinding Width}" Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" UseLayoutRounding="False"/>
                    <FontIcon x:Name="CheckGlyph" FontSize="16" Height="16" Width="16" Glyph="amp;#xE8FB;" 
                                      UseLayoutRounding="False" AutomationProperties.Name="Select"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Комментарии:

1. Попробуйте установить для свойств Padding, MinWidth и minHeight значение 0

2. Вы имеете в виду то, StrokeThickness что вы установили на свой эллипс? Это пространство?

3. . @Chris прав. Вы можете просто увидеть черную обводку на скриншоте.

4. Я имел в виду дополнительный пробел, который появляется после эллипса. Не черная обводка.

5. @Marian Dolinsky Спасибо!! Это сработало после настройки свойств MinWidth и minHeight.

Ответ №1:

Установка для свойств MinWidth и minHeight значения 0 исправила проблему.