XAML基础

在上一章节中，我们介绍了XAML是什么，它有什么用，那么该如何用它来创建一个组件呢？你会下下一个例子中看到，创建一个组件是多么简单，就像写出名字一样，比如创建一个按钮，就像这样：

<Button>

XAML标签必须有结尾, 在起始标签尾部用斜杠或者使用结束标签都可以.

<Button></Button>

或者

<Button />

多数的控件允许你在开始和结束之间放置内容, 这就是控件的内容(content). 比如,Button控件允许你在开始和结束之间指定显示的文字.

<Button>A button</Button>

HTML不区分大小写,但XAML区分. 因为控件的名字最终会有对应到.NET框架下的类型(Type). 同理XAML标签的属性也区分大小写,因为这是控件的属性. 我们可以定义一个带有属性的Button控件:

<Button FontWeight="Bold" Content="A button" />

我们设定了粗细(FontWeight)为粗体(Bold). 我们设定了内容(Content), 这和在Button控件标签的开始和结束间留下文字是一样的. 另外, 我们还可以通过用标签来指定控件的属性内容, 标签名为点号连接控件名和属性名:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>A button</Button.Content>
</Button>

上面两种方法的结果是一样的,只是形式的差别. 但是,很多的控件允许使用文字以外的作为内容, 比如, 我们可以在按钮中嵌套TextBlock控件来显示3中不同颜色的文字:

<Button>
    <Button.FontWeight>Bold</Button.FontWeight>
    <Button.Content>
        <WrapPanel>
            <TextBlock Foreground="Blue">Multi</TextBlock>
            <TextBlock Foreground="Red">Color</TextBlock>
            <TextBlock>Button</TextBlock>
        </WrapPanel>
    </Button.Content>
</Button>

内容(Content)属性只接受一个元素, 所以我们用WrapPanel控件把三个TextBlock控件包起来了. 这样的Panel控件有很多的用途, 这个我们以后再讲.

当然, 你也可以这样写:

<Button FontWeight="Bold">
    <WrapPanel>
        <TextBlock Foreground="Blue">Multi</TextBlock>
        <TextBlock Foreground="Red">Color</TextBlock>
        <TextBlock>Button</TextBlock>
    </WrapPanel>
</Button>

代码 vs. XAML

在上面的例子中我们看到XAML还是很好写的,但这不是唯一的办法, 你也可以用C#来达到和上面XAML一样的效果.

Button btn = new Button();
btn.FontWeight = FontWeights.Bold;

WrapPanel pnl = new WrapPanel();

TextBlock txt = new TextBlock();
txt.Text = "Multi";
txt.Foreground = Brushes.Blue;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Color";
txt.Foreground = Brushes.Red;
pnl.Children.Add(txt);

txt = new TextBlock();
txt.Text = "Button";
pnl.Children.Add(txt);

btn.Content = pnl;
pnlMain.Children.Add(btn);

当然C#的例子中可以使用更多的语法糖来写的没那么繁琐, 但你应该承认XAML要精炼的多.