内容预告：
- 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不应该包含业务逻辑。
MVVMLight框架: http://galasoft.ch/mvvm/
<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>
