Creating A First Windows 8 App : Hello World. Step 5: Style the start page

Choosing a theme

It's easy to customize the look and feel of your app. By default, your app uses resources with a dark style. The system resources also include a light theme. Let's try it out and see what it looks like.

To switch to the light theme

1. In Solution Explorer, double click App.xaml to open it. 

2. In the opening Application tag, add the RequestedTheme property with its value set to Light.  

 

    RequestedTheme="Light"

    Here's the full Application tag with the light theme added.

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

3. Press F5 to build and run the app. Now it uses the light theme. 

Which theme should you use? Whichever one you want. For apps that mostly display images or video, we recommend using the dark theme, and for apps that contain a lot of text, we recommend using the light theme. If you're using a custom color scheme, use the theme that goes best with your app's look and feel.?

Using standard styles : 

Earlier in this tutorial, we pointed out that the App.xaml file contains a reference to the StandardStyles.xaml ResourceDictionary: 

<ResourceDictionary.MergedDictionaries>

    <!-- 
        Styles that define common aspects of the platform look and feel
        Required by Visual Studio project and item templates
    -->
    <ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>        
        

Right now, all the text is very small and difficult to read. You can easily apply the standard styles to elements in your app to make them look great.

To style an element : 

1. Double-click MainPage.xaml in Solution Explorer to open it. 

2. In XAML or design view, select the "What's your name?" TextBlock that you added previously.

3. In the Properties Window, click the Properties button ()

4. Expand the Miscellaneous group and find the Style property.

5. Click the property marker next to the Style property to open the menu.

6. In the menu, select Local Resource > BasicTextStyle. 
   BasicTextStyle is a resource defined in the StandardStyles.xaml ResourceDictionary.

In the XAML design surface, the appearance of the text changes. In the XAML editor, the XAML for the TextBlock is updated.

<TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>

7.  Repeat the process to assign the BasicTextStyle to the greetingOutput TextBlock element.

Tip  There's no text in this TextBlock, but when you hover the mouse pointer over the XAML design surface, a blue outline shows where the TextBlock is so you can select it.

Your XAML now looks like this.

<StackPanel Grid.Row="1" Margin="120,30,0,0">
    <TextBlock Text="What's your name?" Style="{StaticResource BasicTextStyle}"/>
    <StackPanel Orientation="Horizontal" Margin="0,20,0,20">
        <TextBox x:Name="nameInput" Width="300" HorizontalAlignment="Left"/>
        <Button Content="Say &quot;Hello&quot;" Click="Button_Click"/>
    </StackPanel>
    <TextBlock x:Name="greetingOutput" Style="{StaticResource BasicTextStyle}"/>
</StackPanel>

8. Press F5 to build and run the app. It now looks like this.