设计WindowsPhone 应用www.maiziedu.com-CSDN博客

本文链接：https://blog.csdn.net/coco510/article/details/39964211

篇幅较长，先上内容结构：

· Windows Phone 设计

· 设计一个应用

· 介绍XAML布局

· 样式和主题

· 设计时数据显示

· 数据绑定

· Lists 和 LongListSelector

Windows Phone 设计风格：WindowsPhone团队的设计灵感来自大都市的标牌，开发时应反映这种风格。

Windows Phone 设计原则：
1，清爽，简单，开放，快速

· 快速响应

· 专注主要功能

· 用很少做很多

· 减少不必要的元素

· 令人愉快地使用空间

· 全屏绘制

2，展示排版

· 清晰且漂亮

· 直接表达信息

· 坚定地偏向重量，平衡，缩放

3，充满情感

· 感觉灵敏和鲜活

· 创造一个系统

· 增加可用性

· 体现UI之间的过渡的重要性

· 增加维度和深度

4，内容，而非装饰

· 深入内容，取代装饰

· 取消非内容的视觉

· 内容即UI

· 直接与内容交互

5，真实的数字化

· 为形式因素设计

· 不要尝试做不该做的

· 直接

先在纸上设计：

早点设计导航：

开始用工具构建：设计好看程序的方法是把设计和开发分开。XAML和WindowsPhone开发工具就是为了达到这个目的。

图形设计工具：Blend

写代码的工具：VisualStudio

设计风格和开发：先让程序能运行，写优秀的代码没有UI也没人用的，写手机应用时要格外注意UI，将UI设计人员带入到开发团队中。

应用开发模板：

· Windows Phone App，最基本的模板

· Windows Phone Databound App，基于MVVM的模板

· Windows Phone Pivot App，用Pivot导航的模板

· Windows Phone Panoramaapplication，基于Panorama的模板

应用程序类型：三种不同的UI类型

Pivot页面：

XAML和对象：每一个XAML元素都被声明成一个对象。XAML是基于XML的语言，是用XML表现UI的方式。XAML元素等于System.Windows.Controls下的对象。

XAML显示元素：

显示元素属性：每个元素都包括位置，高宽，颜色和大小等属性，这些值在显示时会使用，但如果代码里有修改的话，效果也会随之改变。意思是代码后于XAML起效。

XAML元素类继承关系：每个类都继承于 FrameworkElement，可以自定义派生控件。

XAML 和元素：

<phone:PivotItemHeader="recipe">

<Grid>

<Grid.RowDefinitions>

<RowDefinitionHeight="240"/>

<RowDefinitionHeight="*"/>

<RowDefinitionHeight="Auto"/>

</Grid.RowDefinitions>

<ScrollViewerGrid.Row="1">

</ScrollViewer> <StackPanel Grid.Row="2" Orientation="Horizontal">

</StackPanel>

</Grid> </phone:PivotItem>

Grid包含元素：

<phone:PivotItemHeader="recipe">

<Grid>

<Grid.RowDefinitions>

<RowDefinitionHeight="240"/>

<RowDefinitionHeight="*"/>

<RowDefinitionHeight="Auto"/>

</Grid.RowDefinitions>

<ScrollViewerGrid.Row="1">

</ScrollViewer>

</StackPanel>

</Grid> </phone:PivotItem>

元素的对齐：元素的对齐很重要，WindowsPhone的魔数是12px，你的页面应该从设备屏幕的左侧开始有一个漂亮的视觉线。空白应该至少有12px，以12px的增量上对齐。
固定食谱页面的左对齐：

Visual Studio和 Blend的对齐网格：底部的Button可以用来显示一个12px的对齐网格，可以用来设置对齐。

叠加对齐网格：所有的新工程中都在Assets文件夹里有一个AlignmentGrid.png的文件，你可以在设计和运行时取消MainPage.XAML的以下注释：

<!--Uncomment to see an alignment grid to help ensureyour controls are aligned on common boundaries.

The image has a top margin of -32px to account for theSystem Tray. Set this to 0 (or remove the margin altogether)

if the System Tray is hidden.

Before shipping remove this XAML and the imageitself.-->

利用对齐风格：

<ImageSource="/Assets/AlignmentGrid.png" VerticalAlignment="Top"

Height="800" Width="480"Margin="0,-32,0,0"

Grid.Row="0" Grid.RowSpan="2"IsHitTestVisible="False"/>

用Margin属性填充空白：

<phone:PivotItemHeader="recipe">
<Grid>
<Grid.RowDefinitions>
    <RowDefinition Height="240"/>
   <RowDefinition Height="*"/>
   <RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image x:Name="RecipeImage" Margin="12" Stretch="UniformToFill"/>
   <ScrollViewer Grid.Row="1">
   <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"Margin="12,0,0,0"/>
   </ScrollViewer>
   <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" >
    <TextBlock Text="Prep time: " Margin="0" />
   <TextBlock x:Name="PrepTimeTextBlock"/>
   </StackPanel>
</Grid>
</phone:PivotItem>

将主题应用到元素：你可以在XAML里直接设置颜色和字体：

<ScrollViewerGrid.Row="1">
<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" Margin="12,0,0,0" Foreground="White" FontSize="12" />
</ScrollViewer>
<StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" >
<TextBlock Text="Prep time: " Margin="0" Foreground="White"/>
<TextBlock x:Name="PrepTimeTextBlock"Foreground="LightGray"FontSize="24"/>
</StackPanel>

前景色和主题：

用内置风格：

<phone:PivotItemHeader="recipe">

<Grid>

<Grid.RowDefinitions>

<RowDefinitionHeight="240"/>

<RowDefinitionHeight="*"/>

<RowDefinitionHeight="Auto"/>

</Grid.RowDefinitions>

<ScrollViewerGrid.Row="1">

<TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap"

Margin="12,0,0,0" Style="{StaticResource PhoneTextSmallStyle}" />
</ScrollViewer>

</Grid> </phone:PivotItem>

在Visual Studio 2012中应用风格：

设计时数据显示：设计时数据是用工具“所见即所得”的福利的本质，BLEND允许你创建示例数据，从XML生成或从现有类导入。

从类里创建示例数据：在Visual Studio里最简单的方式定义数据类，在Blend中用“Creating Sample Data from Class”功能生成设计时数据。

编辑设计时数据的格式和值：在Blend里为每一个字段编辑，编辑每个字段的最大长度。

数据绑定：设置UI最简单的方式是通过设置控件的属性：

textBox1.Text= "Hello, world";

在复杂的应用中，这样的代码就变得笨重且容易出错了。可以用Silverlight的数据绑定连接到数据类，数据类是数据绑定的源，叫做ViewModel。
UI控件可以自动地从ViewModel得到它们需要的值。改变ViewModel里的属性，显示会变。用户输入值，ViewModel里的属性也会变。

在XAML中绑定数据：控件的属性可以绑定到数据对象的Public属性上。下例中TextBlock的Text属性绑定到数据源的Directions属性上。

<TextBlockx:Name="DirectionsTextBlock"TextWrapping="Wrap" Margin="12,0,0,0" Text="{Binding Directions}" />

可以通过以下两种方式设置数据源：

· 给任何从FrameworkElement派生的类设置DataContext属性

· 给List（可迭代的）控件设置ItemSources属性。

绑定模式：Binding的Mode属性决定了如何在数据源和控件之间同步改变。

· OneTime，控件的属性值只能被设置一次，其他的修改都被忽略。

· OneWay，数据源的改变能影响到控件，但反过来不会。

· TwoWay，数据源的改变能影响到控件，反之亦然。

INotifyPropertyChanged：

数据源如果是OneWay或TwoWay绑定模式的话，必须实现INotifyPropertyChanged接口，这个接口只有一个事件PropertyChanged需要实现。
public class ItemViewModel : INotifyPropertyChanged

{ public event PropertyChangedEventHandlerPropertyChanged;…}

· 当数据对象的某个属性值改变时，必须触发PropertyChanged事件。

· XAML在运行时订阅这个事件来更新UI元素的显示数据。

ViewModel在WindowsPhone7.1中的实现：因为Magic Strings的原因，老式风格的实现容易出错。

public classItemViewModel : INotifyPropertyChanged

{private string _id;

/// SampleViewModel property; this property is used to identify the object.

public stringID

{get { return _id;}

set {if (value != _id)

{_id = value;

NotifyPropertyChanged("ID"); } } }

public eventPropertyChangedEventHandler PropertyChanged;

private voidNotifyPropertyChanged

(String propertyName) {

PropertyChangedEventHandler handler = PropertyChanged;

if (null!= handler){

handler(this, new PropertyChangedEventArgs(propertyName)); } }}

ViewModel在WindowsPhone8中的实现：新的风格：CallerMemberName特性：

public classItemViewModel : INotifyPropertyChanged

{private string _id;

public stringID {

get { return_id; }

set { this.SetProperty(ref this._id, value); } }

public eventPropertyChangedEventHandler PropertyChanged;

protected boolSetProperty<T>(ref T storage, T value,[CallerMemberName] String propertyName = null)

{if (object.Equals(storage, value)) return false;

storage = value;

this.OnPropertyChanged(propertyName);

return true; }

protected voidOnPropertyChanged([CallerMemberName] string propertyName = null)

{var eventHandler = this.PropertyChanged;

if (eventHandler != null)

eventHandler(this, new PropertyChangedEventArgs(propertyName)); } }

绑定到列表：通过设置ItemsSource属性，可以将列表控件可以绑定到集合，对于OneWay或TwoWay模式，必须实现ObservableCollection，且ObservableCollection中的项必须实现INotifyPropertyChanged接口。

ObservableCollection：

/// <summary>

///A collectionfor ItemViewModel objects.

/// </summary>publicObservableCollection<ItemViewModel> Items

{ get; private set; } public void LoadData() { this.Items.Add(new ItemViewModel() { ID = "0",LineOne = "runtime one", LineTwo = ... }); this.Items.Add(newItemViewModel() { ID = "1", LineOne= "runtime two", LineTwo = ... }); this.Items.Add(newItemViewModel() { ID = "2", LineOne= "runtime three", LineTwo = ... });}

MVVM：MVVM=Model-View-ViewModel，是一种架构模式。

· Model，暴露数据，从本地存储或远程存储获取数据。

· ViewModel，绑定数据到View。

· View，实现表现层，显示数据并接收用户的输入，View不应该包含业务逻辑。

更多介绍：http://msdn.microsoft.com/en-us/library/windowsphone/develop/gg521153(v=vs.92).aspx
MVVMLight框架:http://galasoft.ch/mvvm/

LongListSelector：可以是ListBox++，Flat List，带标题的Grouped List，Jump List，支持所有UI和数据的虚拟化，原来在toolkit里，现在SDK自带，做为ListBox的替代品。列表项的渲染：所有列表控件，包括ListBox，LongListSelector，没有默认渲染模板，如果想简单地绑定到ItemsSource属性，那么只会显示这个数据对象的类型。

<Grid x:Name="ContentPanel" Grid.Row="1"Margin="12,0,12,0">
<phone:LongListSelectorx:Name="lstGroups"

ItemsSource="{Binding ItemGroups}" SelectionChanged="lstGroups_SelectionChanged" >
</phone:LongListSelector>
</Grid>

从设计时数据生成列表：在Blend里，在列表模式时，如果你从数据窗口拖动一个数据集合到设计界面，它将会生成一个ListBox并试图为列表项生成一个默认渲染模板。下图为在XAML中手动修改phone:LongListSelector。

列表的各种模板：不同的内容在列表中肯定希望显示效果也不同，自定义是肯定的。有多个因素决定了LongListSelector最终显示：

· GroupFooterTemplate，如果是分组显示的话，这个区域显示在LLS控件的底部。

· GroupHeaderTemplate，如果是分组显示的话，这个区域显示在LLS控件的顶部。

· ItemTemplate，每一个数据项的布局。

· JumpListStyle，Jump List中项的布局。

· ListFooterTemplate，整个列表的底部模板。

· ListHeaderTemplate，整个列表的顶部模板。

在Blend中修改ItemTemplate：

XAML中的DataTemeplate：