手把手玩转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             Style="{StaticResource GroceryListItem}" Width="50"/>
30       <TextBlock Text="{Binding Name}"
31             Style="{StaticResource GroceryListItem}" Width="200"/>
32       <TextBlock Text="{Binding Store}"
33             Style="{StaticResource GroceryListItem}" 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     Style="{StaticResource GroceryListItem}" Width="50"/>
 8       <!--绑定名称-->
 9     <TextBlock Text="{Binding Name}"
10       Style="{StaticResource GroceryListItem}" Width="200"/>
11       <!--绑定得分--> 
12    <TextBlock Text="{Binding Store}"
13       Style="{StaticResource GroceryListItem}" Width="300"/>
14   </StackPanel>
15 </DataTemplate>

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

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


 1 <Application
 2   x:Class="MetroGrocer.App"
 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>

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

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



目录
相关文章
|
前端开发 索引 设计模式
下一篇
无影云桌面