Use Windows 8 to develop Metro-style applications 7

Next, let's start the development of our Metro-style applications.

----------------------------------- I am a gorgeous split line -----------------------------------------

23. Use styles to create consistent appearances
A) we want to make the appearance and feeling of the blog reader application look similar to my blog website. We hope that users can have a seamless user experience when switching between the website and our applications.
The default black theme of Windows Metro style UI does not match my blog website. This is particularly evident on the details page,
On this page, we will load the actual blog page to a webview, as shown in Figure 21.
 
B) we use paint brushes and styles to provide a consistent appearance for our applications for updates as needed. A brush allows us to define an appearance at a position,
Use it wherever you need it. Style allows us to set the attribute values of the control and reuse these settings throughout the application.
For more information, see how to use a paint brush to set the background color on our application page.
Each page of the application has a grid with the background attribute set to define the background color of the page. You can set the background of each page as follows:
<Grid background = "blue">
But there is a better way to define a brush as a resource and use it to define the background color of all our pages.
This is what we do in the Visual Studio template, such:
<Grid background = "{staticresource applicationpagebackgroundbrush}">
We define objects and values as resources so that they can be reused. To use an object or value as a resource, we must set its X: key attribute.
We use this keyword to refer to resources from XAML. Here, the background is set as a resource with the key applicationpagebackgroundbrush,
This key is a system that defines the solidcolorbrush.
To change the page background, we need to modify the layoutrootstyle style of standardstyles. XAML. The Code is as follows:

View code

    <Style x:Key="LayoutRootStyle" TargetType="Panel">        <Setter Property="Background" Value="#FF0A2562"/>        <Setter Property="ChildrenTransitions">            <Setter.Value>                <TransitionCollection>                    <EntranceThemeTransition/>                </TransitionCollection>            </Setter.Value>        </Setter>    </Style>

In this way, the background color of all pages is changed to # ff0a2562. effect:

The splitpage seems to be missing something. We need to modify the template in standardstyles. XAML where the key is standard130itemtemplate.
The Code is as follows:

View code

    <!-- List-appropriate 130 pixel high item template as seen in the SplitPage -->    <DataTemplate x:Key="Standard130ItemTemplate">        <Grid Height="110" Margin="6">            <Grid.ColumnDefinitions>                <ColumnDefinition Width="Auto"/>                <ColumnDefinition Width="*"/>            </Grid.ColumnDefinitions>            <Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">                <Image Source="../Assets/myLogo.jpg" Stretch="UniformToFill"/>            </Border>            <StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">                <TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>                <TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>                <TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>            </StackPanel>        </Grid>    </DataTemplate>

At this time, the background of our application bar is still black ,:

Modify the following code:

View code

        <Page.TopAppBar>        <AppBar Padding="10,0,10,0"  Background="#FF0A2562">            <Grid>                <Button Click="ViewDetail_Click" HorizontalAlignment="Right"                     Style="{StaticResource WebViewAppBarButtonStyle}"/>            </Grid>        </AppBar>    </Page.TopAppBar>

Note that # ff0a2562 is not defined as a resource.

The effect is as follows:

 

24. Add the initial screen and logo
The first impression that our application brings to users is the logo and initial screen. The logo is displayed on the Windows App Store and Start Screen.
The initial screen is displayed immediately when the user starts the application and provides immediate feedback when the application initializes its resources.
When the first page of the application is ready for display, it is closed.
The initial screen consists of a background color and an image of 620x300 pixels. We set these values in the package. appxmanifest file.
Double-click the file to open it in the configuration editor. In the "application UI" tab of the configuration Editor, we set the path and background color of the initial screen image.
The project template provides a default blank image named splashscreen.png. We replace this image with our own initial screen image,
To clearly identify our applications and draw users to our applications. You can also use your logo file to replace the template logo file to specify the logo.
The package. appxmanifest settings are as follows:

The following is the initial screen of our blog reader:

The basic initial screen can be applied to our blog reader, but you can also use the attributes and methods of the splashscreen class to extend the initial screen.
You can use the splashscreen class to obtain the coordinates of the initial screen, and then use these coordinates to locate the first page of the application.
You can also grasp the time when the initial screen disappears to determine the time when any content of the application is started to enter the animation.

Here is the ghost logo installed after Win8:

 

25. Summary
 
We learned how to use the built-in page template in Visual Studio 12 to build a complete multi-page application, and how to navigate and transmit data between pages.
We learned how to use styles and templates to adapt our applications to the style of my blog website.
We also learned how to use theme animations, app bar, and initial screens to make apps more personalized for Windows 8.
Finally, we learned how to adjust our applications based on various la S and methods to keep them beautiful.
Now, we can basically submit our applications to the Windows app store.

This series has been completed. Thank you for your support!