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

这节，揭秘工程继续。

揭秘 StandardStyles.xaml文件。

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



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

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

<!--下划线高度-->
<Setter Property="LineHeight" Value="40"/>
<!--渲染的物体-->
<Setter Property="RenderTransform">

<Setter.Value>
<TranslateTransform X="-2" Y="8"/>
</Setter.Value>
</Setter>
</Style>

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

简介appxmanifest文件

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

玩一玩xaml

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

<!--x:Class 相应的类
xmlns:local  相应的命名空间
Grid Background  背景图片
StackPanel HorizontalAlignment     中方向的对齐方式
VerticalAlignment   横方向的对齐方式
-->
<Page
x:Class="MetroGrocer.BlankPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MetroGrocer"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<!--Button  控件 Click点击的事件-->
<Button x:Name="FirstButton" HorizontalAlignment="Center"
Click="ButtonClick">Click Me!</Button>
<!--Button Style 样式-->
<Button Style="{StaticResource TextButtonStyle}"
HorizontalAlignment="Center"
Click="ButtonClick">Or Click Me!</Button>
</StackPanel>
<!--Grid 表格控件-->
</Grid>
</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">

样式的这个属性也能够的运用ui控件上。例如，我可以设置button的样式从StandardStyles.xaml文件中：

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

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

关注事件源

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

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

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

在源代码控制功能

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

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace MetroGrocer {
public sealed partial class BlankPage : Page {
public BlankPage() {
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e) {
}
//点击事件的源代码
private void ButtonClick(object sender, RoutedEventArgs e) {
System.Diagnostics.Debug.WriteLine("Button Clicked: "
+ ((Button)e.OriginalSource).Content);
}
}
}

这样一个空白项目的xaml与c# code 揭秘完了，你有收获吗？