WPF学习笔记(04) - 简单的控件和数据绑定

我们今天要学习如何使用简单的WPF控件。在本节中我们将通过一个简单的演示程序，向大家展示如何使用几个常见且简单的控件，并且领略WPF的UI元素自由组合的思想。还要学习WPF的一项重要的特性——数据绑定，该功能将令数据呈现和处理变得轻松和有趣。不用担心，编写这些具有WPF特性的程序将比你想象中简单！

首先，我们的这个演示程序要实现下面的目标：

使用Button、Label、TextBlock、TextBox控件实现控件间的简单数据绑定使用和定制ToolTip控件
OK，下面我们开始啦喔！

STEP1：创建窗口，安放控件

我们在VisualStudio2008新建一个WPF窗口项目，并开始调整我们的窗口（大小、标题等）。接着如下图所示，我们从工具箱中拖放几个控件，上端的是TextBlock，下面是Label和TextBox。其中TextBlock是用来显示文本的。TextBox也有类似的功能，不过可以用来输入和编辑文字。



大家可以适当调整他们的外观，比如Foreground（前景色），Background（背景色），Button的Content（内容）属性等。

为了编程的方便，我们在安放控件的时候，都不要忘记都给他们改一个好记的名字（在属性栏的顶端，输入Name属性）。Label控件的名字为lbInput，TextBox控件的名字为tbInput，TextBlock控件的名字为tbkOutput，Button控件的名字为btnExit。

STEP2：调整Label控件

大家刚开始接触WPF的时候，肯定会有点奇怪，Label和TextBlock都可以用来显示只读文本，那么究竟Label有什么不同呢？Label其实通常不是单独出现的，Label一般是他旁边的控件（本例中的TextBox）的说明标识，最重要的是Label可以利用快捷键使它的目标控件取得焦点。这下明白啦嘛，Label可以让其他控件得到快捷键的功能（即光标立刻移动到该控件），方便用户的操作。

为了使Label控件具有快捷键，我们还需要修改它的内容属性。在它的Content属性里面输入“_inputhere:”，其中“_”会成为后面的字母的下划线，它的作用是使此字母成为快捷键。另外我们还需要定制究竟它为谁（什么控件）服务，我们还需要在XAML代码中加入Target属性。XAML的Label片段如下：

<LabelHorizontalAlignment="Left"Margin="12,0,0,102"Name="lbInput"Width="84"Height="28"VerticalAlignment="Bottom"
Target="{BindingElementName=tbInput}">_inputhere:</Label>

这样我们在按下Alt+I的时候，tbInput将会获得焦点，不妨运行试试。

STEP3：设置tbInput与tbkOutput之间的数据绑定

数据绑定是WPF中的重要功能，可以令某UI元素中的属性与某对象的变量进行绑定，这样当某一方发生改变时，可以立即更新到绑定的目标上。数据绑定为数据传递建立了一种强大而简易的方式，为开发者省去了很多处理数据同步的程序代码。如本例当中，我们演示数据绑定，令tbOutput中的内容始终与tbInput中的内容同步，让用户输入的内容可以立即显示出来。

我们要在tbkOutput中把Text属性与tbInput的Text属性绑定起来，要在XAML中为tbkOutput中的Text属性添加绑定对象，代码如下：

<TextBlockHeight="37"Margin="12,50,12,0"Name="tbkOutput"VerticalAlignment="Top"FontSize="20"
Foreground="White"Background="LightBlue"Text="{BindingElementName=tbInput,Path=Text}"/>

在代码中，我们可以看到，Text属性中是一个花括号包含的内容，这表示要显示的是这个对象的信息，而不是这些字符。在这个Binding对象中ElementName属性指示需要绑定哪个控件，Path属性指示需要绑定的属性。在这里完成了tbkOutput的Text属性与tbInput的Text属性的绑定。效果如下图所示，实现了同步输出：

STEP4:设置提示内容

我们经常看到在程序中，鼠标悬停在某一按钮上时会出现提示框，这个叫做ToolTip。现在我们来为tbInput添加一句提示语，令用户感到亲切易用。点选tbInput，在属性中找到ToolTip，然后我们可以输入一些文本内容，如“提示：请在这里输入你想显示的内容”。哈哈，效果这样就实现了，如下图所示：





不过这个效果实在太单调了，WPF又怎会这么枯燥呢，我们可以完全定制ToolTip。因为在WPF中，ToolTip是一个容器，不只是字符串，这意味着你可以自由搭配，安放任何对象。其实在WPF中，很多控件都有这样功能，如Button等，利用这种自由搭配的思想可以极大地丰富我们的程序。现在我们利用XAML代码对ToolTip进行改造，为其添加图像和文本格式。

首先，我们在VS中添加图像文件到工程文件夹。在解决方案资源管理器中，右击项目，选择添加-现有项，选择一些图像添加到项目中，如下图所示。然后在属性中更改复制到输出目录属性为始终复制。





这时，这些图片可以直接调用了。我们回到tbInput的XAML文档中，修改代码如下：

<TextBoxMargin="102,0,12,102"Name="tbInput"Height="28"VerticalAlignment="Bottom">
<TextBox.ToolTip>
<StackPanelOrientation="Horizontal">
<ImageSource="pencil_32.png"Margin="2"/>
<StackPanelOrientation="Vertical">
<TextBlockText="提示"FontWeight="Bold"FontSize="18"/>
<TextBlockText="请在这里输入你想显示的内容"Foreground="#FF555555"Padding="6"/>
</StackPanel>
</StackPanel>
</TextBox.ToolTip>
</TextBox>

关于StackPanel

StackPanel是一个容器，是一个供控件安放在上面的面板，是WPF诸多面板中最为常用的面板之一，它的最大特点就是，控件按顺序一个挨着一个排列，可以用Orientation属性控制其排列方向（垂直或者水平）。

privatevoidbtnExit_Click(objectsender,RoutedEventArgse)
{
this.Close();
}

这样我们的程序就大功告成了。关于数据绑定的使用，我们以后还会进一步学习，毕竟这是WPF中必须掌握而且是解放劳动力的重要功能！

源文件可以在这里下载：Masson_WPF_03SimpleBinding_source.rar