XAML high contrast style sample

This sample demonstrates various techniques for implementing support for high contrast mode in your app.

 
 
 
 
 
(0)
4,935 times
Add to favorites
11/26/2013
E-mail Twitter del.icio.us Digg Facebook
<!--
//*********************************************************
//
// Copyright (c) Microsoft. All rights reserved.
// THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY
// IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR
// PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.
//
//*********************************************************
-->
<common:LayoutAwarePage
    x:Class="SDKSample.HighContrast.Scenario1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:SDKSample.HighContrast"
    xmlns:common="using:SDKSample.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid x:Name="Input" Grid.Row="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBlock x:Name="InputTextBlock1"  TextWrapping="Wrap" Grid.Row="0" Style="{StaticResource BasicTextStyle}" HorizontalAlignment="Left" >
                The demonstration below shows you how to use the ResourceDictionary.ThemesDictionary API to declare styles that will only be applied in the context of high contrast mode.
            </TextBlock>
        </Grid>

        <Grid x:Name="Output" HorizontalAlignment="Left" VerticalAlignment="Top" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="0">
                <TextBlock Text="Custom button that is not high contrast aware" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}"/>
                <Button Background="Red" Foreground="White" BorderBrush="Blue">Not high contrast aware</Button>
            </StackPanel>

            <StackPanel Margin="20,0,0,0" Grid.Column="1">
                <StackPanel.Resources>
                    <ResourceDictionary>
                        <ResourceDictionary.ThemeDictionaries>
                            <!-- When not in high contrast mode, use a colorful look. 
                                        Note that this is defining an implicit style that is scoped to this StackPanel. -->

                            <ResourceDictionary x:Key="Default">
                                <Style TargetType="Button" >
                                    <Setter Property="Background" Value="Red"/>
                                    <Setter Property="Foreground" Value="White"/>
                                    <Setter Property="BorderBrush" Value="Blue" />
                                </Style>
                            </ResourceDictionary>

                            <!-- Fall-through, system-provided, high contrast look. Without this style, the lookup will fall back on the default above. -->
                            <ResourceDictionary x:Key="HighContrastBlack"/>
                            <ResourceDictionary x:Key="HighContrastWhite"/>
                            <ResourceDictionary x:Key="HighContrastCustom"/>
                        </ResourceDictionary.ThemeDictionaries>
                    </ResourceDictionary>
                </StackPanel.Resources>

                <TextBlock Text="Custom button that is high contrast aware" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}"/>
                <Button >High contrast aware</Button>
            </StackPanel>

            <StackPanel Margin="20,0,0,0" Grid.Column="2">
                <TextBlock Text="Actual button" TextWrapping="Wrap" Style="{StaticResource BasicTextStyle}"/>
                <Button>High contrast aware</Button>
            </StackPanel>
        </Grid>

        <!-- Add Storyboards to the visual states below as necessary for supporting the various layouts -->
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="DefaultLayout"/>
                <VisualState x:Name="Below768Layout"/>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>