Light and Dark Theme in Windows Store App

Introduction

In this section we will show how to display a dark and light theme in a Windows 8 Metro Style application. In this example we show light and dark themes with contents like toggle switch, hyperlink content, radio button content and checkbox content. When the toggle switch value is off then the dark theme is displayed. In this example we will present two points; the first point demonstrates how to apply a light theme including light styles and templates and second point demonstrates how to create a builtin dark theme style and templates.

So, we will use the following steps to make this application as below.

Step 1 : First of all you will create a new Metro Style Application. Let us see the description with images of how you will create it.

• Open Visual Studio 2011
• File -> New -> Project
• Choose Template -> Visual C# -> Windows Metro Style -> Application
• Rename this Application 

Step 2 : In the Solution Explorer there are two files that we will primarily work with; MainPage.xaml and MainPage.xaml.cs files. In the images folder add any image to the application but in this application we don't have to add an image.

Step 3 :  The MainPage.xaml file is as in the following code.

Code : Let us see the code which is given below:

  <Grid x:Name="LayoutRoot" Background="White">

    <!--App Orientation States-->

    <VisualStateManager.VisualStateGroups>

      <VisualStateGroup x:Name="OrientationStates">

        <VisualState x:Name="Full"/>

        <VisualState x:Name="Fill">

          <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Thickness>40,20,40,20</Thickness>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Orientation>Horizontal</Orientation>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

                <DiscreteObjectKeyFrame KeyTime="0" Value="700">

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

          </Storyboard>

        </VisualState>

        <VisualState x:Name="Portrait">

            <Storyboard>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

                    <DiscreteObjectKeyFrame KeyTime="0">

                        <DiscreteObjectKeyFrame.Value>

                            <Thickness>40,20,40,20</Thickness>

                        </DiscreteObjectKeyFrame.Value>

                    </DiscreteObjectKeyFrame>

                </ObjectAnimationUsingKeyFrames>

                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

                    <DiscreteObjectKeyFrame KeyTime="0" Value="700">

                    </DiscreteObjectKeyFrame>

                </ObjectAnimationUsingKeyFrames>

                    </Storyboard>

        </VisualState>

        <VisualState x:Name="Snapped">

          <Storyboard>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="ContentRoot">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Thickness>20,20,20,20</Thickness>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(StackPanel.Orientation)" Storyboard.TargetName="InputPanel">

              <DiscreteObjectKeyFrame KeyTime="0">

                <DiscreteObjectKeyFrame.Value>

                  <Orientation>Vertical</Orientation>

                </DiscreteObjectKeyFrame.Value>

              </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.MaxWidth)" Storyboard.TargetName="Description">

                <DiscreteObjectKeyFrame KeyTime="0" Value="250">

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Margin)" Storyboard.TargetName="LegalPanel">

                <DiscreteObjectKeyFrame KeyTime="0">

                    <DiscreteObjectKeyFrame.Value>

                        <Thickness>0,0,10,0</Thickness>

                    </DiscreteObjectKeyFrame.Value>

                </DiscreteObjectKeyFrame>

            </ObjectAnimationUsingKeyFrames>

            </Storyboard>

        </VisualState>

      </VisualStateGroup>

    </VisualStateManager.VisualStateGroups>

    <Grid x:Name="ContentRoot" Background="White" Margin="100,20,100,20">

      <Grid.RowDefinitions>

        <RowDefinition Height="Auto"/>

        <RowDefinition Height="*"/>

        <RowDefinition Height="Auto"/>

      </Grid.RowDefinitions>

 

      <!-- Content -->

      <ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" Grid.Row="1" ZoomMode="Disabled">

        <StackPanel x:Name="ContentPanel">

          <StackPanel x:Name="InputPanel" Orientation="Horizontal" HorizontalAlignment="Left">

            <StackPanel>

              <TextBlock Text="Input" Style="{StaticResource H2Style}"/>

              <TextBlock Text="Select Option" Style="{StaticResource H3Style}"/>

              <ListBox x:Name="SectionList" Margin="0,0,20,0" HorizontalAlignment="Left" Background="RosyBrown">

                <ListBox.ItemTemplate>

                  <DataTemplate>

                    <TextBlock Text="{Binding Name}"/>

                  </DataTemplate>

                </ListBox.ItemTemplate>

                <ListBoxItem x:Name="Section1">

                  <TextBlock Text="1. Light theme" Style="{StaticResource ListBoxTextStyle}"/>

                </ListBoxItem>

                <ListBoxItem x:Name="Section2">

                  <TextBlock Text="2. Dark theme" Style="{StaticResource ListBoxTextStyle}"/>

                </ListBoxItem>

              </ListBox>

            </StackPanel>

            <StackPanel Margin="0,31,0,0" >

              <TextBlock Text="Details" Style="{StaticResource H3Style}"/>

              <StackPanel x:Name="Description" MaxWidth="900">

                 

                  <!-- Section 1 -->

                <StackPanel x:Name="Section1Input">

                  <TextBlock TextWrapping="Wrap" Text="This point demonstrates how to apply a light theme including light styles and templates." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>

                  <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" Text=""/>

                </StackPanel>

                 

                  <!-- Section 2 -->

                <StackPanel x:Name="Section2Input" Visibility="Collapsed">

                  <TextBlock TextWrapping="Wrap" Text="This Section demonstrates how to built in dark theme styles and templates." Style="{StaticResource DescriptionTextStyle}" HorizontalAlignment="Left"/>

                  <TextBlock Style="{StaticResource DescriptionTextStyle}" TextWrapping="Wrap" Margin="0,20,0,0" Text=""/>

                </StackPanel>

              </StackPanel>

            </StackPanel>

          </StackPanel>

           

            <!-- Output section -->

          <TextBlock Text="Output" Margin="0,25,0,20" Style="{StaticResource H2Style}" Foreground="Blue"/>

          <StackPanel x:Name="Output"  HorizontalAlignment="Stretch" VerticalAlignment="Stretch">

             

              <!-- Section 1-->

            <StackPanel x:Name="Section1Output" Background="White" HorizontalAlignment="Stretch" >

              <StackPanel.Resources>

                <ResourceDictionary Source="light_generic.xaml"/>

              </StackPanel.Resources>

              <Grid Margin="30">

                <Grid.RowDefinitions>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                  <ColumnDefinition Width="Auto"/>

                  <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <Button VerticalAlignment="Center" Margin="20,0,0,0"

                    Content="Button content"/>

                <ToggleSwitch  Grid.Row="1" VerticalAlignment="Center" Width="170"

                    Margin="5,0,0,0" OffContent="Off"

                    OnContent="On"

                    Header="Toggle switch value"

                    HorizontalAlignment="Left"/>

                <CheckBox  Content="Checkbox content" Grid.Row="2"

                    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"/>

                <HyperlinkButton Content="Hyperlink content" Grid.Row="3"

                    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"/>

                <RadioButton  Content="Radio button content" Grid.Row="4"

                    VerticalAlignment="Center" Margin="20,0,0,0"/>

              </Grid>

            </StackPanel>

             

              <!-- Section 2 -->

            <StackPanel x:Name="Section2Output" Background="Black" HorizontalAlignment="Stretch" >

              <StackPanel.Resources>

                <ResourceDictionary Source="Generic.xaml"/>

              </StackPanel.Resources>

              <Grid Margin="30">

                <Grid.RowDefinitions>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                  <RowDefinition Height="Auto"/>

                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>

                  <ColumnDefinition Width="Auto"/>

                  <ColumnDefinition Width="*"/>

                </Grid.ColumnDefinitions>

                <Button VerticalAlignment="Center" Margin="20,0,0,0"

                    Content="Button content"/>

                <ToggleSwitch  Grid.Row="1" VerticalAlignment="Center" Width="170"

                    Margin="5,0,0,0" OffContent="Off"

                    OnContent="On"

                    Header="Toggle switch value"

                    HorizontalAlignment="Left"/>

                <CheckBox  Content="Checkbox content" Grid.Row="2"

                    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"/>

                <HyperlinkButton Content="Hyperlink content" Grid.Row="3"

                    HorizontalAlignment="Left" VerticalAlignment="Center" Margin="20,0,0,0"/>

                <RadioButton  Content="Radio button content" Grid.Row="4"

                    VerticalAlignment="Center" Margin="20,0,0,0"/>

              </Grid>          

            </StackPanel>                           

          </StackPanel>

        </StackPanel>

      </ScrollViewer>

    </Grid>

  </Grid>

</UserControl>

Step 4 :  After running this code we get the following output. Here we have to explain the two different points with different functionality.