目录区域:

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桌面助手】开发详解(一)主窗口 圆形菜单的更多相关文章

  1. wpf 客户端【JDAgent桌面助手】开发详解(四) popup控件的win8.0的bug

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  2. wpf 客户端【JDAgent桌面助手】开发详解(三) 瀑布流效果实现与UI虚拟化优化大数据显示

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  3. wpf 客户端【JDAgent桌面助手】业余开发的终于完工了。。晒晒截图

    目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口 圆形菜单... wpf 客 ...

  4. wpf 客户端【JDAgent桌面助手】开发详解-开篇

    上周二 发表了一个帖子:wpf 客户端[JDAgent桌面助手]业余开发的终于完工了..晒晒截图... 没有想到不到一个周时间已经浏览量过8千,估计过几天就过万了..很开心啊.. 评论中好多网友问我要 ...

  5. wpf 客户端【JDAgent桌面助手】开发详解(二)桌面宠物制作详解

    目录区域: wpf 客户端[JDAgent桌面助手]业余开发的终于完工了..晒晒截 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]开发详解(一)主窗口 ...

  6. javaCV开发详解之12:视频转apng动态图片实现,支持透明通道,也支持摄像机、桌面屏幕、流媒体等视频源转apng动态图

    wjavaCV系列文章: javacv开发详解之1:调用本机摄像头视频 javaCV开发详解之2:推流器实现,推本地摄像头视频到流媒体服务器以及摄像头录制视频功能实现(基于javaCV-FFMPEG. ...

  7. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  8. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  9. iOS应用开发详解

    <iOS应用开发详解> 基本信息 作者: 郭宏志    出版社:电子工业出版社 ISBN:9787121207075 上架时间:2013-6-28 出版日期:2013 年7月 开本:16开 ...

随机推荐

  1. pycharm添加git ignore

    pycharm现在提供了git ignore,很方便 从这里下载扩展 https://plugins.jetbrains.com/plugin/7495--ignore 放到pycharm根目录\pl ...

  2. 20165207 学习基础与C语言基础调查反馈

    文章阅读体会与学习调查反馈 文章阅读体会 我在娄老师的文章里了解到了"做中学"的概念.并且通过娄老师慷慨地分享的相关经验,我对于它有了进一步的理解以及体会.以下是我收获以及我的感想 ...

  3. this指向 - 开端

    /* 这个主题 主要是为了论述 js 中一个最烦人的问题 --> this 的指向问题 其实,这个 this 到底指向什么,指向谁,查了好多资料.书籍.官文,也没有给出明确的一个结论, 也学这也 ...

  4. 图像处理(二十一)基于数据驱动的人脸卡通动画生成-Siggraph Asia 2014

    http://blog.csdn.net/garfielder007/article/details/50582018 在现实生活中,我们经常会去评价一个人,长得是否漂亮.是不是帅哥美女,然而如何用五 ...

  5. WinterCamp2017 游记

    Winter is coming! Day0 Day0前一天打了一轮CF,做完了ABCD,Div2 Rank59.然后就去开开心心的睡觉,准备第二天的行程. 快到一点的时候躺在了床上,睡不着,翻来覆去 ...

  6. FZU 1901 Period II(KMP中的next)题解

    题意:给你一串字符串,问你前后缀相同情况有几种,并输出后缀位置(?这里一直没看懂length是什么,但是这样理解答案也对,然后还要加上本身长度) 思路:这里好好讲讲next的用法.我们都知道next代 ...

  7. 【转载】Java关键字之"transient"

    原文出处:http://blog.csdn.net/lanxuezaipiao/article/details/16358677 transient的作用及使用方法 我们都知道一个对象只要实现了Ser ...

  8. 【转载】make: Nothing to be done for `all'. 解决方法

    转自:make: Nothing to be done for `all'.解决方法 make: Nothing to be done for `all' 解决方法 1.这句提示是说明你已经编译好了, ...

  9. install ros-indigo-ecl-build

    -- ==> add_subdirectory(bp_smart_charging/bp_dock_drive) CMake Warning at /opt/ros/indigo/share/c ...

  10. python 返回系统位数

    # For bit it will and bit it will import struct print()