wpf 客户端【JDAgent桌面助手】开发详解(一)主窗口 圆形菜单
目录区域:
wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图
wpf 客户端【JDAgent桌面助手】开发详解-开篇
内容区域:
这里开始主窗口 圆形菜单制作的过程,首先请大家看看下面的截图,想一想
1.如果你用winform如何开发呢? 如果用wpf怎么开发呢?
2.布局看起来不难做啊。但是真的很简单么?
3.我的窗体不是想金山毒霸哪有的窗口大小宽高固定的,那如果窗口最大化或者改变了宽高,中间的圆形菜单还是原来的大小,岂不是中间那么大区域就这么一个小圈太难看了吧?
大家思考5min后。。继续向下看。。。程序员最享受的是思考过程,静心思考,如果有更好的解决或者实现方法,或者发行我实现的方法有漏洞是留言。。。。
上图:
第一步 布局背景图:
我们先设定好容器gird 为380px 三个正圆形 一个是最外面的蓝色光环,一个是中间的蓝色光环,一个是最内部的有点灰色的圆形,在加一个 中间的小狗 Ok 简单布局就好了:
<Grid Height="380"
Width="380"
Name="menuGrid">
<Ellipse Name="menuRoundBig"
Fill="#F4F8FB"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="#E0E0E0"
StrokeThickness="1"
Height="380"
Width="380">
<Ellipse.Effect>
<DropShadowEffect BlurRadius="20"
ShadowDepth="0"
Color="#52D3EC" />
</Ellipse.Effect>
</Ellipse>
<Ellipse Name="menuRoundSmall"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="#E0E0E0"
StrokeThickness="0"
Height="300"
Width="300">
<Ellipse.Effect>
<DropShadowEffect BlurRadius="50"
ShadowDepth="0"
Color="#52D3EC" />
</Ellipse.Effect>
<Ellipse.Fill>
#DFE2E5
</Ellipse.Fill>
</Ellipse>
<Ellipse Name="menuRoundCenter"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Stroke="#E0E0E0"
StrokeThickness="0"
Height="300"
Width="300">
<Ellipse.Fill>
<RadialGradientBrush RadiusX="1"
RadiusY="1"
GradientOrigin="0.7,0.3">
<GradientStop Color="White"
Offset="0"></GradientStop>
<GradientStop Color="#DFE2E5"
Offset="1"></GradientStop>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Image Name="menuCenterimg"
Source="/img.png"
Height="120"
Stretch="Uniform">
</Image>
<Canvas Name="MenuCanvas"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Height="340"
Width="340">
</Canvas>
</Grid>
第二步 布局按钮图:
在这里要用到勾股定理计算6个按钮的坐标,计算过程我就不写了,本来想弄个图的。。弄的也不好。。。这个写博客真是费劲啊。。
就下面的图凑合看吧。。。360度。。总共6个角度所以每个角度60度。
第三步 在窗口大小改变时如何自适应,而能够保持合适的大小;
两点 :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="1*"></RowDefinition>
<RowDefinition Height="5*"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Viewbox Name="viewboxAnimUI"
Grid.Row="1">
</Viewbox> <!-- 这里放置刚才第一步的代码 -->
</Grid>
看出来了吗:1:5:1 上下空1比例的尺寸 ,中间留5比例尺寸。。。合适的大小;
加个
Viewbox 这样 wpf 会自动处理内容控件的宽高等比例缩放!是不是很方便很强大呢。 第四部 上截图,上代码了:下载:(由于博客园只提供30M的空间,用完后就得自己传到网盘里了,所以提供csdn下载,但是0积分啊亲。。。哎这年月容易么,上个码还不敢要分,感觉好的亲们。。推荐一个呗。。。)
http://download.csdn.net/detail/gwxyyuqiang/6962087
wpf 客户端【JDAgent桌面助手】开发详解(一)主窗口 圆形菜单的更多相关文章
- wpf 客户端【JDAgent桌面助手】开发详解(四) popup控件的win8.0的bug
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...
- wpf 客户端【JDAgent桌面助手】开发详解-开篇
上周二 发表了一个帖子:wpf 客户端[JDAgent桌面助手]业余开发的终于完工了..晒晒截图... 没有想到不到一个周时间已经浏览量过8千,估计过几天就过万了..很开心啊.. 评论中好多网友问我要 ...
- wpf 客户端【JDAgent桌面助手】开发详解(二)桌面宠物制作详解
目录区域: wpf 客户端[JDAgent桌面助手]业余开发的终于完工了..晒晒截 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]开发详解(一)主窗口 ...
- javaCV开发详解之12:视频转apng动态图片实现,支持透明通道,也支持摄像机、桌面屏幕、流媒体等视频源转apng动态图
wjavaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG. ...
- 基于H5的微信支付开发详解
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- ****基于H5的微信支付开发详解[转]
这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...
- iOS应用开发详解
<iOS应用开发详解> 基本信息 作者: 郭宏志 出版社:电子工业出版社 ISBN:9787121207075 上架时间:2013-6-28 出版日期:2013 年7月 开本:16开 ...
随机推荐
- pycharm添加git ignore
pycharm现在提供了git ignore,很方便 从这里下载扩展 https://plugins.jetbrains.com/plugin/7495--ignore 放到pycharm根目录\pl ...
- 20165207 学习基础与C语言基础调查反馈
文章阅读体会与学习调查反馈 文章阅读体会 我在娄老师的文章里了解到了"做中学"的概念.并且通过娄老师慷慨地分享的相关经验,我对于它有了进一步的理解以及体会.以下是我收获以及我的感想 ...
- this指向 - 开端
/* 这个主题 主要是为了论述 js 中一个最烦人的问题 --> this 的指向问题 其实,这个 this 到底指向什么,指向谁,查了好多资料.书籍.官文,也没有给出明确的一个结论, 也学这也 ...
- 图像处理(二十一)基于数据驱动的人脸卡通动画生成-Siggraph Asia 2014
http://blog.csdn.net/garfielder007/article/details/50582018 在现实生活中,我们经常会去评价一个人,长得是否漂亮.是不是帅哥美女,然而如何用五 ...
- WinterCamp2017 游记
Winter is coming! Day0 Day0前一天打了一轮CF,做完了ABCD,Div2 Rank59.然后就去开开心心的睡觉,准备第二天的行程. 快到一点的时候躺在了床上,睡不着,翻来覆去 ...
- FZU 1901 Period II(KMP中的next)题解
题意:给你一串字符串,问你前后缀相同情况有几种,并输出后缀位置(?这里一直没看懂length是什么,但是这样理解答案也对,然后还要加上本身长度) 思路:这里好好讲讲next的用法.我们都知道next代 ...
- 【转载】Java关键字之"transient"
原文出处:http://blog.csdn.net/lanxuezaipiao/article/details/16358677 transient的作用及使用方法 我们都知道一个对象只要实现了Ser ...
- 【转载】make: Nothing to be done for `all'. 解决方法
转自:make: Nothing to be done for `all'.解决方法 make: Nothing to be done for `all' 解决方法 1.这句提示是说明你已经编译好了, ...
- install ros-indigo-ecl-build
-- ==> add_subdirectory(bp_smart_charging/bp_dock_drive) CMake Warning at /opt/ros/indigo/share/c ...
- python 返回系统位数
# For bit it will and bit it will import struct print()