02，设计Windows Phone 应用

来源：互联网发布：python中的append 编辑：程序博客网时间：2024/05/17 18:17

内容预告：

Windows Phone 设计
设计一个应用
介绍XAML布局
样式和主题
设计时数据显示
数据绑定
Lists 和 LongListSelector

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

Windows Phone 设计原则：

1，清爽，简单，开放，快速

快速响应
专注主要功能
用很少做很多
减少不必要的元素
令人愉快地使用空间
全屏绘制

2，展示排版

清晰且漂亮
直接表达信息
坚定地偏向重量，平衡，缩放

3，充满情感

感觉灵敏和鲜活
创造一个系统
增加可用性
体现UI之间的过渡的重要性
增加维度和深度

4，内容，而非装饰

深入内容，取代装饰
取消非内容的视觉
内容即UI
直接与内容交互

5，真实的数字化

为形式因素设计
不要尝试做不该做的
直接

更多参考：http://msdn.microsoft.com/en-us/library/hh202915.aspx

先在纸上设计：

早点设计导航：

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

图形设计工具：Blend

写代码的工具：Visual Studio

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

应用开发模板：

Windows Phone App，最基本的模板
Windows Phone Databound App，基于MVVM的模板
Windows Phone Pivot App，用Pivot导航的模板
Windows Phone Panorama application，基于Panorama的模板

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

Pivot页面：

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

XAML显示元素：

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

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

XAML 和元素：

<phone:PivotItem Header="recipe">   <Grid>     <Grid.RowDefinitions>       <RowDefinition Height="240"/>       <RowDefinition Height="*"/>       <RowDefinition Height="Auto"/>     </Grid.RowDefinitions>     <Image x:Name="RecipeImage" Stretch="UniformToFill"/>     <ScrollViewer Grid.Row="1">       <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" />     </ScrollViewer>     <StackPanel Grid.Row="2" Orientation="Horizontal">       <TextBlock Text="Prep time: " />       <TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" />     </StackPanel>   </Grid> </phone:PivotItem>

Grid包含元素：

<!--Pivot item one--> <phone:PivotItem Header="recipe">   <Grid>     <Grid.RowDefinitions>       <RowDefinition Height="240"/>       <RowDefinition Height="*"/>       <RowDefinition Height="Auto"/>     </Grid.RowDefinitions>     <Image x:Name="RecipeImage" Stretch="UniformToFill"/>     <ScrollViewer Grid.Row="1">       <TextBlock x:Name="DirectionsTextBlock" TextWrapping="Wrap" />     </ScrollViewer>     <StackPanel Grid.Row="2" Orientation="Horizontal" >       <TextBlock Text="Prep time: " />       <TextBlock MinWidth="200" x:Name="PrepTimeTextBlock" />     </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 ensure your controls are            aligned on common boundaries.  The image has a top margin of -32px to            account for the System Tray. Set this to 0 (or remove the margin altogether)            if the System Tray is hidden.            Before shipping remove this XAML and the image itself.-->        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0,-32,0,0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->

利用对齐风格：

<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top"          Height="800" Width="480" Margin="0,-32,0,0"          Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />

用Margin属性填充空白：

<phone:PivotItem Header="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里直接设置颜色和字体：

<ScrollViewer Grid.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:PivotItem Header="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" Style="{StaticResource PhoneTextSmallStyle}" />     </ScrollViewer>     <StackPanel Grid.Row="2" Orientation="Horizontal" Margin="12" HorizontalAlignment="Left" >       <TextBlock Text="Prep time: " Margin="0" Style="{StaticResource PhoneTextNormalStyle}" />       <TextBlock  x:Name="PrepTimeTextBlock" Style="{StaticResource PhoneTextSubtleStyle}" />     </StackPanel>   </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属性上。

<TextBlock x: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 PropertyChangedEventHandler PropertyChanged;…}
```
当数据对象的某个属性值改变时，必须触发PropertyChanged事件。
XAML在运行时订阅这个事件来更新UI元素的显示数据。

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

public class ItemViewModel : INotifyPropertyChanged {    private string _id;    /// Sample ViewModel property; this property is used to identify the object.    public string ID    {        get { return _id; }        set {            if (value != _id)            {                _id = value;                 NotifyPropertyChanged("ID");            }        }    }    public event PropertyChangedEventHandler PropertyChanged;    private void NotifyPropertyChanged(String propertyName)    {        PropertyChangedEventHandler handler = PropertyChanged;        if (null != handler)        {            handler(this, new PropertyChangedEventArgs(propertyName));        }    }}

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

public class ItemViewModel : INotifyPropertyChanged {    private string _id;    public string ID    {        get { return _id; }        set { this.SetProperty(ref this._id, value);  }    }    public event PropertyChangedEventHandler PropertyChanged;    protected bool SetProperty<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 void OnPropertyChanged([CallerMemberName] string propertyName = null)    {        var eventHandler = this.PropertyChanged;        if (eventHandler != null)            eventHandler(this, new PropertyChangedEventArgs(propertyName));    } }

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

Observable Collection：

/// <summary> /// A collection for ItemViewModel objects. /// </summary> public ObservableCollection<ItemViewModel> Items { get; private set; } public void LoadData() {     this.Items.Add(new ItemViewModel() { ID = "0", LineOne = "runtime one", LineTwo = ... });     this.Items.Add(new ItemViewModel() { ID = "1", LineOne = "runtime two", LineTwo = ... });     this.Items.Add(new ItemViewModel() { 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:LongListSelector x: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：

<phone:PhoneApplicationPage.Resources>  <DataTemplate x:Key="RecipeDataGroupTemplate">     <Grid Margin="5" >        <Grid.ColumnDefinitions>           <ColumnDefinition Width="150"/>           <ColumnDefinition Width="*"/>         </Grid.ColumnDefinitions>         <Grid.RowDefinitions>           <RowDefinition/>           <RowDefinition/>         </Grid.RowDefinitions>         <Image Source="{Binding BackgroundImage}" Width="150" Stretch="UniformToFill" Grid.RowSpan="2"/>         <TextBlock Text="{Binding Title}"  Grid.Column="1" Grid.Row="0" Style="{StaticResource …}"/>         <TextBlock Text="{Binding Description}" Grid.Column="1" Grid.Row="1" Style="{StaticResource …}" />      </Grid>  </DataTemplate></phone:PhoneApplicationPage.Resources>