silverlight中常用的控件

一、布局控件

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

 

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

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

            Horizontal- 水平排列

            Vertical - 垂直排列

Grid 控件是最灵活的布局面板,它支持用多行和多列的方式排布控件。在 标签内,通过 属性来定义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%

 

 

二、 控件

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

        

        

            

        

 

        

        

            

            

                

            

        

 

 

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

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

        

            

                

            

        

注意: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来控制纵向和横向滚动条是否出现。

        

        

            

                

            

        

 

        

            

                

                   aaa

bbb

ccc

ddd

                

            

        

 

 


六、TextBlock控件

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

        

        

 

        

        

 

        

        

 

        

        

 

        

        

            

            

            

            

            

        

 

       

        

            

            

            

            

            

        

 

 

ToolTip控件

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

 

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

       

 

Rectangle

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

        

        

        

 

 

Slider  

      

        

        

 

后台获值代码:

            //RoutedPropertyChangedEventArgs.OldValue - Slider控件的原值

            //RoutedPropertyChangedEventArgs.NewValue - Slider控件的新值

 

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

 

 

TextBox 

       

        

 

 

Image     

   

        

       

        

        

 

        

        

 

 

十二、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 - 只能选择一个日期         

 

        

            

            

            

        

       

        

        

 

后台绑定:  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 内置实现了INotifyCollectionChanged 接口(可直接应用于 OneWay 和 TwoWay 的绑定模式)

        publicObservableCollection GetData()

        {

            varsource = new ObservableCollection();

 

            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放在单独的格子里面,以专注分割。

 

        

        

        

        

       

        

        

        

 

 

 

GridSplitter

 

      NavigateUri - 超级链接的目标地址

        TargetName - 目标名

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

 

 

 

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控件

     

        

           

            

                

            

 

            

            

                

                   

                

                

                   

                

            

 

            

                

                   

                

                

            

 

            

                

                   

                       

                       

                   

                

                

            

           

        

 

 

 

 

ProgressBar

     

        

 

        

        

 

 

 

 

RadioButton

     

        

       

        

        

 

        

        

            

                

            

        

 

 

 

 

TextBox

      

        

               

        

        

       

        

        

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

       

        

        

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

       

        

            选中的文本为:

            

            

        

 

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

 

 

 

Ellipse

       

        

        

 

 

 

Line

       

        

        

 

 

二十六、Polyline控件

        

        

        (在silverlight5中没有这个控件)

 

 

 

 

DataGrid

        

            Width="400" Height="200"

            AutoGenerateColumns="False"

            >

 

            

 

            

                

                

                

                

                

                   

                       

                            

                                

                                

                            

                       

                   

                   

                       

                            

                       

                   

                

            

 

            

            

                

                   

                       

                       

                       

                   

                

            

        

 

 

 

 

 

 

 

        

        

            Width="400" Height="200"

            AutoGenerateColumns="False"

            GridLinesVisibility="All"

            RowBackground="White"

            AlternatingRowBackground="Yellow"

            ItemsSource="{Binding}"

        >

 

            

            

                

                

                    IsReadOnly="False"

                    CanUserReorder="True"

                    CanUserResize="True"

                    CanUserSort="True"

                    SortMemberPath="Name"

                />

               

                

                

                

                

                

                

                

                

            

 

        

 

 

 

 

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

            }

        }

转载于:https://www.cnblogs.com/chengcailian/p/3923629.html

你可能感兴趣的:(silverlight中常用的控件)