WPF布局在实际使用中是非常常用的一个操作。对于初学者来说,要从日常的开发实践中去慢慢体会这一技巧的操作,才能真正掌握布局方法。#t#
这里主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验WPF,也欢迎广大同仁拍砖交流。言归正传,在编写一个软件前首先要思考软件的结构与布局,图片放在哪,按钮放在哪,都要先设计一下。当然本实例也只是简单布局。
我们通过学习,大概了解到本实例结构为上下WPF布局:
1. 首先,是背景图片,不用多说就是为了好看,简单的一个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 的Title功能,所以如果显示图片标签,初步想用一个可移动的Textblock代替,所以在上面的Canvas中再加上一个Textblock。外加一个Border可以增加一些效果,Visibility默认要设为不可见。
- < Border Name="imageTitleBorder"
- CornerRadius="5"
- Background="AntiqueWhite"
- Visibility="Collapsed">
- < TextBlock Name="imageTitle">
- < /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。
- 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">Width="110" Height="110" Tag="My Home" - Canvas.Left="30" Canvas.Top="20"
Cursor="Hand">Source="image/market.png"
Width="125" Height="125" Tag="My Shop"- Canvas.Left="150" Canvas.Top="13"
Cursor="Hand">Width="125" Height="125" Tag="Upgrade Shop" - Canvas.Left="275" Canvas.Top="13"
Cursor="Hand">Width="110" Height="110" Tag="Bank" - Canvas.Left="395" Canvas.Top="19"
Cursor="Hand">CornerRadius="5" - Background="AntiqueWhite"
Visibility="Collapsed">BorderThickness="7" CornerRadius="9" - Width="920" Height="440"
Canvas.Left="40" Canvas.Top="160">- ScrollViewer.VerticalScrollBar
Visibility="Visible">
希望这篇文章介绍的WPF布局相关内容可以为大家带来一些帮助。
文章名称:WPF布局相关设计方法
URL网址:http://www.shufengxianlan.com/qtweb/news4/425454.html
网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联