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} 新值：{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} chk2: {1} chk3: {2} chk4: {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&#xD;&#xA;多行文本框2&#xD;&#xA;多行文本框3&#xD;&#xA;多行文本框4&#xD;&#xA;多行文本框5&#xD;&#xA;多行文本框6" />

       

        <!--

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

        -->

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

                Text="相应选中事件&#xD;&#xA;多行文本框1&#xD;&#xA;多行文本框2&#xD;&#xA;多行文本框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));

            }

        }