稳扎稳打Silverlight(4) - 2.0控件之DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image

< UserControl  xmlns:data ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"   x:Class ="Silverlight20.Control.DataGrid"

    xmlns ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!--

        后台邦定方式，自动生成列

         -->

         < data:DataGrid  x:Name ="dGrd"  AutoGeneratecolumns ="True" ></ data:DataGrid >

        

     </ StackPanel >

</ UserControl >

using  System;

using  System.Collections.Generic;

using  System.Linq;

using  System.Net;

using  System.Windows;

using  System.Windows.Controls;

using  System.Windows.Documents;

using  System.Windows.Input;

using  System.Windows.Media;

using  System.Windows.Media.Animation;

using  System.Windows.Shapes;

namespace  Silverlight20.Control

{

    public partial class DataGrid : UserControl

    

{

        public DataGrid()

        

{

            initializeComponent();

            BindData();

        }

        void BindData()

        

{

            var source = new Data.sourceData();

            // 设置 DataGrid 的数据源

            dGrd.Itemssource = source.GetData().Take(10);

        }

    }

}

< UserControl  x:Class ="Silverlight20.Control.DatePicker"

    xmlns ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml"  

    xmlns:basics ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!--

       @R_874_10595@tBox 结合 Calendar，经典的选择日期的方式

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

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

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

         -->

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

        

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Control.Grid"

    xmlns ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml"  

    Width ="Auto"  Height ="500" >

    

     <!--

    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%

     -->

     < Grid  x:Name ="LayoutRoot"  BACkground ="White"  ShowGridLines ="True" >

        

         < Grid.RowDeFinitions >

             < RowDeFinition  Height ="50"   />

             < RowDeFinition  Height ="3*"   />

             < RowDeFinition  Height ="7*"   />

             < RowDeFinition  Height ="*"  MinHeight ="200"  MaxHeight ="500"   />

             < RowDeFinition  Height ="Auto"   />

         </ Grid.RowDeFinitions >

        

         < Grid.columnDeFinitions >

             < columnDeFinition  />

             < columnDeFinition  />

             < columnDeFinition  />

         </ Grid.columnDeFinitions >

        

         < TextBox  Grid.Row ="0"  Grid.column ="0"  BACkground ="red" @R_874_10595@t ="abc"   />

         < TextBox  Grid.Row ="0"  Grid.column ="1"  BACkground ="red" @R_874_10595@t ="abc"  Grid.columnSpan ="2"  HorizontalAlignment ="Center"   />

         < TextBox  Grid.Row ="1"  Grid.column ="0"  BACkground ="red" @R_874_10595@t ="abc"   />

         < TextBox  Grid.Row ="1"  Grid.column ="1"  BACkground ="red" @R_874_10595@t ="abc"  Grid.columnSpan ="2"  HorizontalAlignment ="Center"   />

         < TextBox  Grid.Row ="2"  Grid.column ="0"  BACkground ="red" @R_874_10595@t ="abc"   />

         < TextBox  Grid.Row ="2"  Grid.column ="1"  BACkground ="red" @R_874_10595@t ="abc"  Grid.RowSpan ="2"  VerticalAlignment ="Bottom"   />

         < TextBox  Grid.Row ="2"  Grid.column ="2"  BACkground ="red" @R_874_10595@t ="abc"   />

         < TextBox  Grid.Row ="3"  Grid.column ="2"  BACkground ="red" @R_874_10595@t ="abc"   />

         < TextBox  Grid.Row ="4"  Grid.column ="2"  BACkground ="red" @R_874_10595@t ="abc"   />

        

     </ Grid >

    

</ UserControl >

< UserControl  x:Class ="Silverlight20.Control.GridSplitter"

    xmlns ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml"

    xmlns:basics ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" >

     < Grid  x:Name ="LayoutRoot"  BACkground ="White" >

        

         < Grid.RowDeFinitions >

             < RowDeFinition  Height ="100"   />

             < RowDeFinition  Height ="5"   />

             < RowDeFinition  Height ="100"   />

         </ Grid.RowDeFinitions >

        

         < Grid.columnDeFinitions >

             < columnDeFinition  Width ="100"   />

             < columnDeFinition  Width ="5"   />

             < columnDeFinition  Width ="100"   />

         </ Grid.columnDeFinitions >

        

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

        

         <!--

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

        

     </ Grid >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Control.HyperlinkButton"

    xmlns ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

         <!--

        NavigateUri - 超级链接的目标地址

        TargetName - 目标名

         -->

         < HyperlinkButton  Content ="http://webabcd.cnblogs.com"  NavigateUri ="http://webabcd.cnblogs.com/"  HorizontalContentAlignment ="Center"  TargetName ="_blank"  BACkground ="Black"  Foreground ="White"  Margin ="5"  Width ="200"   />

         <!--

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

         -->

         < HyperlinkButton  NavigateUri ="http://webabcd.cnblogs.com/"  TargetName ="_blank"  Margin ="5"  Width ="200" >

             < HyperlinkButton.Content >

                 < Image  source ="/Silverlight20;component/Images/logo.jpg"   />

             </ HyperlinkButton.Content >

         </ HyperlinkButton >

     </ StackPanel >

</ UserControl >

< UserControl  x:Class ="Silverlight20.Control.Image"

    xmlns ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml/presentation"  

    xmlns:x ="http://scheR_732_11845@as.microsoft.com/winfx/2006/xaml" >

     < StackPanel  HorizontalAlignment ="Left" >

        

         <!--

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

         <!--

        source - 后台方式设置Image的source

         -->

         < Image  x:Name ="img"  Margin ="5"  Width ="100"   />

         < Image  x:Name ="img2"  Margin ="5"  Width ="100"   />

     </ StackPanel >

</ UserControl >

using  System;

using  System.Collections.Generic;

using  System.Linq;

using  System.Net;

using  System.Windows;

using  System.Windows.Controls;

using  System.Windows.Documents;

using  System.Windows.Input;

using  System.Windows.Media;

using  System.Windows.Media.Animation;

using  System.Windows.Shapes;

using  System.Windows.Media.Imaging;

using  System.Windows.resources;

namespace  Silverlight20.Control

{

    public partial class Image : UserControl

    

{

        public Image()

        

{

            initializeComponent();

            // 后台方式设置Image的source

            img.source = new BitmapImage(new Uri("/Silverlight20;component/Images/logo.jpg", UriKind.RelativE));

            StreamresourceInfo sri = Application.GetresourceStream(

                new Uri("/Silverlight20;component/Images/logo.jpg", UriKind.RelativE));

            BitmapImage imagesource = new BitmapImage();

            imagesource.Setsource(sri.Stream);

            img2.source = imagesource;

        }

    }

}