WPF布局在實(shí)際使用中是非常常用的一個(gè)操作。對(duì)于初學(xué)者來(lái)說(shuō)，要從日常的開(kāi)發(fā)實(shí)踐中去慢慢體會(huì)這一技巧的操作，才能真正掌握布局方法。#t#

這里主要使用WPF和C#編寫(xiě)一個(gè)簡(jiǎn)單的小游戲（暫命名XMarket），意在通過(guò)該實(shí)例進(jìn)一步學(xué)習(xí)和體驗(yàn)WPF，也歡迎廣大同仁拍磚交流。言歸正傳，在編寫(xiě)一個(gè)軟件前首先要思考軟件的結(jié)構(gòu)與布局，圖片放在哪，按鈕放在哪，都要先設(shè)計(jì)一下。當(dāng)然本實(shí)例也只是簡(jiǎn)單布局。

我們通過(guò)學(xué)習(xí)，大概了解到本實(shí)例結(jié)構(gòu)為上下WPF布局：

1. 首先，是背景圖片，不用多說(shuō)就是為了好看，簡(jiǎn)單的一個(gè)Image就可以實(shí)現(xiàn)了。

1. < Image　Source="image/
   backimage.jpg">
2. < /Image> 

2. 在軟件最上方的四個(gè)圖標(biāo)就是功能菜單，點(diǎn)擊它們就會(huì)有相應(yīng)的菜單顯示在下面。這四個(gè)圖標(biāo)也是由Image構(gòu)成，但是需要給它們附加一些事件，以達(dá)到想要的效果。后續(xù)文章中將介紹它們的功能。

將圖標(biāo)放在Canvas中，通過(guò)Canvas.Left和Canvas.Top來(lái)調(diào)整圖標(biāo)位置，Width和Height調(diào)整圖標(biāo)大小，Tag標(biāo)記一下圖標(biāo)內(nèi)容，Cursor設(shè)為Hand當(dāng)鼠標(biāo)放到圖標(biāo)上時(shí)表現(xiàn)為可以點(diǎn)擊狀態(tài)。

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

3. 由于WPF布局的Image好像沒(méi)有HTML <img> 的Title功能，所以如果顯示圖片標(biāo)簽，初步想用一個(gè)可移動(dòng)的Textblock代替，所以在上面的Canvas中再加上一個(gè)Textblock。外加一個(gè)Border可以增加一些效果，Visibility默認(rèn)要設(shè)為不可見(jiàn)。

< Border　Name="imageTitleBorder"　
CornerRadius="5"　  
Background="AntiqueWhite"　
Visibility="Collapsed">　  
< TextBlock　Name="imageTitle"> 
</TextBlock>　  
< /Border> 

4. 下方菜單處，還是以Grid來(lái)布局內(nèi)容，Grid中的組件將由C#自動(dòng)生成。將該Grid放入ScrollViewer中方便顯示多行內(nèi)容，同時(shí)ScrollViewer設(shè)為垂直滑動(dòng)。

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

5. ***將WPF布局代碼整合起來(lái)如下，在Window中做了一些軟件尺寸設(shè)置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> 

希望這篇文章介紹的WPF布局相關(guān)內(nèi)容可以為大家?guī)?lái)一些幫助。