CaseStudy(showcase)界面篇-desing设计界面

做silvelight也有一段时间了,相册、游戏,刚刚完成的showcase这个小程序算是一个阶段了。这里就以showcase这个项目来做一下CaseStudy。

界面篇-desing设计界面

首先先说明下,我是一个程序员所以请不要在设计方面做评价。我在这里要讲的是如何使用Design这个工具来做设计。

简单的说明一下,这是一个作为案例展示的程序。功能方面设计的也比较简单。就是类别、项目和项目的简介。

ok先看看最终要实现的效果。

把页面中要用到的元件拆解来一个一个制作。

最左边区域是要能够自适应高度的。所以用矩形来做比较方便。

画一个矩形,去除边线。

做一个线性填充。就能够出现有一个亮色边线的效果。

放大3倍后的效果

下来制作阴影。同样还是用矩形。这样在放到blend中后方便拉伸。

黑色100~0的渐变填充。

把阴影层放到刚才制作的矩形下边,然后分组到一起。

制作上3个一个颜色逐渐加深。放到一起的效果:

loading条就是在刚才制作的上边放一个黄色的巨型。然后组合。

下来制作滚动条上下的三角形。

Design这个工具没有直接提供做三角形的工具。如何制作一直角三级型呢? 请看下边的步骤。

先画一个正方形。旋转45度。

再制作一个长方形放到矩形的正上方。居中对齐。

然后选择下减上。

得到

也可以这样:

这样就得到了需要的三角形。

下来看看如何制作这个图形。

这个其实用两个渐变的直线就可以完成。只是渐变的颜色不同而已。


好了showcase这个项目中用到的界面都制作出来了。

 

 

作者:nasa
出处:nasa.cnblogs.com
联系:nasa_wz@hotmail.com
QQ:12446006

时间: 2024-09-26 04:33:44

CaseStudy(showcase)界面篇-desing设计界面的相关文章

CaseStudy(showcase)数据篇-Loading的制作

做silvelight也有一段时间了,相册.游戏,刚刚完成的showcase这个小程序算是一个阶段了.这里就以showcase这个项目来做一下CaseStudy. 数据篇-Loading的制作 silverlight自带了一个loading.但是由于界面的需求可能需要定制化一下.这里我的思路是做两个sl文件用其中一个去加载另外一个.也就是说有两个xap文件一个是主要的也就是你做的silverlight程序文件,另一个小的是用来做loading的. 参考文章: 技巧:在Silverlight中如何

CaseStudy(showcase)布局篇-如何做一个自适应窗口大小的布局

做silvelight也有一段时间了,相册.游戏,刚刚完成的showcase这个小程序算是一个阶段了.这里就以showcase这个项目来做一下CaseStudy. 布局篇-如何做一个自适应窗口大小的布局 Canvas是对其子控件绝对定位的子控件需要设置宽高.Grid而是对其子控件设置上下左右边距的子控件不一定需要设置宽高直接用Auto属性即可大小受父控件影响. 了解了特性及可以开始制作了.首先先从最外层的UserControl做起,在这里给他一个固定的宽高.这个宽高在发布的时候是可以改变的.主要

CaseStudy(showcase)布局篇-列表的排放与遮罩

做silvelight也有一段时间了,相册.游戏,刚刚完成的showcase这个小程序算是一个阶段了.这里就以showcase这个项目来做一下CaseStudy. 布局篇-列表的排放与遮罩 有数据就肯定会有列表,这里就写一下我使用的心得. 做列表这里我选用的是StackPanel,它可以横向或纵向排列.同样若是纵向排列.可以设置宽度一定.高度Auto.如果需要设置间距,那就在它的子控件设置. 重点说一下对StackPanel的遮罩. 这个做遮罩首先先把StackPanel组合到一个Canvas中

CaseStudy(showcase)类库篇-用agTweener来实现动画效果

做silvelight也有一段时间了,相册.游戏,刚刚完成的showcase这个小程序算是一个阶段了.这里就以showcase这个项目来做一下CaseStudy. 类库篇-用agTweener来实现动画效果 项目地址:http://www.codeplex.com/agTweener 许多做flash/flex开发的人都知道在flash中有一个Tween类来帮助程序员用编程的方式来构建动画.不用每一次都在时间轴上做.silverlight也一样在sl中有一个agTweener的第三方类库. 我的

CaseStudy(showcase)数据篇-加载图片

做silvelight也有一段时间了,相册.游戏,刚刚完成的showcase这个小程序算是一个阶段了.这里就以showcase这个项目来做一下CaseStudy. 数据篇-加载图片 beta1到beta2中加载图片的方法有些改变.         private void LoadImage(String MediaUrl)         {             Uri uri = new Uri(HtmlPage.Document.DocumentUri, MediaUrl);     

CaseStudy(showcase)布局篇-全屏效果

        public Page()         {             InitializeComponent();             App.Current.Host.Content.Resized += new EventHandler(Content_Resized);             App.Current.Host.Content.FullScreenChanged += new EventHandler(Content_FullScreenChanged

CaseStudy(showcase)界面篇-导出xaml以及放入Blend的技巧

做silvelight也有一段时间了,相册.游戏,刚刚完成的showcase这个小程序算是一个阶段了.这里就以showcase这个项目来做一下CaseStudy. 界面篇-导出xaml以及放入Blend的技巧 选中刚才制作好的元件,右键导出. 导出的设置如下图所示: 将到出的XAML复制出来.不要复制最外层的节点,复制里边的就可以了.所有的部件都是用这种方法导出. 吧代码粘贴入blend中.然后右键选择后做组合.这里有两个常用的.一个Grid一个Canvas. 每一个都有不同的用法.具体如何选择

mfc界面美化-MFC的Button控件设计界面

问题描述 MFC的Button控件设计界面 新手求救,花了一天做button按钮的设计还做不出来,能改变颜色和大小就好,最好能有源代码,这样我才看的懂 解决方案 MFC_Button控件MFC Button控件的背景色MFC Button控件的背景色 解决方案二: CButton有个SetBitmap函数,想要什么图案自己画,大小是按钮的基本参数,很容易设置. 解决方案三: 要重绘啊,自己用代码来生成按钮

设计界面字体易用性测试用例要从那些方面考虑?

问题描述 设计界面字体易用性测试用例要从那些方面考虑? 界面字体易用性测试应从哪些方面考虑?能不能给几个测试用例做样板? 解决方案 主要是测试不同显示器类型,不同尺寸的显示屏,不同界面字体的可读性.比如说在iPhone 6这种高分辨率的屏幕上,你的字体是否偏小.