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

原创 2013年02月25日 12:39:02

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实例教程系列 - 布局控制

与传统应用类似,Windows store应用允许开发人员通过布局控件管理应用UI。 本篇将讨论Windows8布局设计控制。Windows 8布局控件在Windows Store应用设计中,布局控件...
  • jv9
  • jv9
  • 2013-03-04 01:06
  • 6945

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

上篇Windows 8实例教程系列 - 数据绑定基础实例中,介绍Windows 8应用开发数据绑定基础,其中包括一些简单的数据绑定控件的使用。本篇将介绍较为复杂的数据绑定控件实例, 其中包括ListV...
  • jv9
  • jv9
  • 2013-03-26 11:27
  • 1706

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

数据绑定是WPF,Silverlight以及Windows Phone应用开发中最为常用的开发技术,在基于XAML的Windows Store应用开发中,数据绑定是其开发特性之一,本文将讨论Windo...
  • jv9
  • jv9
  • 2013-03-25 15:06
  • 5367

企业部署Windows 8 Store 风格应用

引言 之前我们都知道可以将应用程序发布到Windows 商店中供用户下载使用。如果我们是企业开发人员,则我们的应用可能属于以下两种类别之一: 1.应用内容是只与公司内个人切实相关的应用。 2...

测试 Windows 8 中的 Metro 风格应用

在 Metro 风格应用程序的世界里,应用程序是整个体验的重中之重。为了使这种体验能给您的用户带来愉悦,您希望确保您的应用程序经过行之有效的测试,并且表现出一流的品质。Metro 风格应用程序的生产分...

Windows Store apps开发[76]企业部署Windows 8 Store 风格应用

注:本文转自 http://www.cnblogs.com/wzk89/archive/2012/12/18/2824121.html 引言 之前我们都知道可以将...

Silverlight实例教程 - 自定义扩展Validation类,验证框架的总结和建议

标签:ValidationSilverlight数据验证晒文章实例教程 原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)