设计WindowsPhone应用.doc

本文由麦可网/course收集整理，转载请注明出处。设计Windows Phone 应用内容预告： Windows Phone 设计 设计一个应用 介绍XAML布局 样式和主题 设计时数据显示 数据绑定 Lists 和 LongListSelectorWindows Phone 设计风格：WindowsPhone团队的设计灵感来自大都市的标牌，开发时应反映这种风格。Windows Phone 设计原则：1，清爽，简单，开放，快速 快速响应 专注主要功能 用很少做很多 减少不必要的元素 令人愉快地使用空间 全屏绘制2，展示排版 清晰且漂亮 直接表达信息 坚定地偏向重量，平衡，缩放3，充满情感 感觉灵敏和鲜活 创造一个系统 增加可用性 体现UI之间的过渡的重要性 增加维度和深度4，内容，而非装饰 深入内容，取代装饰 取消非内容的视觉 内容即UI 直接与内容交互5，真实的数字化 为形式因素设计 不要尝试做不该做的 直接先在纸上设计：早点设计导航：开始用工具构建：设计好看程序的方法是把设计和开发分开。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 和 元素： Grid包含元素： 元素的对齐：元素的对齐很重要，WindowsPhone的魔数是12px，你的页面应该从设备屏幕的左侧开始有一个漂亮的视觉线。空白应该至少有12px，以12px的增量上对齐。固定食谱页面的左对齐：Visual Studio和 Blend的对齐网格：底部的Button可以用来显示一个12px的对齐网格，可以用来设置对齐。叠加对齐网格：所有的新工程中都在Assets文件夹里有一个AlignmentGrid.png的文件，你可以在设计和运行时取消MainPage.XAML的以下注释： !- 利用对齐风格：用Margin属性填充空白： 将主题应用到元素：你可以在XAML里直接设置颜色和字体： 前景色和主题：用内置风格： 在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属性上。可以通过以下两种方式设置数据源： 给任何从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(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：/ /A collection for ItemViewModel objects. / public ObservableCollection 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不应该包含业务逻辑。更多介绍：/en-us/library/windowsphone/develop/gg521153(v=vs.92).aspxMVVMLight框架: http:/galasoft.ch/mvvm/ LongListSelector：可以是ListBox+，Flat List，带标题的Grouped List，Jump List，支持所有UI和数据的虚拟化，原来在toolkit里，现在SDK自带，做为ListBox的替代品。列表项的渲染：所有列表控件，包括ListBox，LongListSelector，没有默认渲染模板，如果想简单地绑定到ItemsSource属性，那么只会显示这个数据对象的类型。 从设计时数据生成列表：在Blend里，在列表模式时，如果你从数据窗口拖动一个数据集合到设计界面，它将会生成一个ListBox并试图为列表项生成一个默认渲染模板。下图为在XAML中手动修改phone:LongListSelector。列表的各种模板：不同的内容在列表中肯定希望显示效果也不同，自定义是肯定的。有多个因素决定了LongListSelector最终显示： Grou