稳扎稳打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,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 />

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

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

相关推荐