UWPのラジオボタンのスタイル

Question

UWPアプリケーションにはいくつかのラジオボタンがありますが、スタイルを設定する方法についてはあまりよく分かりません。

私は選択肢の一つが選択されている場合、それが青色に変わりますよう...下記入れているものと同様である通常のボタン、同じようにスタイルを好むだろうが、ユーザーの場合別のオプションを選択したい場合は、選択したものがグレーに戻り、新しく選択されたオプションが青に変わります。

私は、一度に1つのタイマーだけを選択できるようにしたいと思っています。それがあなたのラジオボタンにこのスタイルを適用し、その後のコンテンツプレゼンターを変更した後、あなたがする必要がどのような

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>