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

[索引页]
[源码下载]

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

作者： webabcd


介绍
Silverlight 2.0 控件一览：DataGrid, DatePicker, Grid, GridSplitter, HyperlinkButton, Image


在线DEMO
http://www.cnblogs.com/webabcd/archive/2008/10/09/1307486.html


示例
1、DataGrid.xaml

< UserControl  xmlns:data ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"   x:Class ="Silverlight20.Control.DataGrid"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         <!--
        后台邦定方式，自动生成列
         -->
         < data:DataGrid  x:Name ="dgrd"  AutoGenerateColumns ="True" ></ data:DataGrid >
        
     </ StackPanel >
</ UserControl >

DataGrid.xaml.cs

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);
        }
    }
}

2、DatePicker.xaml

< UserControl  x:Class ="Silverlight20.Control.DatePicker"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:basics ="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" >
     < StackPanel  HorizontalAlignment ="Left" >
        
         <!--
        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 >
        
     </ StackPanel >
</ UserControl >

3、Grid.xaml

< UserControl  x:Class ="Silverlight20.Control.Grid"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.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"  Text ="abc"   />
         < TextBox  Grid.Row ="0"  Grid.Column ="1"  Background ="red"  Text ="abc"  Grid.ColumnSpan ="2"  HorizontalAlignment ="Center"   />
         < TextBox  Grid.Row ="1"  Grid.Column ="0"  Background ="red"  Text ="abc"   />
         < TextBox  Grid.Row ="1"  Grid.Column ="1"  Background ="red"  Text ="abc"  Grid.ColumnSpan ="2"  HorizontalAlignment ="Center"   />
         < TextBox  Grid.Row ="2"  Grid.Column ="0"  Background ="red"  Text ="abc"   />
         < TextBox  Grid.Row ="2"  Grid.Column ="1"  Background ="red"  Text ="abc"  Grid.RowSpan ="2"  VerticalAlignment ="Bottom"   />
         < TextBox  Grid.Row ="2"  Grid.Column ="2"  Background ="red"  Text ="abc"   />
         < TextBox  Grid.Row ="3"  Grid.Column ="2"  Background ="red"  Text ="abc"   />
         < TextBox  Grid.Row ="4"  Grid.Column ="2"  Background ="red"  Text ="abc"   />
        
     </ Grid >
    
</ UserControl >

4、GridSplitter.xaml

< UserControl  x:Class ="Silverlight20.Control.GridSplitter"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.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 >

5、HyperlinkButton.xaml

< UserControl  x:Class ="Silverlight20.Control.HyperlinkButton"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.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 >

6、Image.xaml

< UserControl  x:Class ="Silverlight20.Control.Image"
    xmlns ="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x ="http://schemas.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 >

Image.xaml.cs

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;
        }
    }
}

OK
[源码下载]