Приложение UWP создает радиообъект без выбранного круга

Question

на универсальной платформе Windows, как создать RadioButton с внешним видом, похожим на кнопку? Вместо проверочного круга появится выбранная кнопка.

Спасибо!

Answer 1

Вам необходимо сыграть с Style из RadioButton. Таким образом, вы можете играть с VisualStates и OuterEllipse, CheckOuterEllipse и CheckGlyph эллипсами и удалять/изменять то, что вам нужно.

<Style TargetType="RadioButton"> 
    <Setter Property="Background" Value="Transparent" /> 
    <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
    <Setter Property="Padding" Value="8,6,0,0" /> 
    <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="120" /> 
    <Setter Property="UseSystemFocusVisuals" Value="True" /> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="RadioButton"> 
     <Grid Background="{TemplateBinding Background}" 
       BorderBrush="{TemplateBinding BorderBrush}" 
       BorderThickness="{TemplateBinding BorderThickness}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup x:Name="CommonStates"> 
      <VisualState x:Name="Normal" /> 
      <VisualState x:Name="PointerOver"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" 
               Storyboard.TargetProperty="Stroke"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" 
               Storyboard.TargetProperty="Stroke"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" 
               Storyboard.TargetProperty="Fill"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Fill"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Pressed"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" 
               Storyboard.TargetProperty="Stroke"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" 
               Storyboard.TargetProperty="Stroke"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" 
               Storyboard.TargetProperty="Fill"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Fill"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Disabled"> 
       <Storyboard> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse" 
               Storyboard.TargetProperty="Stroke"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" 
               Storyboard.TargetProperty="Stroke"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse" 
               Storyboard.TargetProperty="Fill"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Fill"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
        <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
       </ObjectAnimationUsingKeyFrames> 
       </Storyboard> 
      </VisualState> 
      </VisualStateGroup> 
      <VisualStateGroup x:Name="CheckStates"> 
      <VisualState x:Name="Checked"> 
       <Storyboard> 
       <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
       <DoubleAnimation Storyboard.TargetName="OuterEllipse" 
           Storyboard.TargetProperty="Opacity" 
           To="0" 
           Duration="0" /> 
       <DoubleAnimation Storyboard.TargetName="CheckOuterEllipse" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
       </Storyboard> 
      </VisualState> 
      <VisualState x:Name="Unchecked" /> 
      <VisualState x:Name="Indeterminate" /> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
      <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="20" /> 
      <ColumnDefinition Width="*" /> 
      </Grid.ColumnDefinitions> 
      <Grid VerticalAlignment="Top" Height="32" > 
      <Ellipse x:Name="OuterEllipse" 
         Width="20" 
         Height="20" 
         UseLayoutRounding="False" 
         Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
         StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" /> 
      <Ellipse x:Name="CheckOuterEllipse" 
         Width="20" 
         Height="20" 
         UseLayoutRounding="False" 
         Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}" 
         Fill="{ThemeResource SystemControlHighlightTransparentBrush}" 
         Opacity="0" 
         StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" /> 
      <Ellipse x:Name="CheckGlyph" 
         Width="10" 
         Height="10" 
         UseLayoutRounding="False" 
         Opacity="0" 
         Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" /> 
      </Grid> 
      <ContentPresenter x:Name="ContentPresenter" 
          Content="{TemplateBinding Content}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          Margin="{TemplateBinding Padding}" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          Grid.Column="1" 
          AutomationProperties.AccessibilityView="Raw" 
          TextWrapping="Wrap" /> 
     </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style>