silverlight中常用的控件

一、布局控件

Canvas面板是一种很基础的布局面板,它支持对其中的控件采用绝对坐标定位。Canvas.Top和Canvas.Left。Canvas.ZIndex附加属性:如果指定了两个控件相对于父容器Canvas同样的边距,则后面声明的控件父覆盖前面声明的控件。这时我们可以使用Canvas.ZIndex属性来改变它们的显示顺序。

StackPanel是一种简单的布局面板,它支持用行或列的方式来定位其中包含的控件。StackPanel 常用于安排页面上的一个很小的 UI 部分。默认情况下,Orientation 属性为Vertical,     即默认情况下所有的子元素会垂直的排列显示。

Orientation -StackPanel控件内对象的排列方向

Horizontal- 水平排列

Vertical - 垂直排列

Grid 控件是最灵活的布局面板,它支持用多行和多列的方式排布控件。在<Grid> 标签内,通过<Grid.RowDefinitions> 和<Grid.ColumnDefinitions> 属性来定义Grid 的行和列,使用Grid.Row和Grid.Column两个附加属性指定子元素在Grid中显示的位置。ShowGridLines属性设为True,能够显示出边框线。Grid.RowSpan获取或设置一个值,该值指示对Grid的行进行合并的总行数。

Grid - 表格式布局模式

Grid.RowDefinitions - 用于定义 Grid 中的行

Grid.ColumnDefinitions - 用于定义 Grid 中的列

Grid.ShowGridLines- 显示网格

Grid.Row - 控件所在的 Grid 的行的索引

Grid.Column - 控件所在的 Grid 的列的索引

Grid.RowSpan - 合并行。 控件所在行,以及控件所在行之后的需要连续合并的行的总行数

Grid.ColumnSpan- 合并列。 控件所在列,以及控件所在列之后的需要连续合并的列的总列数

Width - 宽度

MinWidth - 最小宽度

MaxWidth - 最大宽度

Height - 高度

MinHeight - 最小高度

MaxHeight - 最大高度

Width 和 Height 的可用值

Auto - 自动设置为一个合适的值。默认值

Pixel - 像素值

* - 比例值。如 * 就是全部,2* & 8* 就是分别占20%和80%

二、<Border> 控件

设置其CornerRadius 为 10,以得到圆角效果,并在其中添加一些文本来创建标题。

<!--

BorderThickness- 边框的宽度(像素值:上下左右;左右,上下;左,上,右,下)

BorderBrush - 边框的颜色

CornerRadius - 边框角的半径

-->

<Border BorderThickness="1,3,5,7" BorderBrush="Red" CornerRadius="10" Width="120" Margin="5">

<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" />

</Border>

<!--

Border.BorderBrush - 继承自 System.Windows.Media.Brush 的对象

-->

<Border BorderThickness="3" CornerRadius="10" Width="120" Margin="5">

<TextBlock Text="红色Border" ToolTipService.ToolTip="红色Border" TextAlignment="Center" />

<Border.BorderBrush>

<ImageBrush ImageSource="http://silverlight.net/Themes/silverlight/images/logo.jpg"/>

</Border.BorderBrush>

</Border>

三、<WatermarkedTextBox> 控件 <显示其他控件时>

水印效果文本框,可以在文本框未获得焦点之前显示一段文字提示信息,也可以显示其它的控件。

<local:WatermarkedTextBoxCanvas.Top="140" Canvas.Left="50" Width="300"Height="50" >

<local:WatermarkedTextBox.Watermark>

<ImageSource="/admin.jpg" HorizontalAlignment="Left"></Image>

</local:WatermarkedTextBox.Watermark>

</local:WatermarkedTextBox>

注意:admin.jpg存放在ClientBin目录下(blend5中没有此控件)

 

四、ToggleButton控件 

Content -ToggleButton上显示的内容

Click -ToggleButton的单击事件

Cursor - 鼠标移动到ToggleButton上面时,鼠标指针的样式

Arrow - 箭头

Hand - 手形

Wait - 沙漏

IBeam - “I”字形

Stylus - 点

Eraser - 橡皮

None - 无

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

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

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

Checked -ToggleButton的IsChecked变为true时所触发的事件

Unchecked -ToggleButton的IsChecked变为false时所触发的事件

Indeterminate -ToggleButton的IsChecked变为null时所触发的事件

IsEnabled - ToggleButton是否有效

ToggleButton.Content - ToggleButton上显示的内容

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

ClickMode.Press- 鼠标左键单击

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

ClickMode.Hover - 鼠标经过

五、ScrollViewer控件

当其中显示的内容超过它自身的大小时,就会有滚动条出现。通过属性HorizontalScrollBarVisibility和VerticalScrollBarVisibility来控制纵向和横向滚动条是否出现。

<!--

ScrollViewer.Content- ScrollViewer控件中的内容

HorizontalScrollBarVisibility - 水平滚动条的显示状态

VerticalScrollBarVisibility - 垂直滚动条的显示状态

Auto - 自动根据ScrollViewer的宽和高,以及内容的宽和高,来决定是否显示滚动条

Disabled - 不显示,但是可以通过键盘或鼠标在显示内容中的移动或拖动操作,来看到被遮挡的内容

Hidden - 不显示,而且无法看到被遮挡的内容

Visible - 显示滚动条

-->

<ScrollViewer Margin="5" Width="200" Height="200" HorizontalAlignment="Left"HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

<ScrollViewer.Content>

<Image Source="/Silverlight20;component/Images/Logo.jpg" Width="300" />

</ScrollViewer.Content>

</ScrollViewer>

<ScrollViewer Margin="5" Width="100" Height="100" HorizontalAlignment="Left"HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">

<TextBox>

<TextBox.Text>

aaa

bbb

ccc

ddd

</TextBox.Text>

</TextBox>

</ScrollViewer>


六、TextBlock控件

属性TextWrapping设置为Wrap,表示自动换行。

<!--

Text -TextBlock上显示的值

-->

<TextBlock Text="TextBlock" />

<!--

Foreground - 字体颜色

-->

<TextBlock Text="红色的TextBlock" Foreground="Red" />

<!--

要以XAML的方式直接显示引号等特殊字请使用相应的HTML编码

-->

<TextBlock Text="带引号的&quot;TextBlock&quot;"/>

<!--

FontFamily - 字体

FontSize - 字体大小

FontWeight - 字形粗细度[System.Windows.FontWeights枚举]

FontStyle - 字形斜体否[System.Windows.FontStyles枚举]

TextDecorations- 字体下划线 [System.Windows.TextDecorations枚举]

FontStretch - 字体间距[System.Windows.FontStretches枚举]

-->

<TextBlock Text="常用属性TextBlock" FontFamily="宋体" FontSize="36" FontWeight="Bold"FontStyle="Italic" TextDecorations="Underline" FontStretch="Normal" />

<!--

TextAlignment -文字排列[System.Windows.TextAlignment枚举]

Run - 文本内容

LineBreak - 换行符

LineHeight - 每行行高

TextWrapping - 文本限制(超过限制是否换行)

NoWrap - 永不换行

Wrap - 超过限制则换行

LineStackingStrategy - 控制行高的策略

MaxHeight -TextBlock内每行的行高 以LineHeight值 和 每行自身所设置的行高值 间的最大值为准

BlockLineHeight - TextBlock内每行的行高 以LineHeight值为准

-->

<TextBlock VerticalAlignment="Center" TextAlignment="Center" LineHeight="10"LineStackingStrategy="MaxHeight" Width="200" TextWrapping="NoWrap">

<Run FontSize="20" Foreground="Maroon" Text="MaroonMaroonMaroonMaroon"/>

<LineBreak/>

<Run Foreground="Teal" Text="Teal" />

<LineBreak/>

<Run FontSize="30" Foreground="SteelBlue" Text="SteelBlue" />

</TextBlock>

<TextBlock VerticalAlignment="Center" TextAlignment="Center" LineHeight="10"LineStackingStrategy="BlockLineHeight" Width="200" TextWrapping="Wrap">

<Run FontSize="20" Foreground="Red" Text="RedRedRedRedRedRedRedRedRed"/>

<LineBreak/>

<Run Foreground="Green" Text="Green" />

<LineBreak/>

<Run FontSize="30" Foreground="Blue" Text="Blue" />

</TextBlock>

ToolTip控件

ToolTip控件很多时候都用于其它控件的内嵌控件,如Button控件的ToolTip附加属性等。

注意: ToolTip控件用作内嵌控件时,应采用ToolTipService.ToolTip属性设置,如下

<Button x:Name="myButton" Content="TextTooltip" Canvas.Top="80" Canvas.Left="130" Width="240"Height="100" FontSize="20" Background="Red" ToolTipService.ToolTip="This is a summitbutton"/>

Rectangle

矩形显示框:Fill——颜色;Margin——边距;Stroke——边框颜色;StrokeThickness——边框厚度

<!--矩形-->

<!--

RadiusX - 边角圆弧的X轴半径

RadiusY - 边角圆弧的Y轴半径

-->

<Rectangle Width="200" Height="120" Stroke="Black" StrokeThickness="6" RadiusX="10" RadiusY="30" />

Slider  

<!--

Minimum -Slider控件的最小值。参见基类System.Windows.Controls.Primitives.RangeBase

Maximum -Slider控件的最大值。参见基类System.Windows.Controls.Primitives.RangeBase

Value - Slider控件的值。参见基类System.Windows.Controls.Primitives.RangeBase

SmallChange - 按上/下/左/右键的时候,Slider控件的Value值的变化跨度。参见基类System.Windows.Controls.Primitives.RangeBase

ValueChanged -Slider控件的值发生变化时所触发的事件

Orientation - 控件的放置方向

Horizontal- 水平放置

Vertical - 垂直放置

IsDirectionReversed - 滑块的初始位置

True - 上到下 或者 右到左

False - 下到上 或者 左到右

-->

<Slider Height="400" HorizontalAlignment="Left" Orientation="Vertical" IsDirectionReversed="True"Minimum="0" Maximum="50" SmallChange="5" ValueChanged="Slider_ValueChanged"  />

<TextBlock x:Name="lblMsg" HorizontalAlignment="Left" />

后台获值代码:

//RoutedPropertyChangedEventArgs<double>.OldValue - Slider控件的原值

//RoutedPropertyChangedEventArgs<double>.NewValue - Slider控件的新值

lblMsg.Text = string.Format("原值:{0}\r\n新值:{1}", e.OldValue.ToString(), e.NewValue.ToString());

TextBox 

<!--

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

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

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

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

-->

<basics:DatePicker Width="200" SelectedDateFormat="Short"></basics:DatePicker>

 

 

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

十二、Calendar控件  

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() - 清除 不允许选择的日期集合 的设置

//CalendarSelectionMode.None - 禁止选择日期

//CalendarSelectionMode.SingleRange - 可以选择多个日期,连续日期(Shift键配合)

//CalendarSelectionMode.MultipleRange - 可以选择多个日期,任意日期(Ctrl键配合)

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

Calendar控件的命名空间和其他控件一样,都是在System.Windows.Controls下。但是其是在System.Windows.Controls.dll程序集中定义的,所以要引入相应的xml命名空间

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

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

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

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

// CalendarSelectionMode.None - 禁止选择日期

// CalendarSelectionMode.SingleRange - 可以选择多个日期,连续日期(Shift键配合)

// CalendarSelectionMode.MultipleRange - 可以选择多个日期,任意日期(Ctrl键配合)

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

<!-- TextBox

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

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

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

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

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

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

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

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

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

Canvas - 绝对布局模式

Canvas.Left - 与上一层 Canvas 的 Y轴 间的距离,左上角为原点

Canvas.Top - 与上一层 Canvas 的 X轴 间的距离,左上角为原点

IsChecked - 是否被选中

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

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

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

IsEnabled - CheckBox是否有效

CheckBox.Content - CheckBox所对应的内容

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

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

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

后台邦定方式构造ComboBox

DisplayMemberPath - 数据源中需要被显示出来的字段名称

MaxDropDownHeight - 下拉框的最大下拉高度

十三、Button控件 

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 - 鼠标经过

后台获值:((System.Windows.Controls.Button)sender).Tag.ToString()

 

十四、CheckBox控件

 

IsChecked - 是否被选中

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

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

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

IsEnabled -CheckBox是否有效

CheckBox.Content - CheckBox所对应的内容

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

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

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

后台提示框代码:

HtmlWindowhtml = HtmlPage.Window;

html.Alert(string.Format("chk1:{0}\r\nchk2: {1}\r\nchk3: {2}\r\nchk4: {3}",

chk1.IsChecked, chk2.IsChecked,chk3.IsChecked, chk4.IsChecked));

 

十五、ComboBox控件

 

 

<!--

XAML方式构造ComboBox

-->

<ComboBox x:Name="cbo" Width="200" Margin="5">

<ComboBoxItem Tag="ComboBoxItem1" Content="ComboBoxItem1"/>

<ComboBoxItem Tag="ComboBoxItem2" Content="ComboBoxItem2"/>

<ComboBoxItem Tag="ComboBoxItem3" Content="ComboBoxItem3"/>

</ComboBox>

<!--

后台邦定方式构造ComboBox

DisplayMemberPath - 数据源中需要被显示出来的字段名称

MaxDropDownHeight - 下拉框的最大下拉高度

-->

<ComboBox x:Name="cbo2" DisplayMemberPath="Name" MaxDropDownHeight="100" Width="200"Margin="5" />

后台绑定:  void BindData()

{    var source= new Data.SourceData();

//设置 ComboBox 的数据源

cbo2.ItemsSource =source.GetData().Take(10);

}

后台获值:   (cbo.SelectedItem as ComboBoxItem).Tag.ToString()   // (cbo.SelectedItemas ComboBoxItem).Content.ToString()

//若ComboBox未命名,则使用 (((ComboBox)sender).SelectedItemas ComboBoxItem).Tag.ToString()

注明SourceData.cs

using System.Collections.ObjectModel;

namespace Silverlight20.Data

{

publicclass SourceData

{

//  ObservableCollection<T> 内置实现了INotifyCollectionChanged 接口(可直接应用于 OneWay 和 TwoWay 的绑定模式)

publicObservableCollection<SourceDataModel> GetData()

{

varsource = new ObservableCollection<SourceDataModel>();

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

{

source.Add(

new SourceDataModel

{

Name = "Name" + i.ToString().PadLeft(4, ‘0‘),

Age = new Random(i).Next(20, 60),

DayOfBirth =DateTime.Now,

Male = Convert.ToBoolean(i % 2)

});

}

returnsource;

}

}

}

GridSplitter

GridSplitter控件总是配合Grid使用,实现对Grid的空间的调整。

1、HorizontalAlignment、VerticalAligment、RezizeDirection是GridSplitter三个重要属性。

2、默认情况下,ResizeDirection的值为GridResizeDirecion.Atuo,这时,只要把VerticalAligment改为Stretch,GridSplitter就变成了垂直的。在这种情况下,如果HorizontalAlignment为Left,Splitter将会改变Splitter所在的列以及Splitter左边的列两者之间的宽度分配,如果HorizontalAlignment为Rgitht,Splitter将会改变Splitter所在的列以及Splitter右边的列两者之间的宽度分配,如果HorzontalAlignment为Center,现在移动Splitter不会改变它所在的列的宽度,而是影响Splitter两边列的宽度;如果把HorizontalAlignment改为Stretch,这是GridSplitter就变成了水平的。水平的GridSplitter改变的是高度,规则和改变宽度的一样。

3、当ResizeDirection设置为非Auto的值后,可以改变上述规则。如果设置值为Columns,表示在列之间分配空间,如果设置为Rows表示在行之间分配空间。

4、推荐不要把GridSplitter放在已有Element的格子里面,让整个GridSplitter放在单独的格子里面,以专注分割。

<Rectangle Grid.Row="0" Grid.Column="0" Fill="Red"/>

<Rectangle Grid.Row="0" Grid.Column="2" Fill="Green" />

<Rectangle Grid.Row="2" Grid.Column="0" Fill="Blue" />

<Rectangle  Grid.Row="2" Grid.Column="2" Fill="Yellow"/>

<!--

HorizontalAlignment属性用来指定文本水平方向的对齐方式.

ShowsPreview - 拖动GridSplitter 时,是要即时显示拖动结果(false 默认值),还是要先预览GridSplitter被拖动的位置(true)

-->

<basics:GridSplitter Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="3" ShowsPreview="True"HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />

<basics:GridSplitter Grid.Row="0" Grid.Column="1" Grid.RowSpan="3" HorizontalAlignment="Stretch"VerticalAlignment="Stretch" />

 

GridSplitter

 

NavigateUri - 超级链接的目标地址

TargetName - 目标名

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

 

ListBox

<!--

SelectionChanged - ListBox中某个对象被选中后所触发的事件

-->

<ListBox Margin="5" Width="200" Height="100" SelectionChanged= "ListBox_SelectionChanged">

<ListBoxItem Content="ListBoxItem01"/>

<ListBoxItem Content="ListBoxItem02"/>

<ListBoxItem Content="ListBoxItem03"/>

</ListBox>

<!--

ListBox中可以包含任何对象

-->

<ListBox Margin="5" Width="200">

<TextBlock Text="TextBlock" />

<TextBox Text="TextBox" />

<Button Content="Button" />

</ListBox>

另:

<!--

ListBox.ItemTemplate - ListBox 的选项模板

DataTemplate - 手工定义 ListBox 的选项数据

-->

<ListBox x:Name="ListBox1" Margin="5" Width="200" Height="100">

<ListBox.ItemTemplate>

<DataTemplate>

<StackPanel Orientation="Horizontal">

<TextBlock Text="{Binding Name}" Margin="5" />

<TextBlock Text="{Binding Age}" Margin="5" />

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

 

后台获值及提示框代码:

//ListBox.SelectedItem - ListBox中被选中的对象

var lst =sender as System.Windows.Controls.ListBox;

MessageBox.Show(

((System.Windows.Controls.ListBoxItem)lst.SelectedItem).Content+ " 被单击了", "提示",  MessageBoxButton.OK);

 

MediaElement控件

 

Source - 视频路径

AutoPlay - 是否自动播放

后台:

// MediaElement.Play() - 播放视频

// MediaElement.Pause() - 暂停视频

// MediaElement.Stop() - 停止视频

// MediaElement.IsMuted - 是否静音

// MediaElement.Volume - 声音大小(0 - 1)

 

StackPanel控件

<!--

SelectedIndex -被选中的TabItem 索引

SelectedItem - 被选中的TabItem 对象

-->

<basics:TabControl Width="400" Height="400" SelectedIndex="1">

<basics:TabItem Header="Tab1">

<TextBlock Text="Tab1 Content"/>

</basics:TabItem>

<!--

TabItem.Header - TabItem 的标题

TabItem.Content - TabItem 的内容

-->

<basics:TabItem>

<basics:TabItem.Header>

<TextBlock Text="Tab2"/>

</basics:TabItem.Header>

<basics:TabItem.Content>

<TextBlock Text="Tab2 Content"/>

</basics:TabItem.Content>

</basics:TabItem>

<basics:TabItem>

<basics:TabItem.Header>

<Image Source="/Silverlight20;component/Images/Logo.jpg" Height="20" />

</basics:TabItem.Header>

<TextBlock Text="Tab3Content"></TextBlock>

</basics:TabItem>

<basics:TabItem>

<basics:TabItem.Header>

<Grid Width="100">

<Image Source="/Silverlight20;component/Images/Logo.jpg" Height="20"HorizontalAlignment="Center" />

<TextBlock Text="Tab4" HorizontalAlignment="Center" />

</Grid>

</basics:TabItem.Header>

<TextBlock Text="Tab4Content"></TextBlock>

</basics:TabItem>

</basics:TabControl>

 

 

ProgressBar

<!--

Minimum -ProgressBar控件的最小值。参见基类System.Windows.Controls.Primitives.RangeBase

Maximum -ProgressBar控件的最大值。参见基类System.Windows.Controls.Primitives.RangeBase

Value -ProgressBar控件的值。参见基类System.Windows.Controls.Primitives.RangeBase

ValueChanged -ProgressBar控件的值发生变化时所触发的事件

-->

<ProgressBar x:Name="progressBar" Width="200" Height="20" Minimum="10" Maximum="70"></ProgressBar>

<!--

IsIndeterminate - 是否无法确定当前的进度值

false - 可以确定当前的进度值

true - 无法确定当前的进度值。一个Loading动画

-->

<ProgressBar Width="200" Height="20" IsIndeterminate="True" Margin="5"></ProgressBar>

 

 

RadioButton

<!--

GroupName - RadioButton控件所属组的组名

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

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

-->

<RadioButton GroupName="groupName" Content="红色的RadioButton" Background="Red" Margin="5" />

<!--

IsEnabled -RadioButton是否有效

-->

<RadioButton GroupName="groupName" Content="无效的RadioButton" IsEnabled="False" Margin="5" />

<!--

IsChecked - 是否被选中

RadioButton.Content - RadioButton所对应的内容

-->

<RadioButton GroupName="groupName" Margin="5" IsChecked="true">

<RadioButton.Content>

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

</RadioButton.Content>

</RadioButton>

 

 

TextBox

<!--

Text - TextBox内显示的值

BorderThickness- 边框的宽度(像素值:上下左右;左右,上下;左,上,右,下)

BorderBrush - 边框的颜色

-->

<TextBox Text="红色框绿色底蓝色字(真难看)" BorderBrush="Red" BorderThickness="1,5"Background="Green" Foreground="Blue" Margin="6" />

<!--

IsReadOnly - 是否只读

-->

<TextBox Text="只读TextBox" IsReadOnly="True" Margin="6" />

<!--

AcceptsReturn -是否允许输入回车

HorizontalScrollBarVisibility - 水平滚动条的显示状态

VerticalScrollBarVisibility - 垂直滚动条的显示状态

Auto - 自动根据TextBox控件的宽和高,以及其内容的宽和高,来决定是否显示滚动条

Disabled - 不显示,但是可以通过键盘或鼠标在显示内容中的移动或拖动操作,来看到被遮挡的内容

Hidden - 不显示,而且无法看到被遮挡的内容

Visible - 显示滚动条

-->

<TextBox Height="50" AcceptsReturn="True" VerticalScrollBarVisibility="Auto" Margin="6"

Text="多行文本框1 多行文本框2 多行文本框3 多行文本框4 多行文本框5 多行文本框6" />

<!--

SelectionChanged - 选中的文本内容发生变化时所触发的事件

-->

<TextBox Height="50" AcceptsReturn="False" Margin="5"SelectionChanged="TextBox_SelectionChanged"

Text="相应选中事件 多行文本框1 多行文本框2 多行文本框3" />

<TextBlock Margin="5">

<Run>选中的文本为:</Run>

<LineBreak />

<Run x:Name="lblMsg"></Run>

</TextBlock>

后台获值: lblMsg.Text = ((System.Windows.Controls.TextBox)sender).SelectedText;

 

Ellipse

<!--椭圆-->

<!--

Width - 椭圆的宽

Height - 椭圆的高

Stroke - 边框

StrokeThickness- 边框尺寸

Fill - 填充

-->

<Ellipse Stroke="Red" Fill="Yellow" StrokeThickness="6" Width="100" Height="50"></Ellipse>

 

 

Line

<!--线-->

<!--

X1 - 起点的 X 坐标

Y1 - 起点的 Y 坐标

X2 - 终点的 X 坐标

Y2 - 终点的 Y 坐标

注:

Line无填充,也就是Line的Fill属性无效

坐标以左上角为原点,原点右侧/下侧为正方向

-->

<Line X1="0" Y1="100" X2="200" Y2="300" Stroke="Black" StrokeThickness="6" />

二十六、Polyline控件

<!--非闭合图形,一串连接起来的线,起点与终点不会自动相连-->

<!--

Points - 构造路径所使用的点

空格分隔点坐标,逗号分隔X轴和Y轴坐标

-->

<Polyline Points="0,0 100,0 300,100 200,100100,200" Stroke="Red" StrokeThickness="6" Fill="Yellow" />(在silverlight5中没有这个控件)

 

 

DataGrid

<!--

AutoGenerateColumns - 是否根据数据源自动生成列。默认值为 true

RowDetailsVisibilityMode - 显示相应的行的详细数据时所使用的显示模式[System.Windows.Controls.DataGridRowDetailsVisibilityMode枚举]

DataGridRowDetailsVisibilityMode.Collapsed - 总不显示

DataGridRowDetailsVisibilityMode.Visible- 总是显示

DataGridRowDetailsVisibilityMode.VisibleWhenSelected - 只显示选中行的详细数据。默认值

-->

<data:DataGrid x:Name="DataGrid1" Margin="5"

Width="400" Height="200"

AutoGenerateColumns="False"

>

<!--

DataGrid.Columns - 手工定义DataGrid的列

DataGridTextColumn - 该列的单元格内文本方式显示

DataGridCheckBoxColumn - 该列的单元格以复选框方式显示

DataGridTemplateColumn - 该列的单元格以自定义方式显示

DataGridTemplateColumn.CellTemplate - 显示模式下的单元格模板

DataGridTemplateColumn.CellEditingTemplate - 编辑模式下的单元格模板

-->

<data:DataGrid.Columns>

<data:DataGridTextColumn Header="姓名" Binding="{Binding Name}" />

<data:DataGridTextColumn Header="生日" Binding="{Binding DayOfBirth}" />

<data:DataGridTextColumn Header="年龄" Binding="{Binding Age}" />

<data:DataGridCheckBoxColumn Header="性别" Binding="{Binding Male}" />

<data:DataGridTemplateColumn Header="生日">

<data:DataGridTemplateColumn.CellTemplate>

<DataTemplate>

<Grid>

<Rectangle Fill="Red" Margin="2" />

<TextBlock Text="{Binding DayOfBirth}" Foreground="Yellow" />

</Grid>

</DataTemplate>

</data:DataGridTemplateColumn.CellTemplate>

<data:DataGridTemplateColumn.CellEditingTemplate>

<DataTemplate>

<basics:DatePicker SelectedDate="{Binding DayOfBirth, Mode=TwoWay}" />

</DataTemplate>

</data:DataGridTemplateColumn.CellEditingTemplate>

</data:DataGridTemplateColumn>

</data:DataGrid.Columns>

<!--

DataGrid.RowDetailsTemplate - 用于显示相应的行的详细数据的模板

-->

<data:DataGrid.RowDetailsTemplate>

<DataTemplate>

<StackPanel Margin="5" Background="Aqua" Height="100">

<TextBlock Text="{Binding Name}" Margin="5"  />

<TextBlock Text="{Binding Age}" Margin="5"  />

<TextBlock Text="{Binding DayOfBirth}" Margin="5"  />

</StackPanel>

</DataTemplate>

</data:DataGrid.RowDetailsTemplate>

</data:DataGrid>

<!--

GridLinesVisibility - 表格分隔线的显示方式[System.Windows.Controls.DataGridGridLinesVisibility枚举]

DataGridGridLinesVisibility.None - 都不显示

DataGridGridLinesVisibility.Horizontal - 只显示水平分隔线

DataGridGridLinesVisibility.Vertical - 只显示垂直分隔线。默认值

DataGridGridLinesVisibility.All - 显示水平和垂直分隔线

RowBackground -奇数数据行背景

AlternatingRowBackground - 偶数数据行背景

-->

<data:DataGrid x:Name="DataGrid1" Margin="5"

Width="400" Height="200"

AutoGenerateColumns="False"

GridLinesVisibility="All"

RowBackground="White"

AlternatingRowBackground="Yellow"

ItemsSource="{Binding}"

>

<data:DataGrid.Columns>

<!--

IsReadOnly - 该列的单元格是否只读

CanUserReorder - 该列是否可以拖动

CanUserResize - 该列是否可以改变列宽

CanUserSort - 该列是否可以排序

SortMemberPath - 该列的排序字段

-->

<data:DataGridTextColumn Header="姓名" Binding="{Binding Name}"

IsReadOnly="False"

CanUserReorder="True"

CanUserResize="True"

CanUserSort="True"

SortMemberPath="Name"

/>

<!--

Width -列宽

Auto - 根据列头内容的宽度和单元格内容的宽度自动设置列宽

SizeToCells - 根据单元格内容的宽度设置列宽

SizeToHeader - 根据列头内容的宽度设置列宽

Pixel - 像素值

-->

<data:DataGridTextColumn Header="生日" Binding="{Binding DayOfBirth}" Width="100" />

<data:DataGridTextColumn Header="年龄" Binding="{Binding Age}" />

<data:DataGridCheckBoxColumn Header="性别" Binding="{Binding Male}" />

<data:DataGridTextColumn Header="姓名" Binding="{Binding Name}" />

<data:DataGridTextColumn Header="生日" Binding="{Binding DayOfBirth}" />

<data:DataGridTextColumn Header="年龄" Binding="{Binding Age}" />

<data:DataGridCheckBoxColumn Header="性别" Binding="{Binding Male}" />

</data:DataGrid.Columns>

</data:DataGrid>

后台cs代码中:

//AreRowDetailsFrozen - 是否冻结 RowDetailsTemplate 。 默认值为 false

//     如果等于 true ,那么在DataGrid 的水平滚动条滚动的时候 RowDetailsTemplate 不会跟着滚动

//IsReadOnly - 单元格是否只读。默认值 false

//FrozenColumnCount - 表格所冻结的列的总数(从左边开始数)。默认值 0

//SelectionMode - 行的选中模式[System.Windows.Controls.DataGridSelectionMode枚举]

//     DataGridSelectionMode.Single - 只能单选

//     DataGridSelectionMode.Extended - 可以多选(通过Ctrl或Shift的配合)。默认值

//CanUserReorderColumns - 是否允许拖动列。默认值 true

//CanUserResizeColumns - 是否允许改变列的宽度。默认值 true

//CanUserSortColumns - 是否允许列的排序。默认值 true

//VerticalGridLinesBrush - 改变表格的垂直分隔线的 Brush

//HorizontalGridLinesBrush - 改变表格的水平分隔线的 Brush

//HeadersVisibility - 表头(包括列头和行头)的显示方式[System.Windows.Controls.DataGridHeadersVisibility枚举]

//     DataGridHeadersVisibility.All - 列头和行头均显示

//     DataGridHeadersVisibility.Column - 只显示列头。默认值

//     DataGridHeadersVisibility.Row - 只显示行头

//     DataGridHeadersVisibility.None - 列头和行头均不显示

privatevoid chkCustomGridLineVertical_Changed(object sender, RoutedEventArgse)

{

CheckBoxchk = sender as CheckBox;

if(DataGrid1 != null)

{

//VerticalGridLinesBrush - 改变表格的垂直分隔线的 Brush

if (chk.IsChecked == true)

DataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Colors.Blue);

else

DataGrid1.VerticalGridLinesBrush = new SolidColorBrush(Color.FromArgb(255,223, 227, 230));

}

}

silverlight中常用的控件,布布扣,bubuko.com

时间: 2024-12-28 01:20:53

silverlight中常用的控件的相关文章

silverlight中的RadGridview控件的样式及部分属性设置

1.不显示第1列即列指示器(Row Indicators) 在 telerik:RadGridView中设置属性 RowIndicatorVisibility="Collapsed" 2.不显示最上面的分组面板(Group Panel) 在 telerik:RadGridView中 设置属性 ShowGroupPanel="False" 3.不显示最左侧的那条线(Frozen Columns Splitter) 在 telerik:RadGridView中 设置属性

DataGridView中内置控件常用事件使用心得

checkbox,button,imagebutton使用dataGridView1_CellContentClick private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e) { tb.Text+=string.Format("\r\n{0},Row:{1},Column:{2}","单元格内容单击!",e.RowIndex,e.ColumnInd

基于jQuery 常用WEB控件收集

Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion. jQuery-Horizontal Accordion AutoComplete-JQuery jQuery插件易于集成到现在的表单中(Form). AutoComplete-JQuery Facebook

&#167;2.1 最常用的控件------文本框(TextView)

文本框TextView是我们在安卓应用的界面开发中经常用到的一个控件,同时,它也是输入框(EditText)和按钮(Button)的父类 (输入框和按钮后面章节会有介绍) 作用:在页面上显示文字. 我们重新来看第一章节的那个"Hello World应用". 在layout/activity_main.xml布局文件代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <Relative

ASP.NET常用数据绑定控件优劣总结

本文的初衷在于对Asp.net常用数据绑定控件进行一个概览性的总结,主要分析各种数据绑定控件各自的优缺点,以便在实际的开发中选用合适的控件进行数据绑定,以提高开发效率. 因为这些数据绑定控件大部分都已经封装的很好了,稍微有一些基础的朋友都可以很容易的上手使用,所以本文不涉及具体控件的使用,只在于分析各自的优劣点,但是在下一篇文章里,我会主要讲一下ListBox.GridView.Repeater这三个数据绑定控件的“高效分页”,ListBox和GridView内置的有分页,但是其效率太低了,少量

ASP.NET常用数据绑定控件优缺点分析总结

ASP.NET常用数据绑定控件优缺点分析总结 本文的初衷在于对Asp.net常用数据绑定控件进行一个概览性的总结,主要分析各种数据绑定控件各自的优缺点,以便在实际的开发中选用合适的控件进行数据绑定,以提高开发效率. 因为这些数据绑定控件大部分都已经封装的很好了,稍微有一些基础的朋友都可以很容易的上手使用,所以本文不涉及具体控件的使用,只在于分析各自的优劣点,但是在下一篇文章里,我会主要讲一下ListBox.GridView.Repeater这三个数据绑定控件的“高效分页”,ListBox和Gri

在代码中动态创建控件无法保存状态的问题

在网上找了点资料,算是明白了,这是我觉得有帮助的文章: 原文:http://blog.csdn.net/keleloveni/archive/2007/03/15/1530300.aspx 引文: 今天偶然看到有篇文章谈到了相关的问题,终于又解决了一个自己不是很明白的东西. 页面生命周期中的第一个阶段是实例化,在这个阶段中,自动生成的类会根据页面的 HTML 部分中定义的静态控件构建控件层次结构.构造控件层次结构时,声明性语法中指定的值会赋给添加的每个控件的属性.实例化之后是初始化阶段,在这个阶

VC/MFC中的CComboBox控件使用详解

CComboBox控件详解 CComboBox控件又称作组合框控件,其有三种形态可供选择,1.简单组合框(Simple)2.下拉组合框(Drop-down)3.下拉列表式组合框(Drop-down list). CComboBox控件的常用设置属性说明: type属性:里面一共有三个选项.就是其三种形式, 我们常用的是后两种形态,其区别就是Dropdown的编辑区为可编辑控件,而droplist为静态控件. Data属性:当程序初始化的时候,下拉列表将显示其属性里面的内容,内容用分号分隔.其属性

[原创]在Framelayout中放置button控件出现的覆盖问题

android Framelayout(帧布局)是很常用的布局,主要用来处理需要多个view叠加显示的情况. 然而在使用中,我发现Framelayout中的Button控件,会挡住所有其他控件,而不论位置和添加顺序如何,这个表现是不正常的,我本机有4.1和5.0两种模拟器,只有5.0有这个问题,因此怀疑是5.0的bug. 下面用一个例子说明: 想要的效果是这样的:   我选择使用Framelayout来实现,下面一个button,上面一个imageview即可,代码如下: 1 <FrameLay