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

简介: 原文:Windows 8实例教程系列 - 自定义应用风格 在Windows 8 XAML实例教程中,曾经提及过应用风格设计方法以及如何创建可复用样式代码。本篇将深入讨论如何创建自定义Windows8应用风格。
原文: 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人

目录
相关文章
|
2月前
|
NoSQL Redis 数据安全/隐私保护
Redis 最流行的图形化界面下载及使用超详细教程(带安装包)! redis windows客户端下载
文章提供了Redis最流行的图形化界面工具Another Redis Desktop Manager的下载及使用教程,包括如何下载、解压、连接Redis服务器以及使用控制台和查看数据类型详细信息。
177 6
Redis 最流行的图形化界面下载及使用超详细教程(带安装包)! redis windows客户端下载
|
2月前
|
存储 弹性计算 运维
阿里云国际Windows操作系统迁移教程
阿里云国际Windows操作系统迁移教程
|
2月前
|
NoSQL Redis 数据库
Redis 图形化界面下载及使用超详细教程(带安装包)! redis windows下客户端下载
文章提供了Redis图形化界面工具的下载及使用教程,包括如何连接本地Redis服务器、操作键值对、查看日志和使用命令行等功能。
174 0
Redis 图形化界面下载及使用超详细教程(带安装包)! redis windows下客户端下载
|
1月前
|
安全 前端开发 Windows
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
本文介绍了 Electron 应用在 Windows 中的更新原理,重点分析了 `NsisUpdater` 类的实现。该类利用 NSIS 脚本,通过初始化、检查更新、下载更新、验证签名和安装更新等步骤,确保应用的更新过程安全可靠。核心功能包括差异下载、签名验证和管理员权限处理,确保更新高效且安全。
38 4
Windows Electron 应用更新的原理是什么?揭秘 NsisUpdater
|
1月前
|
Android开发 数据安全/隐私保护 虚拟化
安卓手机远程连接登录Windows服务器教程
安卓手机远程连接登录Windows服务器教程
59 4
|
2月前
|
存储 NoSQL MongoDB
MongoDB入门级别教程全(Windows版,保姆级教程)
一份全面的MongoDB入门级教程,包括在Windows系统上安装MongoDB、使用MongoDB Shell和Compass GUI进行数据库操作,以及MongoDB的基本数据类型和查询技巧。
84 2
MongoDB入门级别教程全(Windows版,保姆级教程)
|
2月前
|
Java Windows
如何在windows上运行jar包/JAR文件 如何在cmd上运行 jar包 保姆级教程 超详细
本文提供了一个详细的教程,解释了如何在Windows操作系统的命令提示符(cmd)中运行JAR文件。
1141 1
|
2月前
|
XML 缓存 前端开发
Electron-builder 是如何打包 Windows 应用的?
本文首发于微信公众号“前端徐徐”,作者徐徐深入解析了 electron-builder 在 Windows 平台上的打包流程。文章详细介绍了 `winPackager.ts`、`AppxTarget.ts`、`MsiTarget.ts` 和 `NsisTarget.ts` 等核心文件,涵盖了目标创建、图标处理、代码签名、资源编辑、应用签名、性能优化等内容,并分别讲解了 AppX/MSIX、MSI 和 NSIS 安装程序的生成过程。通过这些内容,读者可以更好地理解和使用 electron-builder 进行 Windows 应用的打包和发布。
177 0
|
2月前
|
Windows
.NET 隐藏/自定义windows系统光标
【10月更文挑战第20天】在.NET中,可以使用`Cursor`类来控制光标。要隐藏光标,可将光标设置为`Cursors.None`。此外,还可以通过从文件或资源加载自定义光标来更改光标的样式。例如,在表单加载时设置`this.Cursor = Cursors.None`隐藏光标,或使用`Cursor.FromFile`方法加载自定义光标文件,也可以将光标文件添加到项目资源中并通过资源管理器加载。这些方法适用于整个表单或特定控件。
|
2月前
|
数据可视化 程序员 C#
C#中windows应用窗体程序的输入输出方法实例
C#中windows应用窗体程序的输入输出方法实例
54 0
下一篇
DataWorks