使用Windows8开发Metro风格应用七

我们紧接着上篇，开始我们的Metro风格应用开发。

-----------------------------------我是华丽的分割线-----------------------------------------

23.使用样式创建一致性外观
a)我们希望让博客阅读器应用的外观和感觉类似于我的博客网站。我们希望用户在该网站和我们的应用之间切换时能够拥有无缝的使用体验。
　　Windows Metro 风格 UI 的默认黑色主题与我的博客网站不太匹配。这在详细信息页面上尤为明显，
　　在该页面上我们会将实际的博客页面加载到一个WebView中，如21详细页面图所示.

b)为了给我们的应用提供一个一致的外观以便在需要时进行更新，我们使用画笔和样式。 Brush可以让我们在一个位置定义一种外观，
　　然后将它用于任何需要的地方。 Style可以让我们设置控件的各属性值，然后在整个应用中重用这些设置。
　　在深入了解详细信息之前，我们先来看看如何使用画笔在我们的应用页面中设置背景色。
　　应用的每个页面都有一个设置了 Background 属性的 Grid，以定义页面的背景色。我们可以单个设置每个页面的背景，如下所示:
　　<Grid Background="Blue">
　　但有一种更好的方法是将一个 Brush 定义为资源，并用它来定义我们所有页面的背景色。
　　我们在 Visual Studio 模板中就是这么做的，如:
　　<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
　　我们将对象和值定义为资源，以使它们可重用。若要将对象或值用作资源，我们必须设置其 x:Key 属性。
　　我们使用此关键字来指代来自 XAML 的资源。此处，背景被设置为具有键 ApplicationPageBackgroundBrush 的资源，
　　该键是定义 SolidColorBrush 的系统。
　　若要更改页面的背景，我们需要修改StandardStyles.xaml的LayoutRootStyle的样式,代码如下:

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>

　　这样所有的页面背景色都变为了#FF0A2562,效果如图:
使用Windows8开发Metro风格应用七

　　我们的SplitPage页面似乎缺少了东西,我们需要修改StandardStyles.xaml中key为Standard130ItemTemplate的模版
　　代码如下:

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>

　　此时我们的应用栏背景依旧是黑色,如图:
使用Windows8开发Metro风格应用七

　　我们修改如下代码:

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>

　　注意此处只是演示,没有将 #FF0A2562 定义为资源.

　　效果如下:

使用Windows8开发Metro风格应用七

24.添加初始屏幕和徽标
　　我们的应用带给用户的第一印象来自于徽标和初始屏幕。徽标显示在 Windows 应用商店和“开始”屏幕上。
　　初始屏幕在用户启动应用时立即显示，并在应用初始化其资源时为用户提供即时反馈。
　　当应用的第一个页面准备就绪可以显示时，它就会关闭。
　　初始屏幕由一种背景色和一个 620 x 300 像素的图像组成。我们在 Package.appxmanifest 文件中设置这些值。
　　双击此文件在清单编辑器中打开它。在清单编辑器的“应用程序 UI”选项卡中，我们设置了初始屏幕图像的路径和背景色。
　　项目模板提供了一个名为 SplashScreen.png 的默认空白图像。我们将该图像替换为我们自己的初始屏幕图像，
　　以清晰地标识我们的应用并立即将用户吸引到我们的应用中来。我们还可以用自己的徽标文件替换模板徽标文件来指定徽标。
　　 Package.appxmanifest 设置如下:
使用Windows8开发Metro风格应用七

　　以下是我们的博客阅读器的初始屏幕:
使用Windows8开发Metro风格应用七

　基本初始屏幕可以适用于我们的博客阅读器，但你也可以使用 SplashScreen 类的属性和方法扩展该初始屏幕。
　　你可以使用 SplashScreen 类获取初始屏幕的坐标，然后利用这些坐标定位该应用的第一个页面。
　　还可以掌握初始屏幕消失的时间，以确定启动应用的任何内容进入动画的时机。

　　一下是安装到win8后的寛徽标:

使用Windows8开发Metro风格应用七

25. 总结

　　我们学习了如何使用 Visual Studio 12 中的内置页面模板构建完整的多页面应用，还学习了如何在页面之间导航和传递数据。
　　我们学习了如何使用样式和模板以使我们的应用符合我的博客网站的风格。
　　我们还学习了如何使用主题动画、应用栏和初始屏幕来使应用更适合 Windows 8 的个性化内容。
　　最后，我们学习了如何根据各种布局和方向来调整我们的应用，从而让它始终保持美观。
　　现在，我们基本上可以将我们的应用提交到 Windows 应用商店了。

此系列已完成,谢谢大家的支持!

秒客网

使用Windows8开发Metro风格应用七

相关文章