UWP의 라디오 버튼 스타일링

Question

UWP 애플리케이션에 몇 개의 라디오 버튼이 있지만 스타일을 지정하는 방법에 대해서는 잘 모르겠습니다.

나는 옵션 중 하나를 선택하면, 그것은 파란색으로 바뀝니다처럼 ... 아래에 넣어 한 것과 유사한 정상적인 버튼처럼 스타일을 좋아하지만 것이다 사용자의 경우 다른 옵션을 선택하려면 선택한 항목이 회색으로 돌아가고 새로 선택한 옵션이 파란색으로 바뀝니다.

사용자가 한 번에 하나의 타이머 만 선택할 수있게하려는 경우 버튼을 사용할 수 없습니다. 그 라디오 버튼에이 스타일을 적용하고 다음의 내용 발표자를 변경 한 후 당신이해야 할 일은

Answer 1

는 https://msdn.microsoft.com/en-us/library/windows/apps/mt299147.aspx

에서 UWP 신청 한 라디오 버튼의 기본 스타일을 복사하다 XAML을 통해 완전히 사용자 정의 할 수있는 필요와 디자인에 따라 라디오 버튼을 선택하십시오.

Answer 2

@Ipsit Gaur의 제안이 올바른 방향이었습니다. 나는 당신의 참고를위한 간단한 코드 샘플을했다 :

<Page.Resources> 
    <Style x:Key="RadioButtonStyle1" TargetType="RadioButton"> 
     <Setter Property="Background" Value="{ThemeResource RadioButtonBackground}"/> 
     <Setter Property="Foreground" Value="{ThemeResource RadioButtonForeground}"/> 
     <Setter Property="BorderBrush" Value="{ThemeResource RadioButtonBorderBrush}"/> 
     <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="FocusVisualMargin" Value="-7,-3,-7,-3"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="RadioButton"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}"> 

         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushPointerOver}"/> 
             </ObjectAnimationUsingKeyFrames> 

            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushPressed}"/> 
             </ObjectAnimationUsingKeyFrames> 

            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonForegroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBackgroundDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource RadioButtonBorderBrushDisabled}"/> 
             </ObjectAnimationUsingKeyFrames> 

            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="myGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="LightBlue"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked"/> 
           <VisualState x:Name="Indeterminate"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid x:Name="myGrid" Height="32" VerticalAlignment="Top"> 
          <ContentPresenter x:Name="ContentPresenter" AutomationProperties.AccessibilityView="Raw" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" TextWrapping="Wrap" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Page.Resources> 

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <StackPanel> 
     <RadioButton GroupName="1" Style="{StaticResource RadioButtonStyle1}">3 Seconds</RadioButton> 
     <RadioButton GroupName="1" Style="{StaticResource RadioButtonStyle1}">5 Seconds</RadioButton> 
     <RadioButton GroupName="1" Style="{StaticResource RadioButtonStyle1}">7 Seconds</RadioButton> 
    </StackPanel> 
</Grid>