02，设计Windows Phone 应用

内容预告：

• 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>