手把手玩转win8开发系列课程(9)
书接上文,继续议程
添加资源字典
在第一节,我说过怎么在StandardStyles.xaml中定义metro app的模板和样式。比起那些直接在UI控件上设置颜色、字体等等的属性,这个运用样式,的确是一个不错的选择。由于本项目中运用的样式确实是很多。因此我创建了一个叫做Resources的文件夹了,并且在这个文件夹下又创建了一个GrocerResourceDictionary.xaml的文件,在这个文件下,定义资源的模板。相应的源代码如下:
1 <ResourceDictionary2 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 <Application2 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>
对这个样式,我还重申一下,我没有全部简述,在后续的内容中,没运用一个样式以后,我就会继续讲述。
这个资源字典的部分讲解完了,怎么样,下文在进行以下议程。
手把手玩转win8开发系列课程(9)相关推荐
- 手把手玩转win8开发系列课程(2)
对win8开发,上一节我们对win8进行了简单的介绍,这一节我们来瞧一瞧他的开发环境搭建. 前奏. 这里所讲的win8开发,主要是指Windows8 app store 上开发,及metro ui或叫 ...
- 手把手玩转win8开发系列课程(18)
这节,加入弹出对话框 弹出对话框 这个appBar button能起作用类额 ,他处理的源代码是直接放在Click event里面中.大多数的buttons操作更需要一些额外的用户体验,因此我们使用f ...
- 手把手玩转win8开发系列课程(14)
这节的议程就是--添加appbar appbar是出现在哪儿了,出现在屏幕的底部.他能使用户能用手势或者使用鼠标操作程序.metro UI 重点是在主要的控件使用许多控件,使其用户使用win8电脑更加 ...
- 手把手玩转win8开发系列课程(11)
运行程序 这节的议程,我觉得很简单--运行程序 在vs界面布局的页面都是静态,真正让项目运行起来才是动态的了.只有使其运行起来,这样xaml与C#合二为一,以一个真正的程序显示出来.你可以选择调试菜单 ...
- 手把手玩转win8开发系列课程(22)
今天的议程,有三个①展示弹出对话框②创建更复杂的控件③并为复杂的控件赋值 (1)展示弹出对话框 上节,我们已经写好了这个对话框,并且已经引入了项目中去了,那我们就有必要展示了. 当用户点击了这个按钮以 ...
- 【预告】1月6日下午14:30 CLR开发系列课程(3):COM Interop基础 (Level 300)
1月6日下午14:30我将在MSDN中文网络广播中主讲.NET中COM和COM Interop的相关基础知识.有兴趣的朋友可以通过下面的链接登记并收听此次网络广播: 公共语言运行库(CLR)开发系列 ...
- 云开发系列课程让你从入门到精通快速上手Serverless和云开发技术
简介:云开发系列课程主要介绍了从入门到精通快速上手Serverless和云开发技术.学习内容涵盖云开发协同.云函数.云数据库.多媒体托管.前后端一体化框架等Serverless Web开发必备知识.希 ...
- 基于WebMatrix的轻量级Web开发系列课程
基于WebMatrix的轻量级Web开发系列课程(10): WebMatrix与ASP.NET MVC WebMatrix除了提供了默认的编程模型以外,也对ASP.NET MVC做出了很好的支持,但是 ...
- 预告:公共语言运行库(CLR)开发系列课程(4):COM Interop进阶
这次我主要讲RCW的原理,生命周期,引用计数,套间,System.__ComObject,事件调用原理等内容.CCW由于时间限制就不涉及了,毕竟大家还是以使用RCW为主. 感兴趣的朋友可以在下面注册: ...
- 浅析云平台底层架构 进行云原生应用开发 系列课程-薛海涛-专题视频课程
浅析云平台底层架构 进行云原生应用开发 系列课程-2892人已学习 课程介绍 如何依托Bluemix的PaaS服务,开发云原生应用,并深入的讲解cloudfoundry app生命周期 ...
最新文章
- 双击进入物料数据的指定视图
- leetcode算法题--矩阵中的路径
- 关于在学校锻炼的思考
- Centos 利用yum源安装 nginx 1.20.1
- java9新特性 2017_Java 9 ← 2017,2019 → Java 13 ,来看看Java两年来的变化
- iOS中监测来电方案
- linux内核完全剖析0.11,linux0.11内核完全剖析 - ramdisk.c
- 那么多GAN哪个好?谷歌大脑泼来冷水:都和原版差不多 | 论文
- ElasticSearch预警服务-Watcher详解-Schedule配置
- C++访问WebService
- linux下分析prn,Linux下echo命令详解
- 现代交换技术--交换概论
- 阿拉伯数字转化成大写金额
- 计算机网络 - mbed TLS
- java 接入微信获取人员信息名称带表情符号无法存储
- 芯片工程师成长之路_从入门到精通,电子硬件工程师的成长之路
- Constructing Narrative Event Evolutionary Graph for Script Event Prediction
- 股票庄家套路(转发)
- SAP中采购订单交货己完成相关逻辑和控制原理分析
- vue+webpack前端开发项目的安装方法