目录区域:
【晒视频了】业余开发wpf 客户端【JDAgent桌面助手】开发详解-开篇
1.wpf 客户端【JDAgent桌面助手】详解(一)主窗口 圆形菜单。。。
没有想象中的简单奥,咋样布局6个按钮坐标才能在正确的对应位置呢,漂亮是漂亮,如果窗口宽度高度改变了,它能等比例改变宽高大小么。[ 本文...]
2.桌面宠物制作详解。。。
哇这个里面的动画是咋弄的呢Gif? wpf好像不支持Gif啊。。[敬请期待...]
3.购物搜索瀑布流展示效果实现与UI虚拟化优化大数据显示。。。
网页瀑布流布局会布局有很多jquery插件,客户端咋实现瀑布流呢。很灵活的样子啊。UI虚拟化是啥东西,他怎么实现了上万条记录显示时候滚动条却一点也不卡,UI占用内存也 没有倍增呢。。[敬请期待...]
4.谈wpf popup控件的windows 8.0下会有啥bug 出现呢。。。
xp与win7下很正常。但windows8.0咋出问题了,代码写法绝对正确问题出在哪里啊,那windows8.1下又会怎样呢 [敬请期待...]
5.购物搜索-商品详情开发过程中遇到的WPF webbrowser控件的一个Bug 与如何解决。。。
购物搜索-商品详情上篇文章中有网友说“厉害,不过下面的内容模块完全可以用网页代替,没必要搞这么麻烦,这么多东西,运行效率也是一个问题”
看来是我做的网页太像客户端了啊。。但是 AllowsTransparency="True"后 wpf 的webbrowser漏bug了。。很棘手啊。咋解决呢[敬请期待...]
6.购物搜索-图片浏览 中图片浏览器 与 鼠标的滚动放大缩小图片。。。
图片浏览器很好看的样子。。。还能鼠标滚轮放大缩小呢,看高清大图嘿嘿。。。[敬请期待...]
内容区域:
这里开始主窗口 圆形菜单制作的过程,首先请大家看看下面的截图,想一想
1.如果你用winform如何开发呢? 如果用wpf怎么开发呢?
2.布局看起来不难做啊。但是真的很简单么?
3.我的窗体不是想金山毒霸哪有的窗口大小宽高固定的,那如果窗口最大化或者改变了宽高,中间的圆形菜单还是原来的大小,岂不是中间那么大区域就这么一个小圈太难看了吧?
大家思考5min后。。继续向下看。。。程序员最享受的是思考过程,静心思考,如果有更好的解决或者实现方法,或者发行我实现的方法有漏洞是留言。。。。
上图:
第一步 布局背景图:
我们先设定好容器gird 为380px 三个正圆形 一个是最外面的蓝色光环,一个是中间的蓝色光环,一个是最内部的有点灰色的圆形,在加一个 中间的小狗 Ok 简单布局就好了:
1 <Grid Height="380" 2 Width="380" 3 Name="menuGrid"> 4 <Ellipse Name="menuRoundBig" 5 Fill="#F4F8FB" 6 HorizontalAlignment="Center" 7 VerticalAlignment="Center" 8 Stroke="#E0E0E0" 9 StrokeThickness="1" 10 Height="380" 11 Width="380"> 12 <Ellipse.Effect> 13 <DropShadowEffect BlurRadius="20" 14 ShadowDepth="0" 15 Color="#52D3EC" /> 16 </Ellipse.Effect> 17 </Ellipse> 18 <Ellipse Name="menuRoundSmall" 19 HorizontalAlignment="Center" 20 VerticalAlignment="Center" 21 Stroke="#E0E0E0" 22 StrokeThickness="0" 23 Height="300" 24 Width="300"> 25 <Ellipse.Effect> 26 <DropShadowEffect BlurRadius="50" 27 ShadowDepth="0" 28 Color="#52D3EC" /> 29 </Ellipse.Effect> 30 <Ellipse.Fill> 31 #DFE2E5 32 </Ellipse.Fill> 33 </Ellipse> 34 <Ellipse Name="menuRoundCenter" 35 HorizontalAlignment="Center" 36 VerticalAlignment="Center" 37 Stroke="#E0E0E0" 38 StrokeThickness="0" 39 Height="300" 40 Width="300"> 41 <Ellipse.Fill> 42 <RadialGradientBrush RadiusX="1" 43 RadiusY="1" 44 GradientOrigin="0.7,0.3"> 45 <GradientStop Color="White" 46 Offset="0"></GradientStop> 47 <GradientStop Color="#DFE2E5" 48 Offset="1"></GradientStop> 49 </RadialGradientBrush> 50 </Ellipse.Fill> 51 </Ellipse> 52 <Image Name="menuCenterimg" 53 Source="/img.png" 54 Height="120" 55 Stretch="Uniform"> 56 </Image> 57 <Canvas Name="MenuCanvas" 58 HorizontalAlignment="Center" 59 VerticalAlignment="Center" 60 Height="340" 61 Width="340"> 62 </Canvas> 63 </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