windows 8 1下载

TravelJourney-Windows8App视图设计

1.1建立GridApp工程

打开VS2012，选择新建一个新的项目，选择模版->VisualC#->Windows应用商店，这时会出现VS自带的

Windows8应用的模版，对于下图中前三个UI模版，他们的主要区别通过名字就可以一目了然的看出来：他们区

别是预定义的UI布局不一样。这里我们选择GridApp作为我们开发的模版，GridApp模版有三个页面，适合展

示有层级关系的图片或数据,例如，购物应用、新闻应用、RSS读取器、照片或视频应用。。

设置项目名称，位置，解决方案名称后，点击[OK]。

1.2工程中基本文件结构的介绍

GridApp的基本结构如下图

文件名描述是否需要用户操作？

定义由项目和项模板使用的样式和模

板。因为我们精心地设计了这些样式

（例如，文本格式、边距等），不仅使

它们具有吸引力，而且还能始终保持一

致，所以请在你的应用中使用这些样式

并且/或者从这些样式中派生新的样式

（参阅下面的“修改样式”）。

可能。请不要直接在此文件

中更改样式，但是在你的控

件中使用它们并/或通过它们

来创建你自己的新样式（参

阅本主题后面的“修改样

式”）。

|.vb|.cpp|.h

此页面：

主要用于侦听视图状态更改事件

（例如，贴靠、纵向以及填充状

态），并通过切换页面的视觉状

可能。请勿直接修改此文

件，而应该替代

LayoutAwarePage类实现中的

行为。你可以在SplitPage模

板中查看此类例子。

态来进行响应。你可以替代此行

为以提供自定义视觉状态名称，

但仍使用此文件中提供的事件代

码。例如，当应用处于贴靠方向

时，如果用户的UI不同（例

如，用户登录与注销时），则可

以使用与这些不同UI对应的两

个视觉状态名称，但是仍使用此

文件中提供的相同事件代码。

包含默认视图模型。为简单起

见，我们已经在此文件中创建了

一个属性，即“一个将字符串映射

到对象的字典”。这提供了一个轻

型视图模型，供你在各种视图中

用来绑定数据。你可以随意使用

此视图模型，或者提供你自己的

视图模型并忽略此属性。

由于每个页面都有相同的“返回”

按钮，因此我们在此根类型中提

供了事件处理程序，因为它们始

终具有相同的导航服务调用。

1.3设计视图

GridApp的默认视图对我们的TravelJourney已经非常足够，我们需要做的就是调整视图，让它符合我们

的要求。在这之前我们需要了解下GridApp中的视图布局，让我们以作为例子来介绍基

本的布局(其他两个页面的视图代码跟此页面差不多)，当您对的布局有一定了解之后，

你就能很快的理解其他两个视图。

双击，我们就能看见它的的默认样式：

再双击文件，我们可以去查看他的代码。

我们的要求如下：

-GroupItem变大一点

-GroupItem横排

-改变APP的名字

-改变所有的page的背景

-改变默认图标

1)GroupItem变大一点

找到GroupItem的template定义ItemTemplate="{StaticResourceStandard250x250ItemTemplate}",再

去找到这个style的定义，复制，粘贴，重命名为

Standard350x350ItemTemplate，并改变Height与width，让他们的值都等于350，并保存。

在将Grid引用的style改为我们刚才建立的这个。

2)GroupItem横排

找到ItemPanelTempalte设置，该Vertical为Horizontal

<>

3)改变APP的名字

在中把AppName的资源改为你想要的名字Travel

Journey

4)改变所有的page的背景

将我们自己的图片放入assets文件夹图标+底图.zip

,并在程序中加入他们。

将设置为资源让所有的page使用

o在中加入

o这样每个grid的最外层grid都能指定Background="{StaticResourceGridImageBrush}"

5)改变默认图标

双击：nifest，将对应的图标替换（Logo，SplashScreen等）

改完后的总体代码：

GroupedItemsPage:xaml:

x:Name="groupGridView"

tionId="ItemGridView"

="GroupedItems"

="1"

Margin="0,-3,0,0"

Padding="116,0,40,46"

ItemsSource="{BindingSource={StaticResourcegroupedItemsViewSource}}"

ItemTemplate="{StaticResourceStandard350x350ItemTemplate}"

SelectionMode="None"

IsItemClickEnabled="True"

ItemClick="ItemView_ItemClick">

<>

:

x:Class=""

xmlns="/winfx/2006/xaml/presentation"

xmlns:x="/winfx/2006/xaml"

xmlns:local="using:App6"

xmlns:localData="using:">

TravelJourney