c# windows phone 8.1 change default controls color

Question

in my wp app I would like to have all the controls' color black; for textblocks and textboxes I just declared a style in my dictionary like this:

<Style x:Key="TextColor" TargetType="TextBlock">
    <Setter Property="Foreground" Value="Black"/>
</Style>

I also have some time picker controls and a checkbox in which I couldn't modify the color of the header and the box respectively. This is what I did:

CheckBox VerticalAlignment="Top"
              HorizontalAlignment="Right"
              Margin="0,110,0,0"
              x:Name="dayOffBox"
              Content="Day off?" Checked="DayOff_Checked"
              Foreground="Black"/>

In this way,the text "Day off?" that is the content of checkbox is black, but the box is still white.

Same for the Header of time pickers. Do I have to change the default color of the app's text? How can I do that?

Answer 1

You can edit any control style by editing the default style of the control. In the case of the CheckBox it is the following:

<Style TargetType="CheckBox">
    <Setter Property="Background" Value="{ThemeResource CheckBoxBackgroundThemeBrush}" />
    <Setter Property="BorderBrush" Value="{ThemeResource CheckBoxBorderThemeBrush}" />
    <Setter Property="BorderThickness" Value="{ThemeResource PhoneBorderThickness}" />
    <Setter Property="FontSize" Value="{ThemeResource TextStyleLargeFontSize}" />
    <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="HorizontalAlignment" Value="Left" />
    <Setter Property="VerticalAlignment" Value="Top" />
    <Setter Property="Padding" Value="{ThemeResource CheckBoxAndRadioButtonTextPaddingThickness}" />
    <Setter Property="MinWidth" Value="{ThemeResource CheckBoxAndRadioButtonMinWidthSize}" />
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="CheckBox">
          <Grid Background="Transparent">
            <VisualStateManager.VisualStateGroups>
              <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="MouseOver" />
                <VisualState x:Name="PointerOver" />
                <VisualState x:Name="Pressed">
                  <Storyboard>
                    <PointerDownThemeAnimation Storyboard.TargetName="Grid" />
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="Background">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Fill">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Disabled">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckBackground" Storyboard.TargetProperty="BorderBrush">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Fill">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Fill">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBackgroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualStateGroup.Transitions>
                  <VisualTransition From="Pressed" To="PointerOver">
                    <Storyboard>
                      <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                    </Storyboard>
                  </VisualTransition>
                  <VisualTransition From="PointerOver" To="Normal">
                    <Storyboard>
                      <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                    </Storyboard>
                  </VisualTransition>
                  <VisualTransition From="Pressed" To="Normal">
                    <Storyboard>
                      <PointerUpThemeAnimation Storyboard.TargetName="Grid" />
                    </Storyboard>
                  </VisualTransition>
                </VisualStateGroup.Transitions>
              </VisualStateGroup>
              <VisualStateGroup x:Name="CheckStates">
                <VisualState x:Name="Checked">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph" Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
                <VisualState x:Name="Unchecked" />
                <VisualState x:Name="Indeterminate">
                  <Storyboard>
                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NormalRectangle" Storyboard.TargetProperty="Visibility">
                      <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                    </ObjectAnimationUsingKeyFrames>
                  </Storyboard>
                </VisualState>
              </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid x:Name="Grid" Margin="{ThemeResource PhoneTouchTargetLargeOverhang}">
              <Grid.ColumnDefinitions>
                <ColumnDefinition Width="25.5" />
                <ColumnDefinition Width="*" />
              </Grid.ColumnDefinitions>
              <Grid Grid.Column="0" VerticalAlignment="Top">
                <Border x:Name="CheckBackground"
                        IsHitTestVisible="False"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Left"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        Height="25.5"
                        Width="25.5" />
                <Rectangle x:Name="NormalRectangle"
                           IsHitTestVisible="False"
                           Width="13"
                           Height="13"
                           HorizontalAlignment="Center"
                           VerticalAlignment="Center"
                           Fill="{ThemeResource CheckBoxBackgroundThemeBrush}"
                           Visibility="Collapsed" />
                <Path x:Name="CheckGlyph"
                      IsHitTestVisible="False"
                      Visibility="Collapsed"
                      Width="18.5"
                      Height="17"
                      Stretch="Fill"
                      HorizontalAlignment="Center"
                      VerticalAlignment="Center"
                      Fill="{ThemeResource CheckBoxForegroundThemeBrush}"
                      Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z"
                      StrokeLineJoin="Round"
                      StrokeThickness="2.5"
                      FlowDirection="LeftToRight" />
              </Grid>
              <ContentPresenter x:Name="ContentPresenter"
                                Grid.Column="1" Content="{TemplateBinding Content}"
                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                Margin="{TemplateBinding Padding}"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                Foreground="{TemplateBinding Foreground}"
                                FontFamily="{ThemeResource PhoneFontFamilyNormal}"
                                FontSize="{ThemeResource TextStyleLargeFontSize}"
                                FontWeight="Normal"
                                AutomationProperties.AccessibilityView="Raw" />
            </Grid>
          </Grid>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

To change the color to black you need to change for example the Fill property on the CheckGlyph Path element from CheckBoxForegroundThemeBrush to another value. Or you can completely change the visual appearance of the CheckBox control. You can experiment for yourself.

Another way is to override any of the following resources by adding them to your App.xaml:

  <SolidColorBrush x:Key="CheckBoxBorderThemeBrush" Color="Black" />
  <SolidColorBrush x:Key="CheckBoxContentDisabledForegroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxContentForegroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxDisabledBorderThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxDisabledForegroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxForegroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxPointerOverBackgroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxPointerOverForegroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxPointerOverBorderThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxPressedBackgroundThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxPressedBorderThemeBrush" />
  <SolidColorBrush x:Key="CheckBoxPressedForegroundThemeBrush" />

The meaning of what they will change is self descriptive and they need to have exactly the same name.

Your App.xaml may then look like this:

<Application
x:Class="MyApp"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
RequestedTheme="Light">

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <!-- Overriden theme resources -->
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="CheckBoxBorderThemeBrush" Color="Black" />
            </ResourceDictionary>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="CheckBoxBorderThemeBrush" Color="White" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>

        <ResourceDictionary.MergedDictionaries>
            <!-- Other resources -->
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

As for the TimePicker the default style is the following:

<Style TargetType="TimePicker">
    <Setter Property="FontFamily" Value="{ThemeResource PhoneFontFamilyNormal}" />
    <Setter Property="FontSize" Value="{ThemeResource ContentControlFontSize}" />
    <Setter Property="Foreground" Value="{ThemeResource TimePickerForegroundThemeBrush}" />
    <Setter Property="HorizontalAlignment" Value="Stretch" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="TimePicker">
                <StackPanel Margin="{TemplateBinding Padding}" x:Name="LayoutRoot">
                    <ContentPresenter x:Name="HeaderContentPresenter" Style="{StaticResource HeaderContentPresenterStyle}" Margin="0,0,0,-3"
                        Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" />
                    <Button x:Name="FlyoutButton"
            Foreground="{TemplateBinding Foreground}"
            BorderBrush="{TemplateBinding Foreground}"
            BorderThickness="2.5"
            Padding="6.5,0,0,3"
            IsEnabled="{TemplateBinding IsEnabled}"
            HorizontalAlignment="Stretch"
            HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" />
                </StackPanel>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

So the solution for the TimePicker header color would be to create a new TimePicker style, and set the Foreground of the HeaderContentPresenter element, or you could just change the HeaderTemplate of the TimePicker without creating a new style:

<TimePicker Foreground="Black">
    <TimePicker.Header>
        <TextBlock Text="Header Text Example" Foreground="Black">
    </TimePicker.Header>
</TimePicker>

or

<TimePicker Foreground="Black" Header="Header Text Example">
    <TimePicker.HeaderTemplate>
        <TextBlock Text="{Binding}" Foreground="Black">
    </TimePicker.Header>
</TimePicker>

Answer 2

Did you tried overriding default brushes? Like adding entry in App.xaml merged dictionaries:

<ResourceDictionary.ThemeDictionaries>
  <ResourceDictionary x:Key="Default">
    <SolidColorBrush x:Key="ApplicationForegroundThemeBrush" Color="Magenta" />
  </ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>