WPF布局相关设计方法

WPF布局在实际使用中是非常常用的一个操作。对于初学者来说，要从日常的开发实践中去慢慢体会这一技巧的操作，才能真正掌握布局方法。#t#

这里主要使用WPF和C#编写一个简单的小游戏（暂命名XMarket），意在通过该实例进一步学习和体验WPF，也欢迎广大同仁拍砖交流。言归正传，在编写一个软件前首先要思考软件的结构与布局，图片放在哪，按钮放在哪，都要先设计一下。当然本实例也只是简单布局。

我们通过学习，大概了解到本实例结构为上下WPF布局：

1. 首先，是背景图片，不用多说就是为了好看，简单的一个Image就可以实现了。

1. < Image　Source="image/
   backimage.jpg">
2. < /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> 
 
 
 

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> 
 
 
 

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> 
 
 
 

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> 
 
 
 

希望这篇文章介绍的WPF布局相关内容可以为大家带来一些帮助。