稳扎稳打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://webabcd.blog.51cto.com/1787395/342779 


示例 
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
[源码下载]

 

     本文转自webabcd 51CTO博客，原文链接：http://blog.51cto.com/webabcd/342806 ，如需转载请自行联系原作者