一、布局控件
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="带引号的"TextBlock""/>
<!--
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