WPF

WPF 范例程序之二 – 构建Hello Kitty 专卖店产品演示 – 附源代码下载

EntLib.com — Thu, 29 Jan 2009 02:08:48 GMT

WPF 范例程序之二 – 构建Hello Kitty 专卖店产品演示 – 附源代码下载

本文演示如何应用WPF 的数据绑定技术、WPF动画、ObservableCollection集合类，构建一个可爱的Hello Kitty 专卖店产品演示应用程序。在此，感谢http://www.giftcenter.cn (礼品中心网) 提供的Hello Kitty 产品图片。

WPF 系列学习笔记上一篇文章：
WPF 范例程序之一 – 数据绑定(Data Binding) – 附源代码下载

范例程序演示界面如下：

下面对范例程序中使用的一些技术，进行逐一介绍。本文由http://blog.entlib.com 开源博客平台小组提供，欢迎交流、分享.NET 开源技术。

1. App.xaml 文件中Application.Resources 节设置应用程序范围资源，如样式、画笔、数据源等等。

范例程序中定义了ObjectDataProvider，将返回PhotoList 集合对象。

<Application.Resources>

</Application.Resources>

同时，在App.xaml.cs 代码文件中，对上述集合对象进行了初始化操作。

private void Application_Startup(object sender, StartupEventArgs e)

{

Window1 theWindow = new Window1();

theWindow.Show();

ObjectDataProvider dataProvider = this.Resources["Photos"] as ObjectDataProvider;

PhotoList photoList = dataProvider.Data as PhotoList;

theWindow.Photos = photoList;

theWindow.Photos.Path = @"..\..\HelloKitty";

}

项目文件夹 HelloKitty 中存放着Hello Kitty 系列产品图片（来自http://www.giftcenter.cn 礼品中心网）。

2. 数据绑定

WPF支持任何类型的.NET对象作为数据源绑定到WPF对象。对于所有的ItemsControl对象都有一个ItemsSource依赖属性，这是专门为数据绑定而准备的。ItemsSource的类型是IEnumerable，所以对于我们几乎所有的集合类型我们都可以轻易的改变成ItemsSource的源对象。

将上述定义的Application.Resources 应用到ListBox 上，实现Hello Kitty 产品图片的展示。

<ListBox Style="{DynamicResource PhotoListStyle}"

Grid.Row="1"

Grid.ColumnSpan="3"

Name ="PhotoListBox"

Margin="0,0,0,20"

DataContext="{Binding Source={StaticResource Photos}}"

SelectionChanged ="PhotoListSelection"

ItemsSource="{Binding }"

ItemContainerStyle="{DynamicResource PhotoListItem}"

SelectedIndex="0" />

DataContext就是数据上下文对象，它是为了避免多个对象共享一个数据源时重复的对所有对象显式地用binding标记，而把同一个数据源在上下文对象的某个范围内共享，这样当一个绑定没有显式的源对象时，WPF会遍历找到一个非空的DataContext为止。

3. ListBox控件的SelectionChanged 事件。

PhotoListSelection 方法负责读取ListBox 控件当前选择的Item图片，并进一步根据选择的产品图片，创建BitmapFrame 对象，最后绑定到CurrentPhoto1（Image控件）上，显示并放大选择的产品图片。

private void PhotoListSelection(object sender, SelectionChangedEventArgs e)

{

String path = ((sender as ListBox).SelectedItem.ToString());

BitmapSource img = BitmapFrame.Create(new Uri(path));

CurrentPhoto1.Source = img;

}

4. ObservableCollection(T) 类

WPF提供了一个ObservableCollection类，它实现了一个暴露了INotifyPropertyChanged的数据集合。也就是说我们不需要自己对每个单独的数据实现INotifyPropertyChanged结构。Observablecollection表示一个动态数据集合，在添加项、移除项或刷新整个列表时，此集合将提供通知。

在本范例程序中，PhotoList 集合类继承ObservableCollection<ImageFile>，代码如下：

public class PhotoList : ObservableCollection<ImageFile>

在绑定PhotoList类到ListBox之后，只要PhotoList 对象发生了变化，Listbox 的数据也会有相应的变化，也就是是PhotoList集合中的插入或移除操作可以自动更新 UI。

如果你有兴趣，你可以将上述代码调整为List 集合，如下所示：

public class PhotoList : List<ImageFile>

再次运行应用程序，你会发现ListBox 无法正确显示Hello Kitty 产品图片列表了。但是如果你进一步修改Application_Startup方法的代码，如下所示：

private void Application_Startup(object sender, StartupEventArgs e)

{

Window1 theWindow = new Window1();

ObjectDataProvider dataProvider = this.Resources["Photos"] as ObjectDataProvider;

PhotoList photoList = dataProvider.Data as PhotoList;

theWindow.Photos = photoList;

theWindow.Photos.Path = @"..\..\HelloKitty";

theWindow.Show();

}

将theWindow.Show() 方法移到后面，再次运行代码，你会发现Hello Kitty 产品图片列表又可以正常显示了，但还是建议采用ObservableCollection<T>集合类的。

范例程序运行环境：Visual Studio 2008 SP1。如果你对XAML不熟悉，建议你参考如下XAML学习笔记系列：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

XAML 实例演示之六 – 控件嵌套Nesting

XAML 实例演示之七 – Resources和Transformations

XAML 实例演示之八 –动画：缓慢旋转的按钮

XAML 实例演示之九 – Hello Kitty 专卖店产品演示

WPF 范例程序之一 – 数据绑定(Data Binding) – 附源代码下载

EntLib.com — Tue, 27 Jan 2009 01:28:42 GMT

WPF 范例程序之一 – 数据绑定(Data Binding) – 附源代码下载

本文演示如何采用常用的技术创建WPF 数据绑定应用程序，如ListBox显示产品列表，Image显示产品图片等等，并提供基于VS 2008 的范例程序下载。

首先，看看范例程序的演示界面：

下面介绍范例程序的一些基本要点：

1. 数据源Data Source

基于演示的需要，本范例程序的数据源定义在XAML文件的Resources元素内，实际应用程序则多数从数据库中读取。

<Window.Resources>

<local:ShoppingCart x:Key="Cart">

<local:ShoppingCartItem SKU="460"

Item="多媒体键盘"

Value="65.00"

ShortDescription="全新正品 Hello Kitty 迷你多媒体键盘/USB键盘/超薄键盘"

ProductImage="http://www.giftcenter.cn/giftcenterpictures/img640/04/103/04-103-005.jpg"/>

<local:ShoppingCartItem SKU="461"

Item="不倒翁牙签筒"

Value="8.00"

ShortDescription="Hello Kitty 奇趣蛋型不倒翁牙签筒/牙签罐/牙签盒"

ProductImage="http://www.giftcenter.cn/giftcenterpictures/img640/02/303/02-303-028.jpg"/>

<local:ShoppingCartItem SKU="388"

Item="保健磁化水杯"

Value="29.00"

ShortDescription="Hello Kitty 新款保温保健磁化水杯（陶瓷内胆)"

ProductImage="http://www.giftcenter.cn/giftcenterpictures/img640/02/310/02-310-020.jpg"/>

<local:ShoppingCartItem SKU="242"

Item="眼镜盒"

Value="15.00"

ShortDescription="Hello Kitty 白色皮质眼镜盒(3) 情侣小礼品"

ProductImage="http://www.giftcenter.cn/giftcenterpictures/img640/02/204/02-204-005.jpg"/>

</local:ShoppingCart>

</Window.Resources>

2. 数据绑定ListBox

在本范例程序中，我们绑定ListBox到动态的数据集合中List<ShoppingCartItem>。

<ListBox.ItemTemplate>

</StackPanel>

</StackPanel>

</StackPanel>

</StackPanel>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

3. ListBox的SelectionChanged事件

通过选择ListBox中显示的产品列表，触发ListBox的SelectionChanged事件，在对应的方法中，切换产品图片的显示。

private void ListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)

{

ListBox lb = sender as ListBox;

ShoppingCartItem scItem = lb.SelectedItem as ShoppingCartItem;

// Create Image Element

Image myImage = new Image();

myImage.Width = 500;

// Create source

BitmapImage myBitmapImage = new BitmapImage();

// BitmapImage.UriSource must be in a BeginInit/EndInit block

myBitmapImage.BeginInit();

myBitmapImage.UriSource = new Uri(scItem.ProductImage);

myBitmapImage.DecodePixelWidth = 500;

myBitmapImage.EndInit();

ProductImage.Source = myBitmapImage;

}

范例程序运行环境：Visual Studio 2008 SP1。如果你对XAML不熟悉，建议你参考如下XAML学习笔记系列：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

XAML 实例演示之六 – 控件嵌套Nesting

XAML 实例演示之七 – Resources和Transformations

XAML 实例演示之八 –动画：缓慢旋转的按钮

XAML 实例演示之九 – Hello Kitty 专卖店产品演示

EntLib.com — Mon, 26 Jan 2009 04:37:21 GMT

XAML 实例演示之九 – Hello Kitty 专卖店产品演示

本文演示如何结合XAML 实例演示系列文章（1-8）中学习的技术，制作一个Hello Kitty 专卖店产品演示窗口。

范例程序演示效果如下：

范例程序完整代码下载：

http://blog.entlib.com/userfiles/EntLib/file/GiftCenter_HelloKitty.zip

因为范例程序引用了http://www.giftcenter.cn 礼品中心网-Hello Kitty 专卖店的一些产品图片，因此需要连接Internet 才能看到具体的演示效果。

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

XAML 实例演示之六 – 控件嵌套Nesting

XAML 实例演示之七 – Resources和Transformations

XAML 实例演示之八 –动画：缓慢旋转的按钮

下面逐个介绍本范例使用的一些技术。

1. LinearGrdientBrush 和 GradientStop

LinearGradientBrush 使用线性渐变绘制区域。线形渐变横跨一条直线（渐变轴）将两种或更多种色彩进行混合。可以使用 GradientStop 对象指定渐变的颜色及其位置。

</LinearGradientBrush>

上述LinearGridentBrush定义在Resources里面，应用在Border元素中。

</ScrollViewer>

</Border>

2. Style对象

一个控件中Style属性包含着一个Style对象，当Style对象更改时就可更新控件的大小及颜色等属性。XAML对Style的支持很好，一般请况Style初始化在父控件的Resources标记里面做为一个资源等待调用。

<Setter.Value>

</ScrollViewer>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Style节在父控件Window的Resources属性中，表意Window下所有的子控件都可以获取Window.Resources中的对象。

Style.Triggers是一个Trigger（触发器）集合。使用了EventTrigger（事件触发器）实现产品图片大小和透明度的动画效果。

<Style.Triggers>

<EventTrigger.Actions>

</Storyboard>

</BeginStoryboard>

</EventTrigger.Actions>

</EventTrigger>

3. ListBox和ItemsSource

ListBox 是一个 ItemsControl，使用 ItemsSource 属性设置其内容。本范例程序将Hello Kitty 专卖店的部分产品图片绑定到ListBox中。

<ListBox

Style="{StaticResource SpecialListStyle}" Grid.Row="1" Grid.ColumnSpan="3" Name ="PhotoListBox" Margin="0,0,0,20"

ItemsSource="{Binding}" ItemContainerStyle="{StaticResource SpecialListItem}" SelectedIndex="0">

</ListBox>

XAML 实例演示之八 –动画：缓慢旋转的按钮

EntLib.com — Mon, 26 Jan 2009 00:42:18 GMT

XAML 实例演示之八 –动画：缓慢旋转的按钮

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

XAML 实例演示之六 – 控件嵌套Nesting

XAML 实例演示之七 – Resources和Transformations

本文介绍了如何实现动画。范例程序简单实现了一个慢慢旋转的按钮。

在WPF中实现动画，对象必须满足三个条件：

1. 必须有一个依赖属性（Dependency Property）。

2. 必须继承DependencyObject对象，并实现了IAnimatable接口。常用的控件Button，Panel和Shape都继承DependencyObject，并实现了IAnimatable接口，因此这不是一个问题。

3. 必须有一个兼容的动画类型变量。

实现动画的第一步是选择一个属性来动画。在范例中，我们通过改变Button的角度来实现动画。Angel属性值是Double类型，因此我们使用DoubleAnimation创建从开始值到终点值的渐变。同时，还需要指定Duration属性值，也就是从开始到结束所持续的时间。Duration值越大，动画就会越慢。

第二步是创建Storyboard，在Storyboard中放置DoubleAnimation元素。DoubleAnimation通过Storyboard.TargetName属性指定在哪里应用动画，也就是指定动画的对象。本范例指定Button按钮应用动画。

<DoubleAnimation

Storyboard.TargetName="AnimatedRotateTransform"

Storyboard.TargetProperty="Angle"

To="360" Duration="0:0:5" FillBehavior="Stop" />

</Storyboard>

</BeginStoryboard>

最后一步是关联Storyboard和Trigger，也就是指定启动动画的事件。

完整的范例代码如下：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title=" Welcome to EntLib.com | Graphics: Animated Rotation"

Background="White" Margin="50">

<Button.RenderTransform>

</Button.RenderTransform>

<Button.Triggers>

<DoubleAnimation

Storyboard.TargetName="AnimatedRotateTransform"

Storyboard.TargetProperty="Angle"

To="360" Duration="0:0:5" FillBehavior="Stop" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Button.Triggers>

</Button>

</StackPanel>

</Page>

演示效果如下：

XAML 实例演示之七 – Resources和Transformations

EntLib.com — Sun, 25 Jan 2009 17:17:21 GMT

XAML 实例演示之七 – Resources和Transformations

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

XAML 实例演示之六 – 控件嵌套Nesting

本文介绍了Resources 和 Transformations的使用。Resources提供了XAML定义和共享对象的方法。我们可以在Page/Window或者在整个应用程序级别上共享Resources。可以通过如下语句定义在单一窗口范围内使用的Resource。

<Window.Resources>

</Window.Resources>

下面的语句将上面定义的Resource运用到Button按钮上。StaticResource关键字表示在编译期间设置Resource，这样不能在运行期间关联到不同的Resource。

WPF使制作简单转换非常方便。本范例XAML创建了三个按钮，其中第三个按钮运用了RenderTransform，RenderTransform有一个子元素RotateTransform，其Angel 属性设置为45度角，顺时针方向。

<Button.RenderTransform>

</Button.RenderTransform>

</Button>

完整的范例代码如下：

http://blog.entlib.com/userfiles/EntLib/file/Resources_Transformations.zip

在Kaxaml工具中演示效果如下：

XAML 实例演示之六 – 控件嵌套Nesting

EntLib.com — Sun, 25 Jan 2009 17:11:03 GMT

XAML 实例演示之六 – 控件嵌套Nesting

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

XAML 实例演示之五 – Canvas和ViewBox控件的使用

本文介绍了控件的嵌套使用。XAML允许一个控件嵌套另一个控件。例如，StackPanel嵌套在Button 控件中，接着将其他控件或图形嵌套在StackPanel中。在本范例中，我们将一个水平方向的StackPanel放置在Button控件中，接着放置一个Canvas 画布在StackPanel中，在Canvas画布中，我们又放置了一组椭圆Ellipse 图形，像一个牛眼睛。紧邻着Canvas元素，我们放置一个TextBlock 控件。

范例代码如下：

http://blog.entlib.com/userfiles/EntLib/file/NestingControls.zip

在Kaxaml 工具中，看看有趣的效果：

XAML 实例演示之五 – Canvas和ViewBox控件的使用

EntLib.com — Sun, 25 Jan 2009 17:05:03 GMT

XAML 实例演示之五 – Canvas和ViewBox控件的使用

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

本文介绍了如何使用Canvas和ViewBox控件制作微笑头像。Canvas 画布布局控件允许对子元素进行绝对定位（absolute positioning）。范例中将Canvas控件放置在ViewBox控件中，这样允许伸展子元素Canvas。

微笑头像-XAML范例代码如下所示：

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Welcome to EntLib.com | Little Green Man">

<Ellipse Canvas.Left="10"

Canvas.Top="10"

Width="160"

Height="160"

Fill="LimeGreen"

Stroke="Black" />

<Ellipse Canvas.Left="45"

Canvas.Top="50"

Width="25"

Height="25"

Fill="White"

Stroke="Black" />

<Ellipse Canvas.Left="52"

Canvas.Top="55"

Width="10"

Height="10"

Fill="Black"

Stroke="Black" />

<Ellipse Canvas.Left="77.5"

Canvas.Top="50"

Width="25"

Height="25"

Fill="Yellow"

Stroke="Black" />

<Ellipse Canvas.Left="110"

Canvas.Top="50"

Width="25"

Height="25"

Fill="White"

Stroke="Black" />

<Ellipse Canvas.Left="117"

Canvas.Top="55"

Width="10"

Height="10"

Fill="Black"

Stroke="Black" />

</Canvas>

</Viewbox>

</Window>

在Kaxaml 工具中演示效果如下：

通过拖拉Windows边框，微笑头像自动放大、缩小。伸展后效果如下：

所有shape 对象 (Ellipse, Line, Path, Polygon, Polyline, 和Rectangle) 有相同的属性，三个常用的属性是：

Stroke – 表示如何画图形的外框。

StrokeThickness – 表示图形外框的粗细。

Fill – 表示如何填充图形内部。

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

EntLib.com — Sun, 25 Jan 2009 03:23:23 GMT

XAML 实例演示之四 – StackPanel和FlowDocumentReader控件的使用

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

XAML 实例演示之三 – Grid 控件的使用

本文简单介绍StackPanel 和 FlowDocumentReader控件的使用。StackPanel 像其他的Panel一样，既可以作为一个包容器（Container），也可以放在其他包容器之内。本范例，我们将StackPanel 放置在DockPanel之内。FlowDocumentReader 是一个强大的文档显示工具，包含一个简单的FlowDocument，在FlowDocument 之内有许多Paragraph 元素。

下面是StackPanel和FlowDocumentReader的一个范例：

http://blog.entlib.com/userfiles/EntLib/file/StackPanel.zip

在Kaxaml 工具的演示效果如下：

XAML 实例演示之三 – Grid 控件的使用

EntLib.com — Sun, 25 Jan 2009 03:01:11 GMT

XAML 实例演示之三 – Grid 控件的使用

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

前面系列文章：

XAML 实例演示之一

XAML 实例演示之二

本文简单介绍Grid 控件的使用。标识（Markup）语言的一个挑战是实现准确的页面元素布局，XAML 实现的方法是采用Panel元素。最灵活的Panel可能就是Grid了，Grid 允许控制行、列，就像HTML语言中的table一样。

下面是一个简单的Grid控件的范例：

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Title="Programming .NET 3.5 | Understanding Grids">

<Grid>

<Grid.RowDefinitions>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

</Grid.ColumnDefinitions>

<TextBlock TextBlock.FontSize="36"

TextBlock.Foreground="White"

Background="Blue"

Grid.Column="0"

Grid.Row="0"

Grid.RowSpan="2">1</TextBlock>

<TextBlock TextBlock.FontSize="36"

Background="Gold"

Grid.Column="1"

Grid.Row="0" >2</TextBlock>

<TextBlock TextBlock.FontSize="36"

TextBlock.Foreground="White"

Background="Crimson"

Grid.Column="2"

Grid.Row="0" >3</TextBlock>

<TextBlock TextBlock.FontSize="36"

Background="White"

Grid.Column="1"

Grid.Row="1"

Grid.ColumnSpan="2">4</TextBlock>

<TextBlock TextBlock.FontSize="36"

TextBlock.Foreground="White"

Background="Purple"

Grid.Column="0"

Grid.Row="2" >5</TextBlock>

<TextBlock TextBlock.FontSize="36"

TextBlock.Foreground="White"

Background="Green"

Grid.Column="1"

Grid.Row="2" >6</TextBlock>

<TextBlock TextBlock.FontSize="36"

TextBlock.Foreground="White"

Background="Black"

Grid.Column="2"

Grid.Row="2" >7</TextBlock>

</Grid>

</Window>

在Kaxaml 工具中的演示效果如下：

本范例代码首先定义一个Grid 元素，接着分别定义三个 RowDefinitions 和 ColumnDefinitions。接下来逐个定义TextBox元素：

<TextBlock TextBlock.FontSize="36"

TextBlock.Foreground="White"

Background="Blue"

Grid.Column="0"

Grid.Row="0"

Grid.RowSpan="2">1</TextBlock>

FontSize 指定字体大小，Foreground 指定文字颜色，Column和Row 属性分别指定列、行位置坐标，RowSpan 与 HTML 基本一致，表示占用多少行，类似的一个属性是ColumnSpan。

有趣的是，Grid 控件自身没有颜色，Grid中的TextBlocks 控件提供颜色，Grid仅仅提供结构定义。

XAML 实例演示之二

EntLib.com — Sat, 24 Jan 2009 15:24:07 GMT

XAML 实例演示之二

本文配合免费下载的Kaxaml 工具，演示XAML 的一些基本用法。关于Kaxaml 工具的介绍和下载，请参考文章：推荐一款免费下载 XAML 编辑调试工具-Kaxaml。

XAML 系列文章为学习笔记，这是我今年春节期间安排的学习任务。

上一篇文章：
XAML 实例演示之一

使用DockPanel 和 Border 进行页面布局

计划将整个windows Form使用DockPanel和Border控件分为三个区域-Top/Left/Right。下面，首先定义Grid 和 DockPanel 包容器元素。

<Window

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

Title="Welcome" Height="480" Width="690">

<Grid>

接下来是TOP 区域的Border控件定义：

<Border

DockPanel.Dock="Top"

BorderBrush="Black"

BorderThickness="1"

Height="70">

<Label

FontFamily="Verdana"

FontSize="32"

HorizontalAlignment="Center">EntLib.com – 开源ASP.NET/C# 技术论坛</Label>

</Border>

左边区域Border 控件的定义：

<Border

DockPanel.Dock="Left"

BorderBrush="Black"

BorderThickness="1"

Width="400">

<Label

FontFamily="Verdana"

FontWeight="Bold" FontSize="18"

HorizontalAlignment="Center">Left</Label>

</StackPanel>

</Border>

右边区域 Border 控件的定义：

<Border

DockPanel.Dock="Right"

BorderBrush="Black"

BorderThickness="1"

Width="290">

<Image Name="imgLogo" Margin="0, 10, 0, 0" HorizontalAlignment="Center" VerticalAlignment="Top"

Source=" http://forum.entlib.com/images/entlib.gif" Width="220" />

</Border>

最后，关闭相关的控件。

</DockPanel>

</Grid>

</Window>

下面是通过Kaxaml 工具的运行效果图：

下面，进一步采用StackPanel、Label、Separator 控件实现左侧区域的效果。StackPanel 实现控件从上至下摆放，Separator控件用来进一步隔离不同的控件。

左侧Border 及其内部控件代码 – 请下载附件中的范例代码。

通过Kaxaml工具，范例XAML 的最终演示效果如下：

从上述范例，我们可以看到XAML具有非常强大的界面定义功能，允许我们创建复杂的界面布局和引入本地及Web资源。另外，XAML也可以设计动画，这里就不具体介绍了。