手把手玩转win8开发系列课程（6）

这节，揭秘工程继续。

揭秘 StandardStyles.xaml文件。

common文件下所包括项目中要所使用各种各样的模板文件。如图所示：

别看这么多文件了，我这里关心StandardStyles.xaml文件，他有什么作用了，最明显的作用是这个文件包含了app.xaml中所引用的一些资源字典的数据。这些数据有究竟是什么了，我问你你看到的metro风格的窗体是哪儿规定，就是来自StandardStyles.xaml文件定义的各种各样的样式。你如果对xaml有所了解的话，一定对xaml中样式不再陌生，这种样式的定义域html中css的效果有异曲同工之妙的效果。首先，因为这里的源代码太多，这里你看到的源代码你看到的所有的源代码并不是这个页面的全貌，所以下面我只展示与文本样式相关的

1 <Style x:Key="HeaderTextStyle" TargetType="TextBlock"
 2     BasedOn="{StaticResource BaselineTextStyle}">
<!--文本尺寸-->
 3   <Setter Property="FontSize" Value="56"/>
  <!--文本加粗-->
4  <Setter Property="FontWeight" Value="Light"/>

<!--下划线高度-->
 5   <Setter Property="LineHeight" Value="40"/>
<!--渲染的物体-->
 6   <Setter Property="RenderTransform">
 7     <Setter.Value>
 8       <TranslateTransform X="-2" Y="8"/>
 9     </Setter.Value>
10   </Setter>
11 </Style>

特别提醒，不要任意改变common文件夹下的文件中内容，至于怎么创建和引用样式我会到后续的内容介绍给读者、

简介appxmanifest文件

这个项目的程序清单文件呈现出来整个项目文件的程序清单文件。这是xml文件记录了将metro app提供给windows 运行时的信息。怎么编辑他了？使用原始的xml在就足够了。但vs提供更强大可视化的编辑其相应的属性的工具。至于如何方便的配置他的话，请见下文。

玩一玩xaml

倘若你没有使用过xaml的话，却对其忧心忡忡的话，是完全没有必要。尽管道路很艰难，但前途是光明的。这个信心来自于哪儿了，来自于这里要学习的metro中xaml语言的知识并没有其他的那些silverlight，wp中的xaml那么多。其实，最最核心，是创建用户接口中声明，而不是在其源代码。所以，如果我想在其文件中添加几个控制按钮，我只需到代码中添加了一些标记的文件。相应源代码如下：

 1 <!--x:Class 相应的类 
 2 xmlns:local  相应的命名空间
 3 Grid Background  背景图片
 4 StackPanel HorizontalAlignment     中方向的对齐方式
 5 VerticalAlignment   横方向的对齐方式
 6 -->
 7 <Page
 8   x:Class="MetroGrocer.BlankPage"
 9   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
10   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
11   xmlns:local="using:MetroGrocer"
12   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
13   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
14   mc:Ignorable="d">
15   <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
16   <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
17        <!--Button  控件 Click点击的事件-->
18       <Button x:Name="FirstButton" HorizontalAlignment="Center"
19           Click="ButtonClick">Click Me!</Button>
20         <!--Button Style 样式-->
21       <Button Style="{StaticResource TextButtonStyle}"
22           HorizontalAlignment="Center"
23           Click="ButtonClick">Or Click Me!</Button>
24     </StackPanel>
25     <!--Grid 表格控件-->
26     </Grid>
27 </Page>

项目中，我添加一个stackPanel控件和两个Button控件到页面上。stackPanel控件是一个简单的布局的容器控件。他主要能给各个控件定位，这个按钮案件有一个点击的事件。

你看到xaml文件中这些层级的数据转换成用户的具有层次的用户控件.你看到没有这个按钮控件添加到stackpanel中吗？并且我已指定页面中负责布局按钮元素。

——使用的vs设计的界面

xaml语言的意义——事实上， metro 项目你可以用C#开发前后台，也不需要任何xaml语言。但，还是有一些令人的新服理由就要采取xaml。最主要的原因是vs处理xaml能力非常的给力。xaml在程序中更多的是以最终运行效果来显示出来。像上述的xaml语言运行效果如果如下：

尽管xaml往往是非常的冗长，但vs中创建和编辑xaml的非常的简单；在源代码界面，主要是他对xaml中的源代码有许许多多的智能提示。在设计的界面中，你也可以直接拖拽控件，而且在属性框中设置控件的属性。如果，你认为vs中xaml语言不满足你的需求，你可以使用blend来编辑xaml。作为一个程序员，我不喜欢使用可视化的界面来设计界面。我更喜欢使用源代码来设计界面。在后续的文章中，我还是用xaml的语言来设计界面。

引用样式

你可以设置属性中的对应元素的属性。例如，  我想在stackpanel能居中子控件。我可以设置他的水平对齐方式和垂直的对齐方式。就像源代码以下：

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">

1 <Button Style="{StaticResource TextButtonStyle}" HorizontalAlignment="Center"
2 Click="ButtonClick">Or Click Me!</Button>

在xaml中有许许多多的的方式来定义和引用样式。我这里使用了StaticResource来引用样式，这是最简单的引用样式的方法，我们要把主要的精力放在功能上，而不是被这些琐碎的事情所困扰。

关注事件源

为了指定事件处理方法，你只需要使用元素的属性对应的事件。相应的源代码如下：

1 <Button x:Name="FirstButton" HorizontalAlignment="Center"
2   Click="ButtonClick">Click Me!</Button>

 怎么生成Click事件，  是处理 ButtonClick方法。  vs自动产生这个方法在想对应的源代码页面，会生成事件属性。

在源代码控制功能

它依赖于编译器将一个C#的功能和xaml的文件，编译成一个单独的.net类。开始看这个模型 模型非常的奇怪，但这种混合的设计+源代码模型也是蛮好,你可以再设计界面设计，在源代码界面写源代码。相应的源代码如下：

1 using Windows.UI.Xaml;
 2 using Windows.UI.Xaml.Controls;
 3 using Windows.UI.Xaml.Navigation;
 4 namespace MetroGrocer {
 5   public sealed partial class BlankPage : Page {
 6     public BlankPage() {
 7       this.InitializeComponent();
 8     }
 9     protected override void OnNavigatedTo(NavigationEventArgs e) {
10     }  
11 //点击事件的源代码
12   private void ButtonClick(object sender, RoutedEventArgs e) {
13       System.Diagnostics.Debug.WriteLine("Button Clicked: "
14         + ((Button)e.OriginalSource).Content);
15     }
16     }
17 }