使用XAML和C#创建按钮

原文地址：http://www.dingos.cn/index.php?topic=2012.0

XAML是由微软开发的一种新的基于XML的标记语言，用来帮助开发者快速、简单的使用WPF图像API开发图形用户界面。这篇文章将演示使用XAML和C#设计基本的按钮并实现基本功能。

创建一个项目

让我们现在开始吧。创建一个WPF应用程序后，可以看到Visual Studio创建的初始代码，如下所示：

<Window x:Class="CreateButton.Window1"

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

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

    Title="Window1" Height="300" Width="300">

    <Grid>       

    </Grid>

</Window>

这时，从Visual Studio的窗体设计器中可以看见一个300 × 300的空白区域。

创建按钮

只要在Grid标签内部放置Button标签，就可以添加一个按钮。

<Window x:Class="CreateButton.Window1"

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

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

    Title="Window1" Height="300" Width="300">

    <Grid>

        <Button Name="MyButton" Content="Click Me" Width="75" Height="23">

        </Button>

    </Grid>

</Window>

上面的的XAML代码创建一个75 × 23的按钮，显示文本内容为“Click Me”。因为我们没有设置任何位置属性，这个按钮在窗体的中间。在C#代码中可以使用Name属性来处理按钮。在这个例子中，按钮的名字是“MyButton”。

设置按钮的位置

现在移动按钮到想要的地方。例如，现在想将按钮放在窗体的右下角。

<Button Name="myButton" Content="Click Me" Width="75" Height="23"

        VerticalAlignment="Bottom" HorizontalAlignment="Right"

        Margin="10,10" />

在.NET以前的版本，按钮必须由左上角位置为参考进行设置。这意味着，在窗体大小发生变化时还要保持它们在右下角需要设置代码来实现。使用XAML，我们可以使用VerticalAlignment和HorizontalAlignment属性让按钮保持在右下角。Margin属性则告诉按钮距离底部10像素，距离右边10像素。

现在，窗体设计者大概的样子如下：

设置按钮的视觉属性

现在，让我们来改变按钮的外观。

<Button Name="myButton" Content="Click Me" Width="75" Height="23" Margin="10,10"

        VerticalAlignment="Bottom" HorizontalAlignment="Right"

        FontWeight="bold" Background="LightBlue" BorderBrush="DarkBlue"

        Foreground="DarkBlue" />

根据上面的XAML代码，按钮将如右边图像所示。

在.NET早期版本中如像按钮一样，已经定制了许多可是元素。在这里不一一说明。不过从上面的代码，可以了解如何使用它们。

为按钮添加图片

需要放置一个图片在按钮中，需要在Button标签内插入一个Image标签。

<Button Name="myButton" Width="75" Height="23" Margin="10,10"

        VerticalAlignment="Bottom" HorizontalAlignment="Right"

        FontWeight="bold" Background="LightBlue" BorderBrush="DarkBlue"

        Foreground="DarkBlue">

    <Image Source="I:/images/button.gif"></Image>

</Button>

你可能注意到这里移除了Content属性。这是因为图片标签也作为内容。一个按钮仅能设置内容一次。如果你想保留Content属性并添加Image标签，你将获得下面的错误“已设置"System.Windows.Controls.Button.Content"属性，并且只能设置一次”。

关于XAML真正有条理是你可以在任何控件中添加其他控件。你可以替换设置在按钮内容的Image标签为其他的任何控件。

<Button Name="myButton" Width="75" Height="23" Margin="10,10"

        VerticalAlignment="Bottom" HorizontalAlignment="Right"

        FontWeight="bold" Background="LightBlue" BorderBrush="DarkBlue"

        Foreground="DarkBlue">

    <TextBox Text="Some Text" FontSize="8" />

</Button>

上面的代码将显示一个内部包含文本框的按钮：

为按钮添加事件

一个按钮没有事件处理是没有多大用处的。幸运的是，XAML添加了简单的事件操作。在XAML代码中，事件就像其他的任何属性一样。

<Button Name="myButton" Content="Click Me" Width="75" Height="23"

        Margin="10,10" VerticalAlignment="Bottom" HorizontalAlignment="Right"

        Click="myButtonClicked" />

你可以看到，我设置Click属性为“myButtonClicked”。现在它是无法编译的，以为在代码的任何地方都没有定义“myButtonClicked”。我们现在需要做的是在C#后置代码添加函数，执行点击事件。

private void myButtonClicked(object sender, EventArgs e) {

    MessageBox.Show("Button Clicked");

}

这个添加的方法要匹配RoutedEventHandler委托的签名。幸运的是，它和.NET早期版本的格式相同，比较容易记忆。现在当点击按钮是，将会弹出一个消息框，在消息框上显示“Button Clicked”。

在C#代码中使用按钮

任何一个在XAML创建的控件，在后置代码中可以通过名字来访问。

this.myButton.Background = Brushes.Green;

this.myButton.Content = "OK";

将上面的代码放在窗体的构造函数中。当运行时，在窗体中可以看见一个绿色的按钮，文本显示“OK”。