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当鼠标放到图标上时表现为可以点击状态。

 
 
 
  1. < Canvas>   
  2. < Image Source="image/home.png" 
  3. Width="110" Height="110" Tag="My Home"   
  4. Canvas.Left="30" Canvas.Top="20" 
  5. Cursor="Hand">< /Image>   
  6. < Image Source="image/market.png" 
  7. Width="125" Height="125" Tag="My Shop" 
  8. Canvas.Left="150" Canvas.Top="13" 
  9. Cursor="Hand">< /Image>   
  10. < Image Source="image/new.png" 
  11. Width="125" Height="125" Tag="Upgrade Shop"   
  12. Canvas.Left="275" Canvas.Top="13" 
  13. Cursor="Hand">< /Image>   
  14.  
  15. < Image Source="image/bank.png" 
  16. Width="110" Height="110" Tag="Bank"   
  17. Canvas.Left="395" Canvas.Top="19" 
  18. Cursor="Hand">< /Image>   
  19. < /Canvas> 

3. 由于WPF布局的Image好像没有HTML 的Title功能,所以如果显示图片标签,初步想用一个可移动的Textblock代替,所以在上面的Canvas中再加上一个Textblock。外加一个Border可以增加一些效果,Visibility默认要设为不可见。

 
 
 
  1. < Border Name="imageTitleBorder" 
  2. CornerRadius="5"   
  3. Background="AntiqueWhite" 
  4. Visibility="Collapsed">   
  5. < TextBlock Name="imageTitle"> 
  6.    
  7. < /Border> 

 

4. 下方菜单处,还是以Grid来布局内容,Grid中的组件将由C#自动生成。将该Grid放入ScrollViewer中方便显示多行内容,同时ScrollViewer设为垂直滑动。

 
 
 
  1. < Canvas Name="queryCanvas" 
  2. Visibility="Collapsed">   
  3. < Border Name="queryBorder" 
  4. BorderThickness="7" CornerRadius="9"   
  5. Width="920" Height="440" 
  6. Canvas.Left="40" Canvas.Top="160">   
  7. < ScrollViewer Name=
    "queryScrollViewer"   
  8. ScrollViewer.VerticalScrollBar
    Visibility="Visible">   
  9. < Grid Name="queryGrid"> 
  10. < /Grid>   
  11. < /ScrollViewer >   
  12. < /Border>   
  13. < /Canvas> 

 

5. ***将WPF布局代码整合起来如下,在Window中做了一些软件尺寸设置Height、Width、ResizeMode、WindowStartupLocation,以及软件的Icon。

 
 
 
  1. xmlns="http://schemas.microsoft.com
    /winfx/2006/xaml/presentation"   
  2. xmlns:x="http://schemas.microsoft.
    com/winfx/2006/xaml"   
  3. Title="XMarket" Height="652" 
    Width="1005" WindowStartupLocation=
    "CenterScreen"   
  4. ResizeMode="NoResize" Icon="
    /XMarket;component/image/home.png">   
  5.    

  6.    
  7.    
  8. Width="110" Height="110" Tag="My Home"   
  9. Canvas.Left="30" Canvas.Top="20" 
    Cursor="Hand">Source="image/market.png" 
    Width="125" Height="125" Tag="My Shop"   
  10. Canvas.Left="150" Canvas.Top="13" 
    Cursor="Hand">   
  11. Width="125" Height="125" Tag="Upgrade Shop"   
  12. Canvas.Left="275" Canvas.Top="13" 
    Cursor="Hand">   
  13. Width="110" Height="110" Tag="Bank"   
  14. Canvas.Left="395" Canvas.Top="19" 
    Cursor="Hand">   
  15. CornerRadius="5"   
  16. Background="AntiqueWhite" 
    Visibility="Collapsed">   
  17.    
  18.    
  19.    
  20. Visibility="Collapsed">   
  21. BorderThickness="7" CornerRadius="9"   
  22. Width="920" Height="440" 
    Canvas.Left="40" Canvas.Top="160">   
  23. ScrollViewer.VerticalScrollBar
    Visibility="Visible">   
  24.    
  25.    
  26.    
  27.    
  28.    
  29.  

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

文章名称:WPF布局相关设计方法
URL网址:http://www.shufengxianlan.com/qtweb/news4/425454.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联