菜鸟学Windows Phone 8开发(4)——设置应用程序样式

原文 菜鸟学Windows Phone 8开发(4)——设置应用程序样式

本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 

本文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-6-Styling-the-App
源代码:http://aka.ms/absbeginnerdevwp8

我 们已经学习了XAML布局和事件基础,接下来让我们做些有趣的事情,我们将通过给应用程序添加样式来赋予它一些独特的特征,显然我们需要按照微软的向导以 便我们能让我们的应用看起来像Windows Phone 8生态系统的一部分,但是我们任然有许多自由在个性化应用程序上面。

 

我们这节课的计划:

1、我们将改变应用在手机应用列表和首页的icon图标;

2、我们将访问用户手机的主题颜色并应用在应用程序中,同时我们也将学习到一些重要的XAML语法——绑定;

3、最后我们将讨论关于样式重用。

 

一、改变ICON

这节课的第一个任务是改变应用程序图标,我们将在按字母顺序的应用程序列表和开始页面看到他如果我们Pin了我们的应用图标到首页,首先我们展开我们项目中Properties文件夹节点:

本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 

本文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-6-Styling-the-App
源代码:http://aka.ms/absbeginnerdevwp8

我 们已经学习了XAML布局和事件基础,接下来让我们做些有趣的事情,我们将通过给应用程序添加样式来赋予它一些独特的特征,显然我们需要按照微软的向导以 便我们能让我们的应用看起来像Windows Phone 8生态系统的一部分,但是我们任然有许多自由在个性化应用程序上面。

 

我们这节课的计划:

1、我们将改变应用在手机应用列表和首页的icon图标;

2、我们将访问用户手机的主题颜色并应用在应用程序中,同时我们也将学习到一些重要的XAML语法——绑定;

3、最后我们将讨论关于样式重用。

 

一、改变ICON

这节课的第一个任务是改变应用程序图标,我们将在按字母顺序的应用程序列表和开始页面看到他如果我们Pin了我们的应用图标到首页,首先我们展开我们项目中Properties文件夹节点:

当你双击打开这个文件的时候你可以看到一个特别的窗口,这个窗口提供了很多选项来影响我们的应用程序,例如在第一个选项卡“应用程序界面”我们能改变应用的默认名字和应用图标等:

 

我们使用一个更适合这个应用的图标来改变它的默认图标,我已经创建了这个图标在C9Phone8\PetSounds_Assets文件夹下面。

在文件夹中是Application.png

我们拖拽这个图标到我们项目的Assets文件夹,我们将会看到一个提示一个同名的文件已经存在:

我们用新图标替换旧图标

接下来我们将替换在Assets\Tiles文件夹中的两个子文件,我已经看到了这个目标在解决方案窗口中。

在windows窗口中是在C9Phone8\PetSounds_Assets\Tiles文件夹中:

 

 

我们同样拖拽他们到目标文件夹中,同样你会看到刚刚的提示窗口。

 

1、勾选应用所有项目

2、点击确定

现在我已经替换了这些主要的磁贴文件,让我们回到WMAppMainfest.xaml文件,因为我们使用新文件替换了就文件所以我们需要重新打开这个文件来看我们的新文件。

 

继续往下翻这个设置文件,我们确定下面的选项:

 

1、图块模版选择TemplateIconic

2、选择支持大磁贴

3、小图标已经设置

4、中等图标已经设置

为了测试这些设置,我们(或者按F5)运行这个应用,在模拟器中我们点击手机的开始按钮,然后(按住鼠标)从右向左滑动在字母顺序列表中找到我们的PetSounds应用.

 

我们点击并按住这个图标知道弹出一个包含固定到开始屏幕和卸载的菜单。

点击固定到开始菜单,点击模拟器的Home键我们将看到:

 

 

这是一个很小的细节,我们通过设置一点点改变就可以看到它基本上符合我们的应用。

 

二、修改应用和页面标题

 

接下来我们将改变应用和页面的标题,在MainPage.xaml定位到TitlePanel,这个StackPanel通过页面的默认模版添加了默认的标题:

我们将作如下改变:

 

1、使用应用标题“PET SOUNDS”改变应用标题Text属性,我们全部使用大写(caps)因为它是Windows Phone应用的常用手法。

2、使animals替代页面标题,我们全部使用小写因为他也是常用的。

结果显示:

 

仅仅使用了一点点样式就更看起来像一个应用。

 

三、理解绑定语法和静态资源

 

textbox的Style属性是默认设置成

Style="{StaticResource PhoneTextTitle1Style}"

 

我们将花点时间解释,首先你随时可以在XAML中看到大括号,他们就是绑定语法,有两种类型的绑定语法:

1、{StaticResource }让我们从里面的resource开始,一个资源是一个在应用程序中能重用的对象,例如brush和style

http://msdn.microsoft.com/en-us/library/ms750613.aspx

我们创建一个我能想到的一个最简单的关于{StaticResource }的项目XAMLResources。

 

1、添加一个在<phone:PhoneApplicationPage>下面的子元素,任何brush和style只能用于这个页面不能用于其它页面。

2、我创建了一个SolidColorBrush并且我能通过键值MyBrush引用他。

3、 我创建了一个Style我能通过键MyButtonBackground来引用,注意我们设置了TargetType=Button,意思是这个 Style只能用于Button,在这个style中我能设置button独有的属性,我设置了Background=Blue。

4、创建Button并将Background属性绑定到MyBrush

5、创建Button的Style属性绑定到MyButtonBackground。

 

在这个简单的应用中你可能还不能发现这样写的价值,但是当你的应用程序特别大的时候你想保持页面上的所有控件有一个统一的外观你就可以发现了。它保持XAML简单和紧凑,当你想改变Style的时候你会发现在所有应用了这个style的地方都会改变。

这是结果:

 

我们在页面中创建了本地资源,意思是我们只能在这个页面中使用这个资源,但是我们怎样才能在整个程序中使用呢?在下面的例子中,我将在App.xaml文件的<Application.Resources> 位置定义主题作为一个系统资源。

 

 

四、探索主题资源

现在让我们回到PetSounds项目,你可能想知道PhoneTextTitle1Style样式在哪里定义的,的确他是一种内嵌的样式,作为Windows Phone操作系统主题资源的一部分。

http://msdn.microsoft.com/en-us/library/windowsphone/develop/ff769552(v=vs.105).aspx

 

如果你往下滚动这个页面你将看到可用于Windows Phone应用的样式。

 

 

这些主题应该被利用到windows PHone应用程序中,你应该尽量避免使用自定义的颜色字体等样式除非你有一个好的理由,(例如你公司的品牌元素)。

 

值得注意的是有很多样式是继承其他样式的。这种可视化的继承是允许开发者避免重复创建一些公用的属性,这看起来很像css在web开发中。

 

我开始说过有两种绑定方式,第二种是{Binding }它用于页面元素绑定数据(即通常一些自定义类型的数据列表),我们将在后面的课程中看到。

 

五、自定义主题资源通过创建一个继承样式

 

现在让我们做些有趣的事情,按照我前面说的,你一般应该坚持使用Windows Phone的主题资源,但是我们也能自己创建一个我们想要的样式,我认为这样能提供一个或多个视觉。

确保鼠标的光标是在一个Text设置为animals的TextBlock上。

在属性窗口导航到杂项区域,并且找到Style属性。

 

注意你将看到style后面的textbox周围是绿色的并且后面的图标也是绿色的,如果你点击右边的小正方形,你将会看到下面的菜单:

 

在这里我们能改变绑定,实际,我将选择“转换到本地值”,当我们这样做了后,你会发现style属性值不见了取而代之的是用一个定义在<style>的复杂属性设置<TextBlock.Style>的值。

 

正如你看到的我们能将系统主题样式转换成本地样式,我盟能看到在主题样式中的定义,它是基于PhoneTextBlockBase主题样式,并且通过设置两个额外的属性FontFamily和FontSize重写了继承样式,使用这两个定义我们重写样式:

 

1、设置FontFamily为Verdana

2、设置FontSize为64

 

这效果如下:

接下来我们将这个样式成为一个全局可用的系统资源,我将<TextBlock.Style>和</TextBlock.Style>之间的代码剪切。

 

然后打开App.xaml文件

粘贴在<Application.Resources>区域(12到19行)我们也添加一个属性x:Name="MyTitleText":

 

现在我能返回到MainPage.xaml文件并且用新的应用程序资源重写TextBlock:

最后这效果应该是不会改变的:

成功。

 

回顾

快 速回顾下,这节课我们最大的收获就是学习了如何给我们的应用添加样式,让他看起来更像Windows Phone应用但是我们也能表达我们自己的个性。我们学习了如何修改WMAppMainfest.xml文件来修改我们应用的图标和标题。我们改变了应用 的标题和页面的标题,学习了如何像Windows Phone的主题资源样绑定静态资源,以及如何创建基于主题资源的本地和系统资源等等。

时间: 2024-12-03 09:28:19

菜鸟学Windows Phone 8开发(4)——设置应用程序样式的相关文章

菜鸟学Windows Phone 8开发(2)——了解XAML

原文 http://www.cnblogs.com/duolete/archive/2013/10/12/3364554.html 本系列文章来源MSDN的 面向完全新手的 Windows Phone 8 开发 主要是想通过翻译本系列文章来巩固下基础知识顺带学习下英语和练习下自己的毅力 本文地址:http://channel9.msdn.com/Series/Windows-Phone-8-Development-for-Absolute-Beginners/Part-4-Introductio

软件开发-我设置应用程序图标时出错,怎么办?

问题描述 我设置应用程序图标时出错,怎么办? 开发-我设置应用程序图标时出错,怎么办?-应用程序出错"> 解决方案 http://blog.chinaunix.net/uid-20044771-id-3218453.html 解决方案二: IOS开发之xcode 4设置应用程序图标及加载图片IOS开发之xcode 4设置应用程序图标及加载图片IOS开发之xcode 4设置应用程序图标及加载图片

一起学Windows Phone 7开发(八.BingMap控件)

对于地图来说,很多人都知道goolemap,其实微软也有自已的map api,而且一点也不比google的差.对于微软的BingMap来说,目前有多个版本可用(Bing Maps AJAX Control, Bing Maps Silverlight Control, Bing Maps Web Services.)其中用在silverlight上的控件,也一样可以用在WP7上.如果在新版SDK下无法编译,就需要把 silverlight4下的System.Windows.Browser.dll

一起学Windows Phone 7开发(七.新旧版SDK开发程序的转换)

Windows Phone 7在二月份发布后,就随着一起发布了其SDK(我之前也是用的这个版本),但是几个月后又发布了新的SDK,在这个SDK中还包含了一个免费的 Visual studio 2010 express版本.这时问题就出来了,如果之前安装了老版本的SDK,就需要全部卸载掉后,才能装新版SDK,这看起来很容易,但是一旦安装了新的 SDK后,在旧版上开发的程序,就全部不能跑了.这就需要有自已做一个手工的调整. 1.在\Properties\WMAppManifest.xml增加属性内容

一起学Windows Phone 7开发(六.Isolate Storage)

windows phone 7 目前版本上已确定没有文件系统(也就是说filestream.OpenFileDialog这样的功能都是不能使用了)和数据库系统了,那在开发时需要保存一些用户配置信息或临时数据在本地怎么办? 答案是只能使用silverlight的特色功能Isolate Storage来保存文本文件.XML文件或INI文件的方式来替代了. 其实使用Isolate Storage的最大好处就是安全性了,因为只有本程序可以访问该区域,而其他程序是无法访问的.这样也就可以对一此敏感数据的保

一起学Windows phone 7开发(四. DeepZoom)

DeepZoom 是silverlight的特色功能之一,也同样被加到了windows phone 7中来.这个功能现在应该算是phone7 Ui的主要功能了吧.因为phone7的很多Ui就是DeepZoom开发的,另外在MIX10大会有展出的漫画阅读软件也是由DeepZoom开发的,由此也可以看的出这个功能在phone7上的重要性. 一.要开发DeepZoom首先需要 DeepZoom Composer这个在expression下的工具来生成deepzoom图集. 二.新建windows ph

一起学Windows phone 7开发(一.Application Bar)

对于Windows Phone 7程序来说,UI是用Sliverlight来开发的,但是并不完全是Sliverlight的全集,与子集的关系,因为Phone 7上有的API或功能PC上是没有的(比如这个application bar),那PC上的sliverlight就更不用说了. Application Bar就是所谓的菜单栏,它包括Iconbutton和Menu两种类型.Iconbutton就相当于菜单栏里的工具栏,可以带图标:Menu就是菜单了,但是没有二级菜单.在创建之前一定要先在Ref

菜鸟学装机之八 图解跳线设置

你知道DOS的命令参数吗?比如DOS的DIR命令的参数,使用DIR/P会显示一屏目录信息后暂停下来.这些参数也被称作开关.参数或开关给使用者以很大的灵活性,可以适应多种不同的需要!与软件一样,硬件也是有参数有开关可以设置的,硬件的设置开关就称为"跳线"(Jumper).熟练的掌握跳线是装机必备的技术之一. 一.了解跳线的类型 迄今为止,跳线已经发展到了三代,分别是键帽式跳线.DIP式跳线.软跳线. 1.键帽式跳线 键帽式跳线是由两部分组成:底座部分和键帽部分(如图1所示).前者是向上直

菜鸟学DreamWeaver做ASP:数据库设置篇

第二步:数据库设置篇 1,首先确认站点根目录下有专门的数据库存放目录,比如d:\newgate下面的database文件夹(有则Ok,无则新建). 接着打开Microsoft Access DBMS,"文件"---"新建..."数据库,在弹出的对话框中选择存放路径并命名. 2,在新建的数据库中"使用设计器创建表",弹出的"表1"中设计你的相关字段,注意各自的"数据类型",还有一点很重要:字段ID,类型自动编