WPF体验 http://blog.csdn.net/niwalker/archive/2005/12/10/548434.aspx

时下作为WinFx的三大支柱（WPF, WCF, WWF)的WPF还没有有效的界面设计器。虽然习惯了可视化设计的人来说不方便，但是个人认为这是为你今后打下WPF编程的良好契机，为什么这样说呢？原因很简单，因为没有界面设计器，你需要手工编写XAML和许多CodeBehind代码，如果不了解它们的话，估计你什么都做不了。

    从PDC05到WinFx文档中的Sample以及网络上可以搜到文章和DEMO，可以看到WPF带来的强大视觉体验。MS把它称为下一代的界面表现基础构架一点也不夸张。那么，你还等什么？

XAML入门

XAML是一个xml格式文件，所以要求你编写的XAML文档必须符合良好的xml规范，如果你还不熟悉xml的话，赶紧去补课吧（两年前有人问我学习编程从哪里入手，我明确的表示先掌握xml)。下面介绍的内容是基于最新版本的WinFx，未来的版本可能还会发生变化，但是原理应该变化不大。

WPF的第一个Hello, world!

Hello, world！是许多语言教程的第一个程序，所以我们也不例外的来一个，运行WinFx SDK自带的XamlPad工具，输入下面的xaml：

 

<Grid xmlns="http://schemas.microsoft.com/winfx/avalon/2005"

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

<TextBlock>Hello,world!</TextBlock>

</Grid>

 

没有什么惊奇之处，我听到你说了。且慢，我们这个非常简陋的程序只是让你对什么是XAML有那么一点点地印象。在XAML中，Grid元素的两个xml命名空间声明不能省略，Grid是一个表格容器，作为我们根元素，任何容器类都可以用来代替它，比如你可以用Page, Panel, StackPanel等等（希望我没有说错）。TextBlock是一个文本块元素，用来包含文本。要说的只有这么多，这样我们可以继续下去，现在把TextBlock元属替换成Button元素：

...
<Button>Hello world</Button>

…

WOW, 一个大按钮出现在整个窗体！有点Cool了吧？

我们给Button添上一些属性：

 

<Button HorizontalAlignment="Center">Hello world</Button>

 

如果没有意外，你看到这一次Button宽度两边缩小，这是因为我们指定了水平对齐为居中，你可以用Left和Right值修改对齐

的方式，看看有什么效果出现。我们继续添加垂直对齐的属性：

 

<Button HorizontalAlignment="Center"

        VerticalAlignment="Center">Hello world</Button>

 

和你想象的一样，对吧？Button的大小是根据Button上的字体而改变。因为我们还没有指定宽度和高度。

为了做出一些变化，我们下面再增加两个Button：

 

<Button HorizontalAlignment="Center"

        VerticalAlignment="Center"
        Width="200">Hello world</Button>

<Button HorizontalAlignment="Center"

        VerticalAlignment="Center"
        Width="200">Hello world</Button>

<Button HorizontalAlignment="Center"

        VerticalAlignment="Center"

        Width="200">Hello world</Button>

 

什么？你只看到一个Button? 那就对了！因为三个Button通过水平和垂直居中的对齐，重叠在一起了。我们添加一个新的容器元素StackPanel来包含这三个Button。

 

<StackPanel>
<Button HorizontalAlignment="Center"

        VerticalAlignment="Center"
        Width="200">Hello world</Button>

<Button HorizontalAlignment="Center"

        VerticalAlignment="Center"
        Width="200">Hello world</Button>

<Button HorizontalAlignment="Center"

        VerticalAlignment="Center"

        Width="200">Hello world</Button>

</StackPanel>

 

OK, 三个Button出现了，这是因为StackPanel包含的元素是一个跟着一个排列，可以使水平方向，也可以垂直方向，默认是垂直方法。如果你现在去掉两个对齐的属性，并不影响界面上的效果。如果要让三个Button出现在StockPanel的中间，而不是顶部，怎么办？方法很容易，我们对容器指定它所包含的元素的对齐方式就可以了：

<StackPanel VerticalAlignment="Center">

<Button Width="100">Hello world</Button>

<Button Width="100">Hello world</Button>

<Button Width="100">Hello world</Button>

</StackPanel>

没有指定水平对齐属性是因为水平居中对齐是默认的。

这么大的空间，三个按钮挤在一起是不是不太协调？要调整按钮之间的间隔，我们有一个简单的方法就是设置按钮的Margin属性，Margin属性用来指定上下左右的间隔。设置如下：

 

<Button Width="100" Margin="0,5,0,5">Hello world</Button>

<Button Width="100" Margin="0,5,0,5">Hello world</Button>

<Button Width="100" Margin="0,5,0,5">Hello world</Button>

 

现在看上去好多了。我们改变一下三个按钮的背景颜色怎么样？顺便提一下，按钮的文字不是WinForm中按钮的Text属性，而是Content属性：

 

<Button Width="100" Margin="0,5,0,5" Background="Red" Content="First" />

<Button Width="100" Margin="0,5,0,5" Background="Blue" Content="Sencond" />

<Button Width="100" Margin="0,5,0,5" Background="Green" Content="Third" />

 

同样，你也可以修改容器的背景颜色。这一次到此为止，下一次我们将演示布局。