WPF编游戏系列 之一 布局设计
本系列主要使用WPF和C#编写一个简单的小游戏(暂命名XMarket),意在通过该实例进一步学习和体验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>
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.VerticalScrollBarVisibility="Visible"> <Grid Name="queryGrid"></Grid> </ScrollViewer > </Border> </Canvas>
5. 最后将代码整合起来如下,在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.VerticalScrollBarVisibility="Visible"> <Grid Name="queryGrid"></Grid> </ScrollViewer > </Border> </Canvas> </Grid> </Window>
待续… …
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
初识 Spring(07)---(AOP)
AOP 参照《Spring思维导图,让Spring不再难懂(aop篇)》 AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善。 面向对象的特点是继承、多态和封装。而封装就要求将功能分散到不同的对象中去,这在软件设计中往往称为职责分配。实际上也就是说,让不同的类设计不同的方法。这样代码就分散到一个个的类中去了。这样做的好处是降低了代码的复杂程度,使类可重用。 但是人们也发现,在分散代码的同时,也增加了代码的重复性。比如说,我们在两个类中,可能都需要在每个方法中做日志。按面向对象的设计方法,我们就必须在两个类的方法中都加入日志的内容。也许他们是完全相同的,但就是因为面向对象的设计让类与类之间无法联系,而不能将这些重复的代码统一起来。 也许有人会说,那好办啊,我们可以将这段代码写在一个独立的类独立的方法里,然后再在这两个类中调用。但是,这样一来,这两个类跟我们上面提到的独立的类就有耦合了,它的改变会影响这两个类。那么,有没有什么办法,能让我们在需要的时候,随意...
- 下一篇
WPF编游戏系列 之二 图标效果
原文: WPF编游戏系列 之二 图标效果 本篇将要实现图标的两个效果:1. 显示图标标签,2. 图标模糊效果。在上一篇中提到Image没有HTML <img>的Title属性(在MSDN中也没找到类似的属性),所以本篇将自行制作一个标签,它的功能是当鼠标移动到图标上方时会显示该图标的Tag说明,并且该图标模糊显示,如下图对比所示。 原始状态 效果状态 1. 在Home <Image>中加入MouseEnter和MouseLeave事件。 <Image Source="image/home.png" Width="110" Height="110" Tag="My Home" Canvas.Left="30" Canvas.Top="20" Cursor="Hand" MouseEnter="Image_BlurEffect_MouseEnter" MouseLeave="Image_BlurEffect_MouseLeave"></Image> 2. 事件加好了,就要为添加内容了。先看Image_BlurEffect_MouseEn...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2整合Redis,开启缓存,提高访问速度
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS8编译安装MySQL8.0.19
- CentOS8安装Docker,最新的服务器搭配容器使用