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

添加资源字典

在第一节，我说过怎么在StandardStyles.xaml中定义metro app的模板和样式。比起那些直接在UI控件上设置颜色、字体等等的属性，这个运用样式，的确是一个不错的选择。由于本项目中运用的样式确实是很多。因此我创建了一个叫做Resources的文件夹了，并且在这个文件夹下又创建了一个GrocerResourceDictionary.xaml的文件，在这个文件下，定义资源的模板。相应的源代码如下：

 1 ResourceDictionary

 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4 xmlns:local="using:MetroGrocer.Resources" 

 5 !--类似于css导入了外部样式-- 

 6 ResourceDictionary.MergedDictionaries 

 7 ResourceDictionary Source="/Common/StandardStyles.xaml" / 

 8 /ResourceDictionary.MergedDictionaries 

 9 !-相应的背景样式-- 

10 SolidColorBrush x:Key="AppBackgroundColor" Color="#3E70A"/ 

11 !--文本框的颜色-- 

12 Style x:Key="GroceryListItem" TargetType="TextBlock"

13 BasedOn="{StaticResource BasicTextStyle}" 

14 !--文本框的文字的尺寸-- 

15 Setter Property="FontSize" Value="45"/ 

16 !--文本加粗的方式-- 

17 Setter Property="FontWeight" Value="Light"/ 

18 !--对齐方式-- 

19 Setter Property="Margin" Value="10, 0"/ 

20 !--垂直的对齐方式-- 

21 Setter Property="VerticalAlignment" Value="Center"/ 

22 /Style 

23 !--相应数据的模板-- 

24 DataTemplate x:Key="GroceryListItemTemplate" 

25 !--布局控件-- 

26 StackPanel Orientation="Horizontal" 

27 !--控件的布局-- 

28 TextBlock Text="{Binding Quantity}"

29 Width="50"/ 

30 TextBlock Text="{Binding Name}"

31 Width="200"/ 

32 TextBlock Text="{Binding Store}"

33 Width="300"/ 

34 /StackPanel 

35 /DataTemplate 

36 /ResourceDictionary 

这个项目所有的样式和模板并没有都展示出来， 因为有些模板和样式会在后续的篇幅中陆陆续续的展示，以下是最简单的样式的声明：

1 !--背景颜色-- 

2 SolidColorBrush x:Key="AppBackgroundColor" Color="#3E790A"/ 

metro app  默认的色调是黑底白字，这是我接受不了的。由此，我把文字的颜色定义成其他的颜色了，在配上绿色背景的颜色。在后续的页面的布局上我是肯定能够使用这样的样式的。

因此，下列包含了上述意思的一个简单的样式，就被定义成了一个复合属性：

 1 !--每一项的复合的属性 还绑定了BasicTextStyle-- 

 2 Style x:Key="GroceryListItem" TargetType="TextBlock"

 3 BasedOn="{StaticResource BasicTextStyle}" 

 4 !--文本的尺寸-- 

 5 Setter Property="FontSize" Value="45"/ 

 6 !--文本的加粗方式-- 

 7 Setter Property="FontWeight" Value="Light"/ 

 8 !--文本的上下左右的方式-- 

 9 Setter Property="Margin" Value="10, 0"/ 

10 !--文本的垂直的对齐的方式-- 

11 Setter Property="VerticalAlignment" Value="Center"/ 

12 /Style 

在这个叫作GroceryListItem的样式表中，定义许许多多的属性：文本的尺寸，文本的加粗方式等等。但是，你要看到一点，他的很多样式是来自其他已经声明好的样，这样继承其他样式表的属性，你看到没有，我引用的BasicTextStyle样式是来自于StandardStyles文件。我们应该这样引用于外部样式表，源代码就是如下所示：

1 ResourceDictionary.MergedDictionaries 

2 !--引用外部样式表-- 

3 ResourceDictionary Source="/Common/StandardStyles.xaml" / 

4 /ResourceDictionary.MergedDictionaries 

 这么做可以引用许许多多的文件，但是，你必须在头部引用。

The final declaration is for a data template, with which I can define a hierarchy of elements that will be used
to represent each item in a data source. As you might guess, my source of data will be the collection of grocery
items in the view model. Each item in the collection will be represented by a StackPanel that contains three
TextBlock controls. Notice the two attributes marked in bold:

最后定义是一个数据模板，我定义的这种层次元素的模型是代表数据源。也许，你会感到疑问了，我的数据源不是通过viewmodel存储吗，这某某的一项在ui界面上就是用一个stackpanel和三个文本框代表吗。三个属性加粗显示了：

1 !--数据模板的定义-- 

 2 DataTemplate x:Key="GroceryListItemTemplate" 

 3 !--水平对齐的方式-- 

 4 StackPanel Orientation="Horizontal" 

 5 !--绑定质量-- 

 6 TextBlock Text="{Binding Quantity}"

 7 Width="50"/ 

 8 !--绑定名称-- 

 9 TextBlock Text="{Binding Name}"

10 Width="200"/ 

11 !--绑定得分-- 

12 TextBlock Text="{Binding Store}"

13 Width="300"/ 

14 /StackPanel 

15 /DataTemplate 

文本的值非常非常的重要，绑定关键字是告诉其运行时读取数据中的那个属性。在前一部分，我这么说过，如果我想设置某个的属性的话，可以再其源代码的文件中进行设置。其实，在其相应的xaml的文件中，我也能够在其运行时设置，告诉其运行那个属性。

另外的一些属性虽然不是很有趣，也非常的有用，我不想做太多的赘述。对于绑定样式，我用了StaticResource关键字、这个关键字的作用就是绑定了已经定义好的样式。这样的好处在哪里了，好处就是在于这个样式能够在不同的地方进行了复用。定义好这个自定义的样式了，就是是app.xaml引用使其成为app的一部分，对其他页面起效。相应的源代码如下所示：

 1 Application

 2 x: 3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 5 xmlns:local="using:MetroGrocer" 

 6 Application.Resources 

 7 ResourceDictionary 

 8 !--app.xaml中引用了相应命名空间-- 

 ResourceDictionary.MergedDictionaries 

 9 ResourceDictionary Source="Common/StandardStyles.xaml"/ 

10 ResourceDictionary Source="Resources/GrocerResourceDictionary.xaml"/ 

11 /ResourceDictionary.MergedDictionaries 

12 /ResourceDictionary 

13 /Application.Resources 

14 /Application 

对这个样式，我还重申一下，我没有全部简述，在后续的内容中，没运用一个样式以后，我就会继续讲述。

这个资源字典的部分讲解完了，怎么样，下文在进行以下议程。