XAML如何樣式複選框的框顏色？

Question

我正在做一個UWP項目，需要設置複選框的框顏色。我看到我可以更改複選框的標籤顏色，但不能更改框本身。

我的編碼比較簡單：

<CheckBox x:Name="cb1" Content="Checkbox" Foreground="#FFE01515"/> 

我用Google搜索網站的數字，我知道自定義模板是解決辦法，但我不知道如何構建資源。

那麼，如何設計複選框的樣式？

Answer 1

很快，你可以設置BorderBrush財產

如果你想確定自己的複選框風格採用默認風格，改變你想要什麼

<!-- Default style for Windows.UI.Xaml.Controls.CheckBox --> 
     <Style TargetType="CheckBox"> 
      <Setter Property="Background" Value="Transparent" /> 
      <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/> 
      <Setter Property="Padding" Value="8,5,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="MinHeight" Value="32" /> 
      <Setter Property="UseSystemFocusVisuals" Value="True" /> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="CheckBox"> 
         <Grid Background="{TemplateBinding Background}" 
        BorderBrush="{TemplateBinding BorderBrush}" 
        BorderThickness="{TemplateBinding BorderThickness}"> 
          <VisualStateManager.VisualStateGroups> 
           <VisualStateGroup x:Name="CombinedStates"> 
            <VisualState x:Name="UncheckedNormal" /> 
            <VisualState x:Name="UncheckedPointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="UncheckedPressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="NormalRectangle" 
           Storyboard.TargetProperty="StrokeThickness" 
           To="{ThemeResource CheckBoxCheckedStrokeThickness}" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="UncheckedDisabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedNormal"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="NormalRectangle" 
           Storyboard.TargetProperty="StrokeThickness" 
           To="{ThemeResource CheckBoxCheckedStrokeThickness}" 
           Duration="0" /> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedPointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedPressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="NormalRectangle" 
           Storyboard.TargetProperty="StrokeThickness" 
           To="{ThemeResource CheckBoxCheckedStrokeThickness}" 
           Duration="0" /> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="CheckedDisabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="IndeterminateNormal"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundAccentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Glyph"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="IndeterminatePointerOver"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Glyph"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="IndeterminatePressed"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlForegroundBaseMediumBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Glyph"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
            <VisualState x:Name="IndeterminateDisabled"> 
             <Storyboard> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Fill"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" 
               Storyboard.TargetProperty="Stroke"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" 
               Storyboard.TargetProperty="Foreground"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" /> 
              </ObjectAnimationUsingKeyFrames> 
              <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" 
               Storyboard.TargetProperty="Glyph"> 
               <DiscreteObjectKeyFrame KeyTime="0" Value="&#xE73C;" /> 
              </ObjectAnimationUsingKeyFrames> 
              <DoubleAnimation Storyboard.TargetName="CheckGlyph" 
           Storyboard.TargetProperty="Opacity" 
           To="1" 
           Duration="0" /> 
             </Storyboard> 
            </VisualState> 
           </VisualStateGroup> 
          </VisualStateManager.VisualStateGroups> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="20" /> 
           <ColumnDefinition Width="*" /> 
          </Grid.ColumnDefinitions> 
          <Grid VerticalAlignment="Top" Height="32"> 
           <Rectangle x:Name="NormalRectangle" 
         Fill="Transparent" 
         Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}" 
         StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" 
         UseLayoutRounding="False" 
         Height="20" 
         Width="20" /> 
           <FontIcon x:Name="CheckGlyph" 
         FontFamily="{ThemeResource SymbolThemeFontFamily}" 
         Glyph="&#xE001;" 
         FontSize="20" 
         Foreground="Green" 
         Opacity="0" /> 
          </Grid> 
          <ContentPresenter x:Name="ContentPresenter" 
          ContentTemplate="{TemplateBinding ContentTemplate}" 
          ContentTransitions="{TemplateBinding ContentTransitions}" 
          Content="{TemplateBinding Content}" 
          Margin="{TemplateBinding Padding}" 
          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
          Grid.Column="1" 
          AutomationProperties.AccessibilityView="Raw" 
          TextWrapping="Wrap" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style>