使單選按鈕顯示爲UWP中的切換按鈕

Question

我想使兩個單選按鈕顯示爲切換按鈕（因此用戶只能選擇一個，但看起來像按鈕）。 只見回答關於WPF你如何才能創建一個單選按鈕風格的基礎上，切換按鈕，但在UWP，這是不支持：

<RadioButton Style="{StaticResource {x:Type ToggleButton}}" /> 

什麼是實現這一目標的最徹底的方法？

Answer 1

使用XAML這很容易做到。

這裏是我做過什麼：

• 創建一個按鈕，右鍵單擊它，選擇編輯模板，然後編輯複製。
• 創建一個單選按鈕，右鍵單擊它，選擇編輯模板，然後編輯副本。
• 現在用按鈕樣式中的XAML替換單選按鈕樣式的樣式。
• 只保留單選按鈕特定的視覺狀態：選中，取消選中等。
• 現在確保動畫引用正確的UIElements。您可以修改單選按鈕的外觀，但是您可以選擇。

這會給你一個單選按鈕，看起來像一個切換按鈕。

這裏是它的樣子：

，這裏是單選按鈕樣式：

<Style TargetType="RadioButton"> 
     <Setter Property="Background" Value="{ThemeResource ButtonBackground}" /> 
     <Setter Property="Foreground" Value="{ThemeResource ButtonForeground}" /> 
     <Setter Property="BorderBrush" Value="{ThemeResource ButtonBorderBrush}" /> 
     <Setter Property="BorderThickness" Value="{ThemeResource ButtonBorderThemeThickness}" /> 
     <Setter Property="Padding" Value="8,4,8,4" /> 
     <Setter Property="HorizontalAlignment" Value="Left" /> 
     <Setter Property="VerticalAlignment" Value="Center" /> 
     <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" /> 
     <Setter Property="FontWeight" Value="Normal" /> 
     <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" /> 
     <Setter Property="UseSystemFocusVisuals" Value="True" /> 
     <Setter Property="FocusVisualMargin" Value="-3" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="RadioButton"> 
        <Grid x:Name="RootGrid" Background="{TemplateBinding Background}"> 
         <ContentPresenter 
          x:Name="ContentPresenter" 
          Padding="{TemplateBinding Padding}" 
          HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" 
          AutomationProperties.AccessibilityView="Raw" 
          BorderBrush="{TemplateBinding BorderBrush}" 
          BorderThickness="{TemplateBinding BorderThickness}" 
          Content="{TemplateBinding Content}" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" /> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"> 
            <Storyboard> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="PointerOver"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPointerOver}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPointerOver}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPointerOver}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerUpThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundPressed}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushPressed}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundPressed}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <PointerDownThemeAnimation Storyboard.TargetName="RootGrid" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBackgroundDisabled}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonBorderBrushDisabled}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonForegroundDisabled}" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderBrush"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundAccentBrush}" /> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="BorderThickness"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="4" /> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked" /> 
           <VisualState x:Name="Indeterminate" /> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 

希望這回答了你的問題。