Technique SL13:Providing A Style Switcher To Switch To High Contrast

Example 1: Silverlight application designed with brush resources and template resources that enable a high contrast switch

The example "application" for illustration is just text, a button and border. The concepts shown in the example can scale to any complexity of UI, including to applications that have thousands of lines of XAML. Note that the visual appearance of the button is already using a high contrast theme choice for its default state, to assure that the control is visible to anyone that requires a high contrast theme to see parts of the user interface per G174. To keep the example simple, the visual states (behaviors) associated with mouse-over, click, etc. have not been restyled for high contrast. Only the base appearance is changed. The example also shows a technique of storing original theme information and restoring it in response to user request.

<UserControl x:Class="HighContrast.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   d:DesignHeight="300" d:DesignWidth="400">
   <UserControl.Resources>
       <SolidColorBrush x:Key="ArtsyBrush1" Color="Salmon"/>
       <SolidColorBrush x:Key="ArtsyBrush2" Color="Bisque"/>
       <SolidColorBrush x:Key="ArtsyBrush3" Color="DarkSalmon"/>
       <SolidColorBrush x:Key="ArtsyBrush4" Color="Blue"/>
       <Color x:Key="ArtsyBrush1Restore">Salmon</Color>
       <Color x:Key="ArtsyBrush2Restore">Bisque</Color>
       <Color x:Key="ArtsyBrush3Restore">DarkSalmon</Color>
       <Color x:Key="ArtsyBrush4Restore">Blue</Color>
       <RadialGradientBrush x:Key="ArtsyGradient">
           <GradientStop Color="AliceBlue" Offset="0"/>
           <GradientStop Color="LightBlue" Offset="0.4"/>
           <GradientStop Color="#D00000EE" Offset="1"/>
       </RadialGradientBrush>
       <Style x:Key="ArtsyButton" TargetType="Button">
           <Setter Property="Template">
               <Setter.Value>
                   <ControlTemplate TargetType="Button">
                       <Border CornerRadius="4"
                          BorderBrush="{StaticResource ArtsyBrush4}" BorderThickness="4">
                           <Grid>
                               <Rectangle Fill="{StaticResource ArtsyGradient}"
                                 RadiusX="2" RadiusY="2"/>
                               <ContentPresenter Content="{TemplateBinding Content}"
                               ContentTemplate="{TemplateBinding ContentTemplate}"/>
                           </Grid>
                           
                       </Border>
                   </ControlTemplate>
               </Setter.Value>
           </Setter>
       </Style>
       <Style x:Key="HighConButton" TargetType="Button">
           <Setter Property="Control.Background" Value="White"/>
           <Setter Property="BorderBrush" Value="Black"/>
           <Setter Property="Foreground" Value="Black"/>
       </Style>
   </UserControl.Resources>
   <Border BorderBrush="{StaticResource ArtsyBrush1}" BorderThickness="4">
       <StackPanel x:Name="LayoutRoot" Background="{StaticResource ArtsyBrush2}">
           <TextBlock
             Foreground="{StaticResource ArtsyBrush3}">High contrast demo</TextBlock>
           <Button Name="Switcher" Click="Switcher_Click"
             Width="160" Style="{StaticResource HighConButton}">
              <TextBlock Text="Switch to high contrast"/>
           </Button>
           <Button Name="Switchback" Click="Switchback_Click"
             Width="160" Style="{StaticResource HighConButton}" IsEnabled="False">
               <TextBlock Text="Switch to regular theme"/>
           </Button>
       </StackPanel>
   </Border>
</UserControl>

The second listing is the C# code for the event handlers.

       private void Switcher_Click(object sender, RoutedEventArgs e)
       {
           ChangeToHighCon();
       }
       private void ChangeToHighCon()
       {
           (this.Resources["ArtsyBrush1"] as SolidColorBrush).Color = Colors.Black;
           (this.Resources["ArtsyBrush2"] as SolidColorBrush).Color = Colors.White;
           (this.Resources["ArtsyBrush3"] as SolidColorBrush).Color = Colors.Black;
           (this.Resources["ArtsyBrush4"] as SolidColorBrush).Color = Colors.Black;
           Switcher.IsEnabled = false;
           Switchback.IsEnabled = true;
       }
       private void RestoreRegularCon()
       {
           (this.Resources["ArtsyBrush1"] as SolidColorBrush).Color =
             (Color)this.Resources["ArtsyBrush1Restore"];
           (this.Resources["ArtsyBrush2"] as SolidColorBrush).Color =
             (Color)this.Resources["ArtsyBrush2Restore"];
           (this.Resources["ArtsyBrush3"] as SolidColorBrush).Color =
           (Color)this.Resources["ArtsyBrush3Restore"];
           (this.Resources["ArtsyBrush4"] as SolidColorBrush).Color =
             (Color)this.Resources["ArtsyBrush4Restore"];
           Switcher.IsEnabled = true;
           Switchback.IsEnabled = false;
       }
       private void Switchback_Click(object sender, RoutedEventArgs e)
       {
           RestoreRegularCon();
       }
   }

The following images show the original, and the applied high contrast settings.

This example is shown in operation in the working example of High Contrast.

Example 2: Use SystemParameters.HighContrast to detect system high contrast settings at application startup

This example uses the same UI and style definitions as the previous example. The sole addition a case statement that is added to the primary page constructor of the UI (defined in C#). The added code is everything other than the InitializeComponent() call (which is part of Silverlight infrastructure). Note that the added code calls a user-defined function ChangeToHighCon(), which is the same function and behavior as shown in Example 1 for the user-initiated high contrast switch.

       public MainPage()
       {
           InitializeComponent();
           if (SystemParameters.HighContrast)
           {
               ChangeToHighCon();
           }
       }