1、第3章 控件简化开发（一),本章内容,Silverlight控件分类 Silverlight常用控件 用户界面布局 数据绑定,本章目标,了解Silverlight控件分类 能使用常见控件 能使用Grid、StackPanel和Canvas对界面进行布局 深入了解数据绑定 能使用ListBox和DataGrid进行数据绑定,1.控件概述,1.1 控件模型,派生出绘图类控件,派生出容器类控件,派生出内容类控件,派生出列表类控件,1.2 控件分类,控件的使用包括以下内容,创建控件实例 使用属性更改控件外观 使用样式更改控件外观 使用模板定义控件外观 处理控件事件,按功能分，控件可以分为以下5类：,面
2、板控件 内容控件 列表控件 普通控件 其他控件,控件分类,面板控件：共4个，都派生自Panal，分别是Canvas、 Grid、StackPanel和InkPresenter,Canvas控件使用Margin属性来定位其内部元素 Grid控件类似于HTML中的，使用行和列来定位其内部元素 StackPanel控件按照顺序排列的方式来布局其内部元素 InkPresenter控件实现墨迹标注应用,控件分类,内容控件,派生自ContentControl类，具有Content属性。内容控件包括Button、RadioButton、HyperlinkButton、RepeatButton、ToggleB
3、utton、CheckBox和ScrollViewer,Button：支持Click事件，以响应用户的单击 RepeatButton：在鼠标按下到松开的过程中连续触发Click事件 HyperlinkButton：显示超链接的按钮，单击后可链接到指定的URL ToggleButton：鼠标连续单击时交替重复改变样式（默认交替改变背景色）的按钮 RadioButton：单选按钮 CheckBox：复选框 ScrollViewer：滚动查看器，用于显示滚动内容，通过Content属性指定显示内容,控件分类,控件分类,列表控件,列表控件派生自ItemsControl类，用于显示数据集合列表。数据既可
4、以在XAML中静态指定，也可以从数据源中获取。列表控件包括ListBox、ComboBox和TabControl,控件分类,列表控件,ComboBox：通过元素设置下拉列表项。列表项具有Content属性,1.2 控件分类,列表控件,ListBox：通过元素设置列表项。列表项具有Content属性,控件分类,TabControl：使用定义每个选项卡。列表项具有Content属性,控件分类,普通控件,普通控件是直接从Control类派生,TextBox：文本编辑框，可以是单行文本框，也可以是多行文本框,Calendar：日历控件，非内置控件，在Silverlight控件开发包中,DatePick
5、er：允许用户输入或从下拉的Calendar控件中选择日期,DataGrid：用于显示表格数据,GridSplitter：与Grid控件在一起使用，使用户可以调整行和列的大小,PasswordBox：用于在单行输入敏感信息（一般是密码）,控件分类,普通控件,ProgressBar：进度条控件，它由2种模式：IsIndeterminate属性为真时，显示重复模式；为false时，进度基于值进行填充,private void PasswordBox_PasswordChanged(object sender,RoutedEventArgs e) this.pb1.Value = pdb1.Pass
6、word.Length;this.pb2.Value = pdb1.Password.Length; ,控件分类,普通控件,Slider：滑动条，该控件可以在一定的范围内让用户通过移动Thumb控件来改变值。最常用的属性包括Value、Maximum和Minimum,private void sd1_ValueChanged(object sender, RoutedPropertyChangedEventArgs e) rtg1.Fill = new SolidColorBrush(Color.FromArgb(255, Convert.ToByte(sd1.Value),0,0); ,控件
7、分类,其他一些控件直接派生自FrameworkElement，与Control是平级关系,TextBlock：显示少量静态信息的控件，类似于ASP.NET中的Label,Border：该控件用于在另一元素（控件）周围绘制边框或背景，经常用于布局，其中可以嵌套派生自UIElement类的控件,Image：显示图片,MediaElement：该控件用于显示和控制多媒体,ToolTip：提供工具栏提示信息。该控件不可以直接使用，而是通过ToolTipService类的静态属性ToolTip来实现,Popup：在UI元素之上显示自定义的内容。Popup类似于ToolTip，但它不能自动显示和隐藏，需要
8、通过IsOpen属性在类代码中进行控制,显示和隐藏： this.pop1.IsOpen = !this.pop1.IsOpen;,其他控件,小结1,Silverlight控件按功能分可以分为哪几类？ Content属性是不是附加属性？ Image控件的Source属性有哪几种不同的赋值方法？,2.控件布局,2.1 Canvas,使用Canvas实现绝对布局。通过Canvas的附加属性Left、Top和Zindex实现元素的绝对定位,2.2 StackPanel,StackPanel能够按水平或垂直方向对元素进行顺序排列，常用属性是Orientation,用于确定元素的排列方向，默认垂直排列子元
9、素。,控件的Margin属性,StackPanel,StackPanel布局要依赖于内部元素的的Margin属性，但与Canvas不同，属性值相对于其上下左右的元素而言，而非相对于容器,2.3 Grid,Grid可以实现多行和多列的布局，是所有布局中最为灵活的一种,使用Grid的附件属性和定义行集合和列集合,每个行集合包含若干个元素，每个列集合包含若干个元素,可以使用Grid的附加属性和对行或者列进行合并,布局元素时，使用Grid的附加属性和定位元素所处的行和列,小结2,如果Grid控件不设置行和列，如果其内部放置控件，控件是如何布局的？ 使用Margin属性在Canvas布局和StackPa
10、nel布局时有何区别？,3 数据绑定,3.1 DataContext属性,任何继承自FrameworkElement类的元素都具有DataContext属性，该属性属于数据上下文，通过该属性指定数据对象。数据上下文是可以继承的，如果指定了父元素的数据上下文，则子元素自动继承，子元素通过Binding标记获取数据源的值,Binding 数据对象属性名,private void UserControl_Loaded(object sender, RoutedEventArgs e) var stu = new Student()/定义数据对象No = 1,Name = “Jack“,Sex = “
11、男“,Address = “上海“,Email=“J“;sp1.DataContext = stu; ,3.2 OneTime绑定,OneTime绑定适用于显示数据而不对数据进行更新的情况,如果要使绑定的数据源在发生更改时通知控件，则数据源需要实现INotifyPropertyChanged接口,public class Student:System.ComponentModel.INotifyPropertyChanged public int Noget return _no; set _no = value;NotifyPropertyChanged(“No“);public event
12、 System.ComponentModel.PropertyChangedEventHandler PropertyChanged;public void NotifyPropertyChanged(string propertyName)if (PropertyChanged != null)PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName); ,OneTime绑定,private void UserControl_Loaded(object sender, Route
13、dEventArgs e) stu = new Student()No = 1,Name = “Jack“,Sex = “男“,Address = “上海“,Email = “J“;this.LayoutRoot.DataContext = stu; ,3.3 OneWay绑定,使用Mode=OneWay执行单向绑定。单向绑定实现数据的单向更新，即数据源发生改变时会通知给控件显示，但用户界面的改变不会自动通知给数据源 单向绑定时，数据对象必须实现INotifyPropertyChanged接口,private void UserControl_Loaded(object sender, Rou
14、tedEventArgs e) list1.ItemsSource = GetCity(); ,指定列表数据源,指定绑定的属性名,3.4 TwoWay绑定,使用TwoWay执行双向绑定，可以更新目标控件和数据源，当目标控件属性发生更改时通知到数据源，当数据源发生更改时，通知到目标控件。绑定到控件的数据源必须实现INotifyPropertyChanged接口,public Page() this.dataGrid1.ItemsSource = GetUsers(); public List GetUsers() List users = new Listnew UserName=“tom“,A
15、ddress=“北京市朝阳区大通路3号“,new UserName=“jack“,Address=“上海市闸北区沪太路2000号“,new UserName=“white“,Address =“深圳“,new UserName=“sammi“,Address=“武汉“,new UserName=“ben“,Address =“北京“,new UserName=“james“,Address=“上海市徐汇区赵家浜路12号“;return users; ,修改后,小结3,Silverlight数据绑定控件有哪三种？默认绑定是哪一种？ 如果要使绑定的数据源在发生更改时通知控件，数据源需要实现什么接口
16、？,本章总结,Silverlight控件直接或间接派生自FrameworkElement类，控件主要分为以下5类： 面板控件：派生自Panel类，其中大部分用于布局 内容控件：派生自ContentControl类，都具有Content属性 列表控件：派生自ItemsControl类，显示列表数据 普通控件：直接派生自Control类 其他控件：派生自FrameworkElement类 通过Canvas控件可对元素进行绝对定位 通过StackPanel控件可按顺序排列元素 通过Grid控件可以按行和列对元素进行布局 数据绑定通过Binding对象来实现，每个控件都拥有DataContext属性 列表空间可以通过ItemSoruce属性来指定集合数据 数据绑定的模式有3种： OneTime：一次绑定，只在绑定创建时使用数据源更新目标控件，适用于只显示数据而不进行数据更新的情况 OneWay：单向绑定，在绑定时或数据源发生变化时更新到目标，适用于显示变化的数据 TwoWay：双向绑定，数据对象的更新既会反映到目标控件，也会通知给数据源 单向绑定和双向绑定的数据对象需要实现INotifyPropertyChanged接口,
