Silverlight之控件应用总结(一)
代码都是测试通过的,环境Silverlight4+VS2010企业版。
2. 功能概述
Silverlight控件一览表
序号 |
控件名 |
主要作用 |
提供一个图形 UI以供用户选择日期。它一次显示一个月份中的日期,并且还允许用户从一个月份滚动到另一个月份或切换到年视图。 |
||
提供一个图面用于在画布的特定坐标处显示子元素。一个画布可包含一个或多个UIElement对象。有关更多信息,请参见Silverlight布局系统。 |
||
使用户能够选择(选中)或清除(取消选中)某个选项。CheckBox可以具有三种状态:选中、取消选中和不确定。使用CheckBox可以为用户提供一个选项(例如"真/假"或"是/否"),也可以使用户从选项列表中进行选择。CheckBox是一个@L_673_37@。 |
||
@L_673_37@ |
||
10. |
提供一种灵活的方式来以行和列的形式显示数据集合。内置列类型包括文本框列、复选框列和用于承载自定义内容的模板列。内置行类型包括一个下拉详细信息部分,可用于在单元格值下方显示其他内容。 |
|
11. |
提供一个用户界面,以便对实现IPagedCollectionView的数据集合进行分页。 |
|
12. |
||
13. |
||
14. |
||
15. |
提供一个由行和列组成的图面来显示子元素。定义Grid的行和列之后,可以向网格中的特定行或列指派对象。可以选择显示网格线。有关更多信息,请参见Silverlight布局系统。 |
|
16. |
使用户能够在Grid控件的行或列之间重新分配空间。它表示一种用户可以"抓取"和拖动的图形元素。GridSplitter分配间隔时采用的方向和方式由管理其对齐方式的附加属性以及Grid的行或列属性决定。 |
|
17. |
||
18. |
表示显示超链接的按钮控件。单击后,HyperlinkButton使用户能够访问同一 Web 应用程序中的网页或当前应用程序外部的网页。 |
|
19. |
显示 PNG或 JPEG格式的图像。Image控件可显示具有 1位、4 位或 8位颜色深度的索引图像,或者具有 24位或 32 位颜色深度的真彩色图像。 |
|
20. |
提供一个绘图图面以支持 Tablet PC功能。InkPresenter派生自画布,可显示一个或多个UIElement对象和笔画。 |
|
21. |
||
22. |
包含一个项集合。可通过将该控件绑定到数据源或通过显示未绑定的项来填充该控件。列表框是一个项控件,这意味着您可以使用包含文本或其他控件的项来填充它。 |
|
23. |
承载音频或视频内容。MediaElement控件提供了一个可在其图面上显示视频(如果不存在视频,则播放音频)的矩形区域。 |
|
24. |
使用户能够打开多分辨率图像,可缩放和重新定位该多分辨率图像以进行更详细的查看。MultiScaleImage用于Deep Zoom技术。 |
|
25. |
||
26. |
||
27. |
||
28. |
在现有内容之上覆盖内容。Popup控件可用于临时显示完成特定任务所需的信息。弹出控件将始终显示在现有内容之上,但如果它上面打开了另一个弹出控件,则前述说法不成立。 |
|
29. |
指示操作进度。可以使用此控件来显示一般进度或根据值而改变的进度。 |
|
30. |
使用户可以从一组选项中选择一个选项。可以通过将RadioButton控件放到父控件内或者将每个RadioButton的GroupName属性设置为特定的组来对 RadioButton 进行分组。分组后,各个RadioButton控件之间是互斥的。 |
|
31. |
表示从被按下到松开之前重复引发其单击事件的按钮。RepeatButton控件包含用于指定单击重复之前的延迟以及两次单击之间的间隔的属性。 |
|
32. |
||
33. |
||
34. |
提供一个滚动条,该滚动条具有一个可滑动的Thumb,其位置对应于某个值。ScrollBar控件的方向可以是水平的,也可以是垂直的。 |
|
35. |
封装一段内容,并提供最多两个ScrollBar控件来滚动内容视区。ScrollViewer控件使您能够设置视区相对于内容的大小,以及设置是否显示水平和垂直ScrollBar控件。 |
|
36. |
||
37. |
提供一个图面来沿水平或垂直线显示子元素。有关更多信息,请参见Silverlight布局系统。 |
|
38. |
||
39. |
@L_17_197@ |
显示少量文本内容。可以使用Text属性来设置@L_17_197@的内容。或者,也可以将Inlines属性设置为一个Inline对象集合,例如Run或LineBreak对象。 |
40. |
用于获取用户输入,也可用于显示文本。文本框控件通常用于可编辑文本,但也可以设置为只读。文本框可以显示多个行,并且可以根据控件的大小自动换行。 |
|
41. |
使用弹出窗口为用户提供有关 UI中某个元素的信息。 |
|
42. |
@L_197_218@ |
|
43. |
||
44. |
||
45. |
提供用于排列屏幕中可见内容的堆叠面板控件,可根据需要创建其他 UI项。 |
|
46. |
3. 控件主要属性介绍
1.1. AutoCompleteBox
1.1.
用法1:
<sdk:AutoCompleteBox Name="autoCompleteBox1" Width="200"/>
List<String> lst =newList<String>();
lst.Add("张飞");
lst.Add("张龙");
this.autoCompleteBox1.Itemssource = lst;
用法2:
<sdk:AutoCompleteBox Height="28"HorizontalAlignment="Left" Margin="42,35,0" Name="autoCompleteBox1" VerticalAlignment="Top" Width="242"ValueMemberPath="UserName" Itemssource="{Binding}">
<sdk:AutoCompleteBox.ItemTemplate>
<TextBlock Text="{Binding Path=UserNamE}"/>
</sdk:AutoCompleteBox.ItemTemplate>
</sdk:AutoCompleteBox>
List<UserModel>lst =newList<UserModel>();
lst.Add(new UserModel(){ UserID = "01",UserName = "zhangsan" });
lst.Add(new UserModel(){ UserID = "02",UserName = "张三" });
lst.Add(new UserModel(){ UserID = "03",UserName = "张飞" });
lst.Add(new UserModel(){ UserID = "04",UserName = "张龙" });
lst.Add(new UserModel(){ UserID = "05",UserName = "李四" });
lst.Add(new UserModel(){ UserID = "06",UserName = "王五" });
lst.Add(new UserModel(){ UserID = "07",UserName = "马六" });
this.autoCompleteBox1.DataContext = lst;
1.2.
用法1:
@H_78_1972@<!--Border@H_78_1972@用法
@H_78_1972@ BorderThickness - @H_78_1972@ 边框的宽度(像素值:上下左右;左右@H_78_1972@,@H_78_1972@上下;左@H_78_1972@,@H_78_1972@上@H_78_1972@,@H_78_1972@右@H_78_1972@,@H_78_1972@下)
@H_78_1972@ BorderBrush - @H_78_1972@ 边框的颜色
@H_78_1972@ CornerRadius - @H_78_1972@ 边框角的半径
@H_78_1972@ -->
<Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Height="100" HorizontalAlignment="Left" Margin="203,70,0" Name="border1" VerticalAlignment="Top" Width="130">
<TextBlock Text="边框为红色" Height="84" Width="100"/>
用法2:
@H_78_1972@<!--Border.borderBrush@H_78_1972@画刷的应用@H_78_1972@-->
<Border x:Name="bd2" BorderThickness="1,7" CornerRadius="10" Height="81" HorizontalAlignment="Left" Margin="6,68,0" VerticalAlignment="Top" Width="191">
<Border.borderBrush >
</Border.borderBrush>
1.3. Button
1.3.
@H_78_1972@<!--Content -@H_78_1972@按钮上显示的内容
@H_78_1972@ Click - @H_78_1972@ 按钮的单击事件
@H_78_1972@ cursor - @H_78_1972@ 鼠标移动到按钮上面时,鼠标指针的样式
@H_78_1972@ Arrow - @H_78_1972@ 箭头
@H_78_1972@ Hand - @H_78_1972@ 手形
@H_78_1972@ Wait - @H_78_1972@ 沙漏
@H_78_1972@ IBeam - “I”@H_78_1972@字形
@H_78_1972@ Stylus - @H_78_1972@ 点
@H_78_1972@ Eraser - @H_78_1972@ 橡皮
@H_78_1972@ None - @H_78_1972@ 无
@H_78_1972@ Padding - @H_78_1972@ 容器内的内容与容器边缘的填充距离(像素值:上下左右;左右@H_78_1972@,@H_78_1972@下)
@H_78_1972@ IsEnabled - @H_78_1972@ 按钮是否有效
@H_78_1972@ Button.Content - @H_78_1972@ 按钮上显示的内容
@H_78_1972@ Clickmode - @H_78_1972@ 触发单击事件的类型@H_78_1972@[System.Windows.Controls.Clickmode@H_78_1972@枚举@H_78_1972@]
@H_78_1972@ Clickmode.Press - @H_78_1972@ 鼠标左键单击
@H_78_1972@ Clickmode.Release - @H_78_1972@ 鼠标左键单击并放开
@H_78_1972@ Clickmode.Hover - @H_78_1972@ 鼠标经过@H_78_1972@-->
<Button Content="按钮测试" cursor="Hand" Clickmode="Press" Height="23" Name="button1" Width="75" Click="button1_Click"/>
private voidbutton1_Click(object sender, RoutedEventArgs E)
1.4.
@H_78_1972@<!--SELEctedDatesChanged-@H_78_1972@选中日期后所触发的事件
@H_78_1972@ DisplayDateEnd - @H_78_1972@ 此日期之后的日期不予显示
@H_78_1972@ DisplayDateStart - @H_78_1972@ 此日期之前的日期不予显示
@H_78_1972@ FirstDayOfWeek - @H_78_1972@ 控件所显示的每星期的第一天为星期几@H_78_1972@[System.DayOfWeek@H_78_1972@枚举@H_78_1972@]
@H_78_1972@ Displaymode - @H_78_1972@ 控件的显示模式@H_78_1972@[System.Windows.Controls.Displaymode@H_78_1972@枚举@H_78_1972@]
@H_78_1972@ Displaymode.Month -@H_78_1972@标题显示年月,内容显示日期。默认值
@H_78_1972@ Displaymode.Year -@H_78_1972@标题显示年,内容显示月
@H_78_1972@ Displaymode.Decade -@H_78_1972@标题显示一个十年的区间,内容显示年
@H_78_1972@ IsTodayHighlighted - @H_78_1972@ 是否高亮显示今天的日期
@H_78_1972@ Calendar.SELEctedDate - @H_78_1972@ 选中的日期
@H_78_1972@ Calendar.SELEctedDates - @H_78_1972@ 选中的多个日期集合
@H_78_1972@ Calendar.blackoutDates - @H_78_1972@ 不允许选择的日期集合
@H_78_1972@ Calendar.blackoutDates.AddDatesInPast()-@H_78_1972@禁止选择今天之前的日期
@H_78_1972@ Calendar.blackoutDates.Clear() -@H_78_1972@清除@H_78_1972@不允许选择的日期集合@H_78_1972@的设置
@H_78_1972@ CalendarSELEctionMode.None -@H_78_1972@禁止选择日期
@H_78_1972@ CalendarSELEctionMode.SingleRange-@H_78_1972@可以选择多个日期,连续日期(@H_78_1972@Shift@H_78_1972@键配合)
@H_78_1972@ alendarSELEctionMode.MultipleRange-@H_78_1972@可以选择多个日期,任意日期(@H_78_1972@Ctrl@H_78_1972@键配合)
@H_78_1972@ CalendarSELEctionMode.SingleDate -@H_78_1972@只能选择一个日期@H_78_1972@-->
<sdk:Calendar Name="calendar1"Displaymode="Month"IsTodayHighlighted="false" SELEctionMode="SingleDate" Height="169" Width="230" SELEctedDatesChanged="calendar1_SELEctedDatesChanged"/>
1.5.
<Canvas Name="canvas1" Height="150" Width="250" BACkground="Blue">
<Rectangle Canvas.Top ="30" Canvas.Left="30" Fill="Red" Height="30" Width="50"></Rectangle>
</Canvas>
1.6.
@H_78_1972@<!--Ischecked -@H_78_1972@是否被选中
@H_78_1972@ IsThreeState - @H_78_1972@ 是否是@H_78_1972@有@H_78_1972@3@H_78_1972@个状态@H_78_1972@的@H_78_1972@checkBox
@H_78_1972@ false - @H_78_1972@ 通常的两状态。默认值
@H_78_1972@ true - @H_78_1972@ 有@H_78_1972@3@H_78_1972@个状态,分别为:@H_78_1972@true,false,null@H_78_1972@。也就是说@H_78_1972@ checkBox.Ischecked@H_78_1972@是@H_78_1972@ bool? @H_78_1972@类型
@H_78_1972@ IsEnabled - checkBox@H_78_1972@是否有效
@H_78_1972@ checkBox.Content - checkBox@H_78_1972@所对应的内容
@H_78_1972@ checked - @H_78_1972@ 被选中后所触发的事件
@H_78_1972@ Unchecked - @H_78_1972@ 被取消选中后所触发的事件
@H_78_1972@ Click - @H_78_1972@ 被单击后所触发的事件@H_78_1972@-->
<checkBox Content="是否保存" Ischecked="{x:Null}" ></checkBox>
显示子窗体
ChildWindow1 clw = newChildWindow1();
clw.Show();
1.8. ComboBox
<ComboBox DisplaymemberPath="UserName" Height="23" HorizontalAlignment="Left" Margin="100,41,0" Name="comboBox1" VerticalAlignment="Top" Width="120" >
List<UserModel> lst =newList<UserModel>();
lst.Add(new UserModel(){ UserID = "01",UserName = "马六" });
this.comboBox1.Itemssource = lst;
1.9.
<Style x:Name="ContentCtrl" TargetType="ContentControl">
<Setter Property="BACkground" Value="Red"/>
<Setter Property="Foreground" Value="Green"/>
<Setter Property="FontSize" Value="20"/>
<Setter Property="FontWeight" Value="Bold"/>
<ControlTemplate TargetType="ContentControl">
@H_78_1972@<!--Keep the Ellipse a circle whenContentControl.Width
@H_78_1972@ is set.-->
<Ellipse Width="{TemplateBinding Width}"
Height="{TemplateBinding Width}"
Fill="{TemplateBinding BACkground}"/>
<ContentPresenter VerticalAlignment="Center"
HorizontalAlignment="Center"/>
<Grid x:Name="LayoutRoot">
<ContentControl Width="75" Style="{Staticresource ContentCtrl}"
Content="Hello"/>
<ContentControl Height="154" HorizontalAlignment="Left" Margin="94,195,0" Name="contentControl1" VerticalAlignment="Top" Width="100" Style="{Staticresource ContentCtrl}" />
</Grid>
1.10. DataGrid
<sdk:DataGrid AutoGeneratecolumns="false" Height="342" HorizontalAlignment="Left" Margin="62,53,0" Name="dataGrid1" VerticalAlignment="Top" Width="453" Itemssource ="{Binding}">
<sdk:DataGrid.columns>
<sdk:DataGridTextcolumn Header="编号" Binding ="{Binding UserID}" CanUserReorder="True"CanUserResize="True"CanUserSort="True" Width="Auto" />
<sdk:DataGridTemplatecolumn Header="姓名" CanUserReorder="True" CanUserResize="True" CanUserSort="True" Width="Auto" >
<sdk:DataGridTemplatecolumn.CellTemplate>
<TextBlock Text="{Binding UserName}"></TextBlock>
</sdk:DataGridTemplatecolumn.CellTemplate>
<sdk:DataGridTemplatecolumn.CellEdiTingTemplate >
<TextBox Text="{Binding UserName,@H_76_1588@mode=TwoWay}"></TextBox>
</sdk:DataGridTemplatecolumn.CellEdiTingTemplate>
</sdk:DataGridTemplatecolumn>
</sdk:DataGrid.columns>
</Grid>
List<UserModel>lst =newList<UserModel>();
lst.Add(new UserModel(){ UserID = "01",UserName = "马六" });
this.dataGrid1.Itemssource = lst;
1.11. DataPager
1.11.
<sdk:DataPager Height="26" HorizontalAlignment="Left" Margin="62,401,0" Name="dataPager1" PageSize="10" VerticalAlignment="Top" Width="200"/>
List<UserModel> lst =newList<UserModel>();
lst.Add(new UserModel(){ UserID = "01" + i.ToString(),UserName ="张三" + i.ToString() });
PagedCollectionView itemListView =newPagedCollectionView(lst);
//this.dataGrid1.Itemssource = itemListView;
dataPager1.source = itemListView;
1.12. DatePicker
@H_78_1972@<!--
@H_78_1972@ TextBox @H_78_1972@ 结合 Calendar,经典的选择日期的方式
@H_78_1972@ SELEctedDateFormat - @H_78_1972@ 被选中的日期的显示格式[System.Windows.Controls.DatePickerFormat枚举]
@H_78_1972@ SELEctedDateFormat.Short -@H_78_1972@简短格式。默认值。如2008-10-10
@H_78_1972@ SELEctedDateFormat.Long -@H_78_1972@非简短格式。如2008年10月10日
@H_78_1972@ -->
<sdk:DatePicker SELEctedDateFormat="Long" Height="23" HorizontalAlignment="Left" Margin="177,113,0" Name="datePicker1" VerticalAlignment="Top" Width="120" />
1.13. Ellipse
@H_78_1972@<!--
@H_78_1972@ Width - @H_78_1972@ 椭圆的宽
@H_78_1972@ Height - @H_78_1972@ 椭圆的高
@H_78_1972@ stroke - @H_78_1972@ 边框
@H_78_1972@ strokeThickness - @H_78_1972@ 边框尺寸
@H_78_1972@ Fill - @H_78_1972@ 填充
@H_78_1972@ -->
<Ellipse Height="100" Width="200" stroke="Blue" Fill="Red" strokeThickness="3" HorizontalAlignment="Left" Margin="175,167,0" Name="ellipse1" VerticalAlignment="Top" />
1.14. Frame
<navigation:Frame source="Page1.xaml" Height="268" HorizontalAlignment="Left" Margin="66,38,0" Name="frame1" VerticalAlignment="Top" Width="496"/>
1.15. Grid
<Grid>
<columnDeFinition Width="175*" />
<columnDeFinition Width="145*" />
<columnDeFinition Width="160*" />
<columnDeFinition Width="160*" />
<Grid.RowDeFinitions >
<RowDeFinition ></RowDeFinition>
<RowDeFinition ></RowDeFinition>
<RowDeFinition ></RowDeFinition>
<RowDeFinition ></RowDeFinition>
<RowDeFinition ></RowDeFinition>
<RowDeFinition ></RowDeFinition>
</Grid.RowDeFinitions>
1.16. GridSplitter
<Grid>
<columnDeFinition Width="175*" />
<columnDeFinition Width="145*" />
<columnDeFinition Width="160*" />
<columnDeFinition Width="160*" />
<sdk:GridSplitter Grid.column ="1" BACkground="Blue" Width="5"
HorizontalAlignment="Right"VerticalAlignment="Stretch"/>
</Grid>
1.17. HeaderedItemsControl
1.18. HyperlinkButton
@H_78_1972@NavigateUri -@H_78_1972@超级链接的目标地址
@H_78_1972@ TargetName - @H_78_1972@ 目标名
@H_78_1972@ HyperlinkButton.Content - @H_78_1972@ 超级链接所显示的内容
1.19. Image
<!--
<Image source="/logo.jpg" Margin="5" Width="100" />
资源型文件 - [/程序集名;component/路径]
<Image source="/Silverlight20;component/Images/logo.jpg" Margin="5" Width="200" />
<Image source="http://silverlight.net/Themes/silverlight/images/logo.jpg" Margin="5" Width="100" />
1.20. InkPresenter
<InkPresenter Name="InkPresenter1" Margin="78,84,170,140" BACkground="Blue"></InkPresenter>
StylusPoint segment1Start = new StylusPoint(200,110);
StylusPoint segment1End =newStylusPoint(185,150);
StylusPoint segment2Start =newStylusPoint(185,150);
StylusPoint segment2End =newStylusPoint(135,150);
StylusPoint segment3Start =newStylusPoint(135,150);
StylusPoint segment3End =newStylusPoint(175,180);
StylusPoint segment4Start =newStylusPoint(175,180);
StylusPoint segment4End =newStylusPoint(160,220);
StylusPoint segment5Start =newStylusPoint(160,220);
StylusPoint segment5End =newStylusPoint(200,195);
StylusPoint segment6Start =newStylusPoint(200,195);
StylusPoint segment6End =newStylusPoint(240,220);
StylusPoint segment7Start =newStylusPoint(240,220);
StylusPoint segment7End =newStylusPoint(225,180);
StylusPoint segment8Start =newStylusPoint(225,180);
StylusPoint segment8End =newStylusPoint(265,150);
StylusPoint segment9Start =newStylusPoint(265,150);
StylusPoint segment9End =newStylusPoint(215,150);
StylusPoint segment10Start =newStylusPoint(215,150);
StylusPoint segment10End =newStylusPoint(200,110);
StylusPointCollection strokePoints =newStylusPointCollection();
strokePoints.Add(segment1Start);
strokePoints.Add(segment1End);
strokePoints.Add(segment2Start);
strokePoints.Add(segment2End);
strokePoints.Add(segment3Start);
strokePoints.Add(segment3End);
strokePoints.Add(segment4Start);
strokePoints.Add(segment4End);
strokePoints.Add(segment5Start);
strokePoints.Add(segment5End);
strokePoints.Add(segment6Start);
strokePoints.Add(segment6End);
strokePoints.Add(segment7Start);
strokePoints.Add(segment7End);
strokePoints.Add(segment8Start);
strokePoints.Add(segment8End);
strokePoints.Add(segment9Start);
strokePoints.Add(segment9End);
strokePoints.Add(segment10Start);
strokePoints.Add(segment10End);
以上是大佬教程为你收集整理的Silverlight之控件应用总结(一)(3)全部内容,希望文章能够帮你解决Silverlight之控件应用总结(一)(3)所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。