编程语言

img niwalker

WPF体验

发表于2005/12/10 6:20:00  13526人阅读

分类: C# NET

 

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

    从PDC05WinFx文档中的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宽度两边缩小,这是因为我们指定了水平对齐为居中,你可以用LeftRight值修改对齐

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

 

<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" />

 

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

WPF体验(二)
WPF体验(三)
WPF体验(四)
WPF体验(五)

阅读全文
0 0

相关文章推荐

img
取 消
img