[置顶] Silverlight之控件应用总结（一）（3）

[置顶] Silverlight之控件应用总结（一）（3）

Silverlight之控件应用总结（一）

代码都是测试通过的，环境Silverlight4+VS2010企业版。

1.        控件总览

2.        功能概述

Silverlight控件一览表

3.        控件主要属性介绍

1.1.       AutoCompleteBox

1.1.

用法1:

前台代码:

<sdk:AutoCompleteBox Name="autoCompleteBox1" Width="200"/>

后台代码:

List<string> lst =newList<string>();

lst.Add("张三");

lst.Add("张飞");

lst.Add("张龙");

lst.Add("李四");

lst.Add("王五");

this.autoCompleteBox1.ItemsSource = lst;

用法2:

前台代码:

<sdk:AutoCompleteBox Height="28"HorizontalAlignment="Left" Margin="42,35,0,0"Name="autoCompleteBox1"VerticalAlignment="Top" Width="242"ValueMemberPath="UserName" ItemsSource="{Binding}">

<sdk:AutoCompleteBox.ItemTemplate>

<DataTemplate>

<StackPanel>

<TextBlock Text="{Binding Path=UserName}"/>

</StackPanel>

</DataTemplate>

</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.       Border

1.2.

用法1:

<!--Border用法

BorderThickness - 边框的宽度（像素值：上下左右；左右,上下；左,上,右,下）

BorderBrush - 边框的颜色

CornerRadius - 边框角的半径

-->

<Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Height="100"HorizontalAlignment="Left" Margin="203,70,0,0" Name="border1" VerticalAlignment="Top" Width="130">

<TextBlock Text="边框为红色" Height="84" Width="100"/>

</Border>

用法2:

<!--Border.BorderBrush画刷的应用-->

<Border x:Name="bd2" BorderThickness="1,3,5,7" CornerRadius="10" Height="81"HorizontalAlignment="Left" Margin="6,68,0,0" VerticalAlignment="Top" Width="191">

<Border.BorderBrush >

blue

</Border.BorderBrush>

</Border>

1.3. Button

1.3.

前台代码：

<!--Content -按钮上显示的内容

Click - 按钮的单击事件

Cursor - 鼠标移动到按钮上面时，鼠标指针的样式

Arrow - 箭头

Hand - 手形

Wait - 沙漏

IBeam - “I”字形

Stylus - 点

Eraser - 橡皮

None - 无

Padding - 容器内的内容与容器边缘的填充距离（像素值：上下左右；左右,上下；左,上,右,下）

IsEnabled - 按钮是否有效

Button.Content - 按钮上显示的内容

ClickMode - 触发单击事件的类型[System.Windows.Controls.ClickMode枚举]

ClickMode.Press - 鼠标左键单击

ClickMode.Release - 鼠标左键单击并放开

ClickMode.Hover - 鼠标经过-->

<Button Content="按钮测试" Cursor="Hand" ClickMode="Press" Height="23" Name="button1"Width="75" Click="button1_Click"/>

后台代码：

private voidbutton1_Click(object sender, RoutedEventArgs e)

{

MessageBox.Show("测试！");

}

1.4.       Calendar

1.4.

前台代码：

<!--SelectedDatesChanged-选中日期后所触发的事件

DisplayDateEnd - 此日期之后的日期不予显示

DisplayDateStart - 此日期之前的日期不予显示

FirstDayOfWeek - 控件所显示的每星期的第一天为星期几[System.DayOfWeek枚举]

DisplayMode - 控件的显示模式[System.Windows.Controls.DisplayMode枚举]

DisplayMode.Month -标题显示年月，内容显示日期。默认值

DisplayMode.Year -标题显示年，内容显示月

DisplayMode.Decade -标题显示一个十年的区间，内容显示年

IsTodayHighlighted - 是否高亮显示今天的日期

Calendar.SelectedDate - 选中的日期

Calendar.SelectedDates - 选中的多个日期集合

Calendar.BlackoutDates - 不允许选择的日期集合

Calendar.BlackoutDates.AddDatesInPast()-禁止选择今天之前的日期

Calendar.BlackoutDates.Clear() -清除不允许选择的日期集合的设置

SelectionMode

CalendarSelectionMode.None -禁止选择日期

CalendarSelectionMode.SingleRange-可以选择多个日期，连续日期（Shift键配合）

alendarSelectionMode.MultipleRange-可以选择多个日期，任意日期（Ctrl键配合）

CalendarSelectionMode.SingleDate -只能选择一个日期-->

<sdk:CalendarName="calendar1"DisplayMode="Month"IsTodayHighlighted="False"  SelectionMode="SingleDate" Height="169" Width="230"SelectedDatesChanged="calendar1_SelectedDatesChanged"/>

1.5.       Canvas

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.       CheckBox

1.6.

<!--IsChecked -是否被选中

IsThreeState - 是否是有3个状态的CheckBox

false - 通常的两状态。默认值

true - 有3个状态，分别为：true, false,null。也就是说 CheckBox.IsChecked是 bool? 类型

IsEnabled - CheckBox是否有效

CheckBox.Content - CheckBox所对应的内容

Checked - 被选中后所触发的事件

Unchecked - 被取消选中后所触发的事件

Click - 被单击后所触发的事件-->

<CheckBox Content="是否保存" IsChecked="{x:Null}" ></CheckBox>

1.7.       ChildWindow

显示子窗体

ChildWindow1 clw = newChildWindow1();

clw.Show();

1.8.       ComboBox

前台代码：

<ComboBox DisplayMemberPath="UserName" Height="23" HorizontalAlignment="Left" Margin="100,41,0,0"Name="comboBox1" VerticalAlignment="Top" Width="120"  >

后台代码：

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.comboBox1.ItemsSource = lst;

1.9.       ContentControl

1.9.

前台代码：

<UserControl.Resources>

<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"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ContentControl">

<Grid>

<!--Keep the Ellipse a circle whenContentControl.Width

is set.-->

<Ellipse Width="{TemplateBinding Width}"

Height="{TemplateBinding Width}"

Fill="{TemplateBinding Background}"/>

<ContentPresenter VerticalAlignment="Center"

HorizontalAlignment="Center"/>

</Grid>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot">

<ContentControl Width="75" Style="{StaticResource ContentCtrl}"

Content="Hello"/>

<ContentControl Height="154" HorizontalAlignment="Left" Margin="94,195,0,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,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>

<DataTemplate >

<TextBlock Text="{Binding UserName}"></TextBlock>

</DataTemplate>

</sdk:DataGridTemplateColumn.CellTemplate>

<sdk:DataGridTemplateColumn.CellEditingTemplate >

<DataTemplate >

<TextBox Text="{Binding UserName,Mode=TwoWay}"></TextBox>

</DataTemplate>

</sdk:DataGridTemplateColumn.CellEditingTemplate>

</sdk:DataGridTemplateColumn>

</sdk:DataGrid.Columns>

</sdk:DataGrid>

</Grid>

后台代码：

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.dataGrid1.ItemsSource  = lst;

1.11.    DataPager

1.11.

前台代码：

<sdk:DataPager Height="26" HorizontalAlignment="Left" Margin="62,401,0,0" Name="dataPager1"PageSize="10" VerticalAlignment="Top" Width="200"/>

后台代码：

List<UserModel> lst =newList<UserModel>();

for (int i = 0; i< 100; i++)

{

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

1.12.前台代码：

<!--

TextBox 结合 Calendar，经典的选择日期的方式

SelectedDateFormat - 被选中的日期的显示格式[System.Windows.Controls.DatePickerFormat枚举]

SelectedDateFormat.Short -简短格式。默认值。如2008-10-10

SelectedDateFormat.Long -非简短格式。如2008年10月10日

-->

<sdk:DatePicker SelectedDateFormat="Long"  Height="23" HorizontalAlignment="Left" Margin="177,113,0,0"Name="datePicker1" VerticalAlignment="Top" Width="120" />

1.13.    Ellipse

<!--

Width - 椭圆的宽

Height - 椭圆的高

Stroke - 边框

StrokeThickness - 边框尺寸

Fill - 填充

-->

<Ellipse Height="100" Width="200" Stroke="Blue"Fill="Red" StrokeThickness="3" HorizontalAlignment="Left" Margin="175,167,0,0"Name="ellipse1" VerticalAlignment="Top" />

1.14.    Frame

前台代码：

<navigation:Frame Source="Page1.xaml" Height="268" HorizontalAlignment="Left" Margin="66,38,0,0"Name="frame1" VerticalAlignment="Top" Width="496"/>

1.15.    Grid

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="175*" />

<ColumnDefinition Width="145*" />

<ColumnDefinition Width="160*" />

<ColumnDefinition Width="160*" />

</Grid.ColumnDefinitions>

<Grid.RowDefinitions >

<RowDefinition ></RowDefinition>

<RowDefinition ></RowDefinition>

<RowDefinition ></RowDefinition>

<RowDefinition ></RowDefinition>

<RowDefinition ></RowDefinition>

<RowDefinition ></RowDefinition>

</Grid.RowDefinitions>

</Grid>

1.16.    GridSplitter

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="175*" />

<ColumnDefinition Width="145*" />

<ColumnDefinition Width="160*" />

<ColumnDefinition Width="160*" />

</Grid.ColumnDefinitions>

<sdk:GridSplitter Grid.Column ="1" Background="Blue" Width="5"

HorizontalAlignment="Right"VerticalAlignment="Stretch"/>

</Grid>

1.17.    HeaderedItemsControl

1.18.    HyperlinkButton

NavigateUri -超级链接的目标地址

TargetName - 目标名

HyperlinkButton.Content - 超级链接所显示的内容

1.19.    Image

<!--

Source - 程序目录下的图片文件地址

-->

<Image Source="/Logo.jpg" Margin="5" Width="100" />

<!--

Source - 程序集内的图片文件地址

资源型文件 - [/程序集名;component/路径]

内容型文件 - [/路径]

-->

<Image Source="/Silverlight20;component/Images/Logo.jpg" Margin="5" Width="200" />

<!--

Source - 互联网的图片文件地址

-->

<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);

Stroke newStroke =newStroke(strokePoints);

this.InkPresenter1.Strokes.Add(newStroke);

@原文引用：http://blog.csdn.net/zhaoyu_1979/article/details/7422324