datagrid控件:Silverlight(4) - 2.0Control控件的DataGrid DatePicker Grid GridSplitter HyperlinkButton

　　本文源代码下载地址:

　　http://flashview.ddvip.com/2008_11/Silverlight.rar

　　在线DEMO

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

　　举例

　　1、DataGrid.xaml

<UserControl xmlns:data="clr-:.Windows.Controls;assembly=.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 ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
Silverlight20.Control
{
　　public partial DataGrid : UserControl
　　{
　　　　public DataGrid
　　　　{
　　　　　　InitializeComponent;
　　
　　　　　　BindData;
　　　　}
　　
　　　　void BindData
　　　　{
　　　　　　var source = 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-:.Windows.Controls;assembly=.Windows.Controls">
　　<StackPanel HorizontalAlignment="Left">
　　　　
　　　　<!--
　　　　TextBox 结合 Calendar经典选择日期方式
　　　　SelectedDateFormat - 被选中日期显示格式 [.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 - Control控件所在 Grid 行索引
　　　　Grid.Column - Control控件所在 Grid 列索引
　　　　Grid.RowSpan - 合并行 Control控件所在行以及Control控件所在行的后需要连续合并行总行数
　　　　Grid.ColumnSpan - 合并列 Control控件所在列以及Control控件所在列的后需要连续合并列总列数
　　
　　　　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-:.Windows.Controls;assembly=.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 - 后台方式设置ImageSource
　　　　-->
　　　　<Image x:Name="img" Margin="5" Width="100" />　　　　
　　　　
　　</StackPanel>
</UserControl>



　　Image.xaml.cs

using ;
using .Collections.Generic;
using .Linq;
using .Net;
using .Windows;
using .Windows.Controls;
using .Windows.Documents;
using .Windows.Input;
using .Windows.Media;
using .Windows.Media.Animation;
using .Windows.Shapes;
　　
using .Windows.Media.Imaging;
　　
Silverlight20.Control
{
　　public partial Image : UserControl
　　{
　　　　public Image
　　　　{
　　　　　　InitializeComponent;
　　
　　　　　　// 后台方式设置ImageSource
　　　　　　img.Source = BitmapImage( Uri("/Silverlight20;component/Images/Logo.jpg", UriKind.Relative));
　　　　}
　　}
}

　　OK

延伸阅读

• 2009-2-12-- datagrid控件:DataGrid 控件地运用
• 2009-2-12-- datagrid控件:DataGrid 控件地运用
• 2009-2-12-- datagrid控件:DataGrid 控件的运用
• 2009-2-12-- datagrid控件:DataGridControl控件中弹出详细信息窗口
• 2008-10-7-- datagrid控件:DataGridView控件读写MySQL数据库表格
• 2009-1-15-- datagrid控件:DataGrid Control控件的使用
• 2009-1-9-- datagridview控件:C#2005中使用Control控件DataGridView实现对数据库增删改查操作