如何更改单选按钮的填充颜色？

Question

我的手机有黑色主题，我已将页面背景转换为白色（无论可能是主题）。现在，当我使用单选按钮或复选框时，一切都是白色的。即使在改变前景色之后也没有改变。我怎样才能改变单选按钮的填充颜色？

Answer 1

你将不得不为CHECK BOX CONTROL TEMPLATE创建一个新的样式，在这里，复制粘贴给定的代码，并更改各个地方的颜色&看看这是否有帮助。同样的方式，你可以为RADIO BUTTON做到这一点，但你必须在那里改变控制模板。

<Style x:Key="PhoneButtonBase" 
    TargetType="ButtonBase"> 
<Setter Property="Background" 
     Value="{StaticResource TransparentBrush}" /> 
<Setter Property="BorderBrush" 
     Value="**SET BORDER BRUSH COLOR YOU WANT FOR YOUR CB**" /> 
<Setter Property="BorderThickness" 
     Value="3" /> 
<Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="ButtonBase"> 
      <Grid Background="Transparent"> 
       <Border x:Name="ButtonBackground" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         Background="{TemplateBinding Background}" 
         CornerRadius="2"> 
        <ContentControl x:Name="ContentContainer" 
            ContentTemplate="{TemplateBinding ContentTemplate}" 
            Content="{TemplateBinding Content}" 
            Foreground="{TemplateBinding Foreground}" 
            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
            VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" /> 
       </Border> 
      </Grid> 
     </ControlTemplate> 
    </Setter.Value> 
</Setter> 

<Style x:Key="PhoneRadioButtonCheckBoxBase" 
     BasedOn="{StaticResource PhoneButtonBase}" 
     TargetType="ToggleButton"> 
    <Setter Property="Background" 
      Value="**SET BACKGROUND COLOR YOU WANT FOR YOUR CB**" /> 
    <Setter Property="BorderBrush" 
      Value="**SET BORDER BRUSH COLOR YOU WANT FOR YOUR CB**" /> 
    <Setter Property="BorderThickness" 
      Value="3" /> 
    <Setter Property="HorizontalContentAlignment" 
      Value="Center" /> 
    <Setter Property="VerticalContentAlignment" 
      Value="Center" /> 
</Style> 

<Style x:Key="simpleCheckBoxStyle" 
     BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" 
     TargetType="CheckBox"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="CheckBox"> 
       <Grid Background="Transparent" 
         HorizontalAlignment="Left"> 
        <VisualStateManager.VisualStateGroups> 
         <VisualStateGroup x:Name="CommonStates"> 
          <VisualState x:Name="Normal" /> 
          <VisualState x:Name="MouseOver" /> 
          <VisualState x:Name="Pressed"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" 
                    Storyboard.TargetName="CheckMark"> 
             <DiscreteObjectKeyFrame KeyTime="0" 
                   Value="{StaticResource PhoneButtonBasePressedForegroundBrush}" /> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
         </VisualStateGroup> 
         <VisualStateGroup x:Name="CheckStates"> 
          <VisualState x:Name="Checked"> 
           <Storyboard> 
            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" 
                    Storyboard.TargetName="CheckMark"> 
             <DiscreteObjectKeyFrame KeyTime="0"> 
              <DiscreteObjectKeyFrame.Value> 
               <Visibility>Visible</Visibility> 
              </DiscreteObjectKeyFrame.Value> 
             </DiscreteObjectKeyFrame> 
            </ObjectAnimationUsingKeyFrames> 
           </Storyboard> 
          </VisualState> 
          <VisualState x:Name="Unchecked" /> 
         </VisualStateGroup> 
        </VisualStateManager.VisualStateGroups> 
        <Grid> 
         <Grid Grid.Column="0" 
           VerticalAlignment="Top"> 
          <Border x:Name="CheckBackground" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{StaticResource PhoneBorderThickness}" 
            Background="{TemplateBinding Background}" 
            HorizontalAlignment="Center" 
            Height="32" 
            IsHitTestVisible="False" 
            VerticalAlignment="Center" 
            Width="32" /> 
          <Path x:Name="CheckMark" 
            Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" 
            Fill="**SET COLOR FOR THE CHECK MARK**" 
            FlowDirection="LeftToRight" 
            HorizontalAlignment="Center" 
            Height="21" 
            IsHitTestVisible="False" 
            Stretch="Fill" 
            StrokeThickness="3" 
            StrokeLineJoin="Round" 
            Visibility="Collapsed" 
            VerticalAlignment="Center" 
            Width="23" /> 
         </Grid> 
        </Grid> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

然后给CB;

<CheckBox Style="{StaticResource simpleCheckBoxStyle}" /> 

Answer 2

只要改变填充颜色为CheckBackground，对勾和ContentContainer在RadioButtonStyle实现你的目标。与此类似，

<Ellipse x:Name="CheckBackground" Fill="{StaticResource RedColor}" HorizontalAlignment="Left" Height="32" IsHitTestVisible="False" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{StaticResource PhoneStrokeThickness}" VerticalAlignment="Center" Width="32"/> 
<Ellipse x:Name="CheckMark" Fill="{StaticResource WhiteColor}" HorizontalAlignment="Center" Height="16" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="16"/> 
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{StaticResource BlackColor}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,0,0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 

而那些颜色款式，

<SolidColorBrush Color="#FF0000" x:Key="RedColor"></SolidColorBrush> 
    <SolidColorBrush Color="#FFFFFF" x:Key="WhiteColor"></SolidColorBrush> 
    <SolidColorBrush Color="#000000" x:Key="BlackColor"></SolidColorBrush> 

现在，让你的背景为白色。你完成了。您可以参考以下样式（完整代码）供您参考。

<phone:PhoneApplicationPage.Resources> 

    <SolidColorBrush Color="#FF0000" x:Key="RedColor"></SolidColorBrush> 
    <SolidColorBrush Color="#FFFFFF" x:Key="WhiteColor"></SolidColorBrush> 
    <SolidColorBrush Color="#000000" x:Key="BlackColor"></SolidColorBrush> 

    <Style x:Key="PhoneButtonBase" TargetType="ButtonBase"> 
     <Setter Property="Background" Value="Transparent"/> 
     <Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/> 
     <Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> 
     <Setter Property="Padding" Value="10,5,10,6"/> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="ButtonBase"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneAccentBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}"> 
          <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Border> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    <Style x:Key="PhoneRadioButtonCheckBoxBase" BasedOn="{StaticResource PhoneButtonBase}" TargetType="ToggleButton"> 
     <Setter Property="Background" Value="{StaticResource PhoneRadioCheckBoxBrush}"/> 
     <Setter Property="BorderBrush" Value="{StaticResource PhoneRadioCheckBoxBorderBrush}"/> 
     <Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/> 
     <Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyNormal}"/> 
     <Setter Property="HorizontalContentAlignment" Value="Left"/> 
     <Setter Property="VerticalContentAlignment" Value="Center"/> 
     <Setter Property="Padding" Value="0"/> 
    </Style> 
    <Style x:Key="RadioButtonStyle1" BasedOn="{StaticResource PhoneRadioButtonCheckBoxBase}" TargetType="RadioButton"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="RadioButton"> 
        <Grid Background="Transparent"> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CommonStates"> 
           <VisualState x:Name="Normal"/> 
           <VisualState x:Name="MouseOver"/> 
           <VisualState x:Name="Pressed"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneRadioCheckBoxPressedBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneButtonBasePressedForegroundBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Disabled"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Stroke" Storyboard.TargetName="CheckBackground"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckMark"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer"> 
              <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="CheckMark"> 
              <DiscreteObjectKeyFrame KeyTime="0"> 
               <DiscreteObjectKeyFrame.Value> 
                <Visibility>Visible</Visibility> 
               </DiscreteObjectKeyFrame.Value> 
              </DiscreteObjectKeyFrame> 
             </ObjectAnimationUsingKeyFrames> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked"/> 
           <VisualState x:Name="Indeterminate"/> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <Grid Margin="{StaticResource PhoneTouchTargetLargeOverhang}"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="32"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Ellipse x:Name="CheckBackground" Fill="{StaticResource RedColor}" HorizontalAlignment="Left" Height="32" IsHitTestVisible="False" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="{StaticResource PhoneStrokeThickness}" VerticalAlignment="Center" Width="32"/> 
          <Ellipse x:Name="CheckMark" Fill="{StaticResource WhiteColor}" HorizontalAlignment="Center" Height="16" IsHitTestVisible="False" Visibility="Collapsed" VerticalAlignment="Center" Width="16"/> 
          <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="1" Foreground="{StaticResource BlackColor}" FontSize="{TemplateBinding FontSize}" FontFamily="{TemplateBinding FontFamily}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="12,0,0,0" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/> 
         </Grid> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</phone:PhoneApplicationPage.Resources> 

你可以参考我试过的源代码。它也具有CheckBox的风格，可以帮助你。 http://1drv.ms/1sS4loX