[源码下载]
稳扎稳打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 >
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);
}
}
}
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 >
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 >
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 >
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 >
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 >
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;
}
}
}
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
[源码下载]