原文:Windows 8实例教程系列 - 自定义应用风格

Windows 8 XAML实例教程中,曾经提及过应用风格设计方法以及如何创建可复用样式代码。本篇将深入讨论如何创建自定义Windows8应用风格。

随着计算机硬件性能的提升,用户对于软件应用的体验性要求越来越高,而应用的风格设计也成为衡量应用成功与否的一个标准。

模板样式基础

在XAML实例教程中曾介绍过,Windows8样式应用可以根据应用范围不同进行分类,

1. 局部资源(Page Resources),该样式模板代码位于当前页面中,其效果仅有效于当前页面,其基本语法格式如下:

<Page.Resources>

<资源定义 />

</Page.Resources>

2. 全局资源(Resources Dictionary),该样式模板代码位于资源字典文件中,其效果可以被应用于整个项目,其基本语法格式如下:

<根元素对象.Resources>
     <资源定义 />
</根元素对象.Resources>
在定义Resources Dictionary后,则需要在App.xaml中声明该资源字典,使其全局化,其定义方法如下:
 

对比两者,第二种方法更加有利于资源样式代码的重复利用以及代码维护,所以微软推荐开发人员尽量使用全局资源的方式定义项目样式。

模板样式调用

无论使用以上任何一种样式声名方法,其调用方法是相同的,代码如下:

<TextBlock Style="{StaticResource PageHeaderTextStyle}"/>

其中PageHeaderTextStyle是模板样式名称。

Windows 8默认应用模板样式

在实际项目开发中,微软建议开发和设计人员基于微软默认样式模板创建或者修改应用样式,使用Visual Studio提供的默认模板样式创建Windows8项目,然后根据项目需求创建布局控件以及交互控件,创建逻辑代码等。

本篇将使用Visual C# - Windows Store - Split App(XAML)模板做为演示。

首先使用Visual Studio 2012创建一个项目,

Visual Studio自动生成项目结构,其中包括简单页面代码以及基本样式代码。

默认项目模板样式代码都在StandardStyles.xaml文件中,

默认样式代码生成的应用界面如下:

下面我们将进行简单修改应用样式,生成新的应用界面如下:

首先修改应用名称,在ItemsPage.xaml页面中,Text="{StaticResource AppName}"尝试从App.xaml中调用应用名称,

<TextBlock x:Name="pageTitle" Grid.Column="1" Text="{StaticResource AppName}" IsHitTestVisible="false" Style="{StaticResource PageHeaderTextStyle}"/>

在App.xaml中修改,

<x:String x:Key="AppName">Windows Store Controls</x:String>

然后进入StandardStyles.xaml文件,通过快速浏览可以发现代码中有许多相关注释代码,例如:

开发人员可以根据需求查找对应控件样式代码进行修改。

在StandardStyles.xaml文件中搜索"LayoutRootStyle",该样式名是控制布局页面根样式代码,

 <Style x:Key="LayoutRootStyle" TargetType="Panel">
<Setter Property="Background" Value="{StaticResource ApplicationPageBackgroundThemeBrush}"/>
<Setter Property="ChildrenTransitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>

在代码中,应用背景是由ApplicationPageBackgroundThemeBrush定义,为了修改应用背景,首先在项目中查找ApplicationPageBackgroundThemeBrush资源,通过搜索可以发现,在默认模版项目中,没有ApplicationPageBackgroundThemeBrush资源定义代码,这是因为Windows Store应用默认风格资源是定义保存在本地目录中, ..\(Program Files)\windows kits\8.0\Include\winrt\xaml\design 目录,

根据微软的建议,我们不需要直接修改默认风格资源,而只需要在当前StandardStyles.xaml文件中重新定义ApplicationPageBackgroundThemeBrush即可替换默认模板风格。

在StandardStyles.xaml文件中添加以下代码:

<SolidColorBrush x:Key="ApplicationPageBackgroundThemeBrush" Color="#018297"/>

在完成应用背景修改后,我们可以根据上面所诉方法,重新定义应用字体样式,鼠标样式以及默认按钮样式等,添加以下代码到StandardStyles.xaml文件,

<SolidColorBrush x:Key="ApplicationForegroundThemeBrush" Color="#FFFFFF"/>

    <SolidColorBrush x:Key="ApplicationSecondaryForegroundThemeBrush" Color="#FF991100"/>

    <SolidColorBrush x:Key="ApplicationPointerOverForegroundThemeBrush" Color="#AAAAAA"/>

    <SolidColorBrush x:Key="BackButtonBackgroundThemeBrush" Color="#00000000"/>

    <SolidColorBrush x:Key="BackButtonForegroundThemeBrush" Color="#FFFFFF"/>

    <SolidColorBrush x:Key="BackButtonPressedBackgroundThemeBrush" Color="#00000000"/>

    <SolidColorBrush x:Key="BackButtonPressedForegroundThemeBrush" Color="#CCCCCC"/>

    <SolidColorBrush x:Key="BackButtonPointerOverBackgroundThemeBrush" Color="#00000000"/>

    <SolidColorBrush x:Key="ListViewItemPlaceholderBackgroundThemeBrush" Color="#306772"/>

修改Tiles磁片样式,从ItemPage.xaml中可以看到,ListView是承载磁片绑定数据的控件,其资源样式模板使用的Standard80ItemTemplate,

<ListView
x:Name="itemListView"
AutomationProperties.AutomationId="ItemsListView"
AutomationProperties.Name="Items"
TabIndex="1"
Grid.Row="1"
Visibility="Collapsed"
Margin="0,-10,0,0"
Padding="10,0,0,60"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
ItemTemplate="{StaticResource Standard80ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick"/>

通过在StandardStyles.xaml文件中搜索Standard80ItemTemplate,可以发现模板是通过图片的形式控制Tile的背景,所以,我们可以通过修改图片的方式修改Tile的背景效果,

    <DataTemplate x:Key="Standard80ItemTemplate">
<Grid Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="60" Height="60">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource ItemTextStyle}" MaxHeight="40"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
</StackPanel>
</Grid>
</DataTemplate>

在项目的Assets目录下,可以找到相关背景图片,根据需求,我将修改好的图片复制覆盖到当前目录,

在编译运行项目前,需要对启动屏幕进行简单的背景设置,在项目目录中,双击”package.appxmanifest“,即可进入应用装配列表窗口,

在该窗口,点击”Splash Screen“,在”Background color“中设置背景代码”#018297“

编译运行项目,应用界面效果如下:

以上是本篇实例,简单介绍如何创建自定义应用风格。大家可以根据该方法扩展修改具体控件样式模板和风格,相关内容将在后文创建自定义控件时介绍。

本篇实例源代码

这里推荐一款由国人开发的优秀开源Windows8控件主题 - Sugar UI

SugarUI专为开发者设计;该套装包含Sweet和Solid两组自定义控件样式以及一组增强控件。两组控件样式充满个性且不失Windows Store App的风格;亮暗两版随意切换,适用于各种配色方案。一组增强控件提供了针对一些常用功能的支持,节省了开发时间;UI视觉新颖、适配性强;交互形式流畅、创新、用户体验优秀。

控件支持网站:http://www.redsafi.com/sugarui/index_cn.html

最新版源代码下载:https://github.com/RedSafi-UX/SugarUI

Sugar UI 源代码本地下载

欢迎大家留言讨论学习Windows 8应用开发,希望能够看到更多优秀的Windows store应用。

欢迎大家加入QQ技术群,一起学习讨论Windows 8&Silverlight&WPF&Widnows Phone开发技术。 
22308706(一群) 超级群500人 
37891947(二群) 超级群500人 
100844510(三群) 高级群200人 
32679922(四群) 超级群500人 
23413513(五群) 高级群200人 
32679955(六群) 超级群500人 
88585140(八群) 超级群500人 
128043302(九群 企业应用开发推荐群) 高级群200人 
101364438(十群) 超级群500人

Windows 8实例教程系列 - 自定义应用风格的更多相关文章

  1. Windows 8实例教程系列 - 理解应用框架

    原文:Windows 8实例教程系列 - 理解应用框架 Windows 操作系统之所以风靡世界,是因为其“易学易用”,从用户的角度出发,让数以万计的非IT人员使用计算机实现娱乐,工作等目的.Windo ...

  2. Windows 8实例教程系列 - 数据绑定高级实例

    原文:Windows 8实例教程系列 - 数据绑定高级实例 上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用 ...

  3. Windows 8实例教程系列 - 数据绑定基础实例

    原文:Windows 8实例教程系列 - 数据绑定基础实例 数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Stor ...

  4. Windows 8实例教程系列 - 开篇

    原文:Windows 8实例教程系列 - 开篇 2012年10月26日,微软发布Windows 8操作系统以及自主品牌平板电脑Surface,Windows作为世界上最流行的操作系统,发布一周内,下载 ...

  5. Windows 8实例教程系列 - 布局控制

    原文:Windows 8实例教程系列 - 布局控制 与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI. 本篇将讨论Windows8布局设计控制. Windows 8布 ...

  6. Silverlight,Windows 8应用开发实例教程系列汇总

    Kevin Fan分享开发经验,记录开发点滴 Silverlight,Windows 8应用开发实例教程系列汇总 2012-06-18 01:05 by jv9, 2145 阅读, 3 评论, 收藏, ...

  7. XAML实例教程系列 - 类型转换器(Type Converter)七

    XAML实例教程系列 - 类型转换器(Type Converter) 分类: Windows 8 Silverlight2012-06-25 13:40 961人阅读 评论(0) 收藏 举报 butt ...

  8. XAML实例教程系列 - 资源(Resources)

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 资源(Resources) 2012-08-10 12:47 by jv9, 1386 阅读, 1 评论, 收藏, 编辑 在Wi ...

  9. XAML实例教程系列 - 命名空间(NameSpace) 三

    XAML实例教程系列 - 命名空间(NameSpace) 2012-05-28 14:14 by jv9, 2205 阅读, 10 评论, 收藏, 编辑 上一篇曾提及XAML中,每个对象元素的声明是对 ...

随机推荐

  1. hdu4586(概率、期望)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=4586 题意:有一个色子,n面,每面有个分值a[i],其中有m面比较特殊,当该面出现时,可以再投一次.求 ...

  2. 为智能硬件提供一站式解决方案——机智云GoKit评测

    为智能硬件提供一站式解决方案——机智云GoKit评测 2014年12月24日 作者: ladouyu 3 17,414+ 4 EMW3162GoKit开发板STM32F103智能硬件机智云2.0 从物 ...

  3. 利用Java针对MySql封装的jdbc框架类 JdbcUtils 完整实现(包括增删改查、JavaBean反射原理,附源代码)

    近期看老罗的视频,跟着完毕了利用Java操作MySql数据库的一个框架类JdbcUtils.java,完毕对数据库的增删改查.当中查询这块,包含普通的查询和利用反射完毕的查询,主要包含以下几个函数接口 ...

  4. Effective C++ 条款24

    若全部參数皆需类型转换,请为此採用non-member函数 我们直奔主题 假设你定义一个有理数类例如以下 class Rational{ public: Rational(int numerator= ...

  5. Coreseek:indexer crashed神秘

    浩哥前两天让我再Coreseek该指数再次这样做,由于需求方面变化不大,公司名称应出现指数.在添加的配置文件的面孔sql_field_string:串场.. 此属性特别有用,因为它不仅作为过滤器的特性 ...

  6. 在mysql数据库中关于日期时间字段的处理

    在mysql数据库中关于日期时间字段的处理 在开发中,日期时间字段一般有如下几种设计 假设要获取2013-08-15日到2013-08-16日之间的记录 1. 直接使用日期时间类字段 相关sql语句如 ...

  7. 《Android内核剖析》读书笔记 第13章 View工作原理【View重绘过程】

    计算视图大小的过程(Measure) 视图大小,准确的来说应该是指视图的布局大小:我们在layout.xml中为每个UI控件设置的layout_width/layout_height两个属性被用来设置 ...

  8. c#和UDP SOCKET广播

    server:  Socket sock = new Socket(AddressFamily.InterNetwork, SocketType.Dgram,ProtocolType.Udp); // ...

  9. 移动web性能优化笔记

    移动web性能优化 最近看了一些文章,对移动web性能优化方法,做一个简单笔记 笔记内容主要出自 移动H5前端性能优化指南和移动前端系列——移动页面性能优化

  10. 无法打开登录所请求的数据库 "ASPState"。登录失败。 用户 'NT AUTHORITY/SYSTEM' 登录失败。

    原文:无法打开登录所请求的数据库 "ASPState".登录失败. 用户 'NT AUTHORITY/SYSTEM' 登录失败. 无法打开登录 'ASPState' 中请求的数据库 ...