WPF布局在实际使用中是非常常用的一个操作。对于初学者来说，要从日常的开发实践中去慢慢体会这一技巧的操作，才能真正掌握布局方法。#t#
这里主要使用WPF和C#编写一个简单的小游戏（暂命名XMarket），意在通过该实例进一步学习和体验WPF，也欢迎广大同仁拍砖交流。言归正传，在编写一个软件前首先要思考软件的结构与布局，图片放在哪，按钮放在哪，都要先设计一下。当然本实例也只是简单布局。
我们通过学习，大概了解到本实例结构为上下WPF布局：
1. 首先，是背景图片，不用多说就是为了好看，简单的一个Image就可以实现了。
< Image Source="image/
backimage.jpg">
< /Image>
2. 在软件最上方的四个图标就是功能菜单，点击它们就会有相应的菜单显示在下面。这四个图标也是由Image构成，但是需要给它们附加一些事件，以达到想要的效果。后续文章中将介绍它们的功能。
将图标放在Canvas中，通过Canvas.Left和Canvas.Top来调整图标位置，Width和Height调整图标大小，Tag标记一下图标内容，Cursor设为Hand当鼠标放到图标上时表现为可以点击状态。
复制
< Canvas> < Image Source="image/home.png" Width="110" Height="110" Tag="My Home" Canvas.Left="30" Canvas.Top="20" Cursor="Hand">< /Image> < Image Source="image/market.png" Width="125" Height="125" Tag="My Shop" Canvas.Left="150" Canvas.Top="13" Cursor="Hand">< /Image> < Image Source="image/new.png" Width="125" Height="125" Tag="Upgrade Shop" Canvas.Left="275" Canvas.Top="13" Cursor="Hand">< /Image> < Image Source="image/bank.png" Width="110" Height="110" Tag="Bank" Canvas.Left="395" Canvas.Top="19" Cursor="Hand">< /Image> < /Canvas>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
3. 由于WPF布局的Image好像没有HTML <img> 的Title功能，所以如果显示图片标签，初步想用一个可移动的Textblock代替，所以在上面的Canvas中再加上一个Textblock。外加一个Border可以增加一些效果，Visibility默认要设为不可见。
复制
< Border Name="imageTitleBorder" CornerRadius="5" Background="AntiqueWhite" Visibility="Collapsed"> < TextBlock Name="imageTitle"> </TextBlock> < /Border>
1.
2.
3.
4.
5.
6.
7.
4. 下方菜单处，还是以Grid来布局内容，Grid中的组件将由C#自动生成。将该Grid放入ScrollViewer中方便显示多行内容，同时ScrollViewer设为垂直滑动。
复制
< Canvas Name="queryCanvas" Visibility="Collapsed"> < Border Name="queryBorder" BorderThickness="7" CornerRadius="9" Width="920" Height="440" Canvas.Left="40" Canvas.Top="160"> < ScrollViewer Name=
"queryScrollViewer" ScrollViewer.VerticalScrollBar
Visibility="Visible"> < Grid Name="queryGrid"> < /Grid> < /ScrollViewer > < /Border> < /Canvas> 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
5. ***将WPF布局代码整合起来如下，在Window中做了一些软件尺寸设置Height、Width、ResizeMode、WindowStartupLocation，以及软件的Icon。
复制
<Window x:Class="XMarket.Window1" xmlns="http://schemas.microsoft.com
/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.
com/winfx/2006/xaml" Title="XMarket" Height="652"
Width="1005" WindowStartupLocation=
"CenterScreen" ResizeMode="NoResize" Icon="
/XMarket;component/image/home.png"> <Grid> <Image Source="image/backimage.jpg">
</Image> <Canvas> <Image Source="image/home.png"
Width="110" Height="110" Tag="My Home" Canvas.Left="30" Canvas.Top="20"
Cursor="Hand"></Image><Image
Source="image/market.png"
Width="125" Height="125" Tag="My Shop" Canvas.Left="150" Canvas.Top="13"
Cursor="Hand"></Image> <Image Source="image/new.png"
Width="125" Height="125" Tag="Upgrade Shop" Canvas.Left="275" Canvas.Top="13"
Cursor="Hand"></Image> <Image Source="image/bank.png"
Width="110" Height="110" Tag="Bank" Canvas.Left="395" Canvas.Top="19"
Cursor="Hand"></Image> <Border Name="imageTitleBorder"
CornerRadius="5" Background="AntiqueWhite"
Visibility="Collapsed"> <TextBlock Name="imageTitle"></TextBlock> </Border> </Canvas> <Canvas Name="queryCanvas"
Visibility="Collapsed"> <Border Name="queryBorder"
BorderThickness="7" CornerRadius="9" Width="920" Height="440"
Canvas.Left="40" Canvas.Top="160"> <ScrollViewer Name="queryScrollViewer" ScrollViewer.VerticalScrollBar
Visibility="Visible"> <Grid Name="queryGrid"></Grid> </ScrollViewer > </Border> </Canvas> </Grid> </Window> 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
希望这篇文章介绍的WPF布局相关内容可以为大家带来一些帮助。