标签: UI

在 JQuery Mobile 中实现瀑布流图库布局

先来看在Windows系统的1080P显示器中显示的效果: 这个整合方式几乎没有现存的实例,是自己总结出来的方法,在此记录下来。 首先访问Masonry官网下载masonry.pkgd.min.js:http://masonry.desandro.com/ 将其整合到项目中,在页面中引入。 初始化id变量,让页面每次加载时的id都不同,避免 Ajax 加载时id重复造成难以察觉的错误。 var id = “gallerycontent” + Guid.NewGuid(); 采用HTML初始化方式进行初始化: <div id=”@id” style=”margin: 50px auto;” class=”js-masonry” data-masonry-options='{ “isFitWidth”: true, “itemSelector”: “.post” }’> …. …. …. </div> 以上为外部容器代码。id属性使用前面的变量;style属性和后面的isFitWidth选项共同实现了容器自动水平方向居中功能;我没有像Masonry入门教...

更多

WPF动态改变主题颜色

国内的WPF技术先行者周银辉曾介绍过如何动态改变应用程序的主题样式,今天我们来介绍一种轻量级的改变界面风格的方式——动态改变主题色。 程序允许用户根据自己的喜好来对界面进行配色,这种技术在很多软件中都有应用,比如这款名为AirPlay的音乐播放器软件: 下面我们就来自己动手实现这种技术: 首先在App.xaml文件中定义一个键值为“color”的单色笔刷,这个笔刷就是可以被用户改变的动态资源: <SolidColorBrush x:Key=“color” Color=“SkyBlue” /> 然后来设计这样一个界面: 我们让用户通过4个滑块来分别定制颜色的A、R、G、B值,其完整代码为: <Grid>     <Grid.RowDefinitions>         <RowDefinition Height=“28” />         <RowDefinition Height=“28” />         <Row...

更多

WPF相关文章索引 (持续更新中)

  应一些朋友的要求,整理出自己所写的WPF相关文章索引,回首一看,也真写了不少了呵。   这个博客的建立初衷就是为了分享和总结我在WPF方面的所学,此后还会继续保持更新的。 WPF界面设计技巧系列   WPF界面设计技巧(1)—不规则窗体图文指南   WPF界面设计技巧(2)—自定义漂亮的按钮样式   WPF界面设计技巧(3)—实现不规则动画按钮   WPF界面设计技巧(4)—自定义列表项样式   WPF界面设计技巧(5)—自定义列表项呈现内容   WPF界面设计技巧(6)—玩玩数字墨水手绘涂鸦   WPF界面设计技巧(7)—模拟电梯升降的缓动动画   WPF界面设计技巧(8)—自制山寨版CheckListBox   WPF界面设计技巧(9)—使用UI自动化布局   WPF界面设计技巧(10)-样式的继承   WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心     用XAML做网页系列 用XAML做网页!!—开篇 ...

更多

用XAML做网页!!—导航栏

    这次要完成的是导航栏,这是页面中比较复杂的区域。   先在 Microsoft Expression Design 中绘制导航栏的背景图案:       导出为barback.xaml,增加其填充规则:       ViewportUnits=”Absolute” Viewport=”0,0,15,13.86″ TileMode=”Tile”     完成后的代码如下:     Code <?xml version=”1.0″ encoding=”utf-8″?> <ResourceDictionary xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”&nbsp...

更多

用XAML做网页!!—广告展示区

    此次我们来进行广告展示区块的制作。   首先在Show区块中去掉原来设置的背景色,加入新的渐变背景设定:       <Grid.Background> <LinearGradientBrush StartPoint=”0,0″ EndPoint=”0,1″> <GradientStop Color=”#FFE2C7BC” Offset=”1″ /> <GradientStop Color=”#FFD0D0D0″ Offset=”0.7″ /> <GradientStop Color=”#FFF5F5F5″ Offset=”0″ /> </LinearGra...

更多

用XAML做网页!!—页头

    接续上次进度,我们此次来制作页头。   首先要实现两侧边缘的美化,如下图所示:     在边缘处有一层朦胧的亮度反光效果,这也是通过简单的渐变实现的,而且我们在后面的每个区块中都要实现类似的效果,所以现在就将所需的资源一起创建了。   在Grid中创建一个资源标记,并设置4个笔刷资源:     Code <Grid.Resources> <LinearGradientBrush x:Key=”LightLeft” StartPoint=”0,0″ EndPoint=”1,0″> <GradientStop Color=”#00FFFFFF” Offset=”0.1″ /> <GradientStop Color=”#08FFFFFF” O...

更多

用XAML做网页!!—框架

    上一篇中我进行了一下效果展示和概述,此篇开始将重现我此次尝试的步骤,我想大家通过阅读这些步骤,可以了解到XAML网页排版的方法。   下面就开始编写XAML,首先来定义一下页面的属性:     <Page   xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”   xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”   WindowTitle=”MailMail”   FontFamily=”微软雅黑”   Background=”#FF424242″   SnapsToDevicePixels=”True”></P...

更多

用XAML做网页!!—开篇

这几日一直没发表新文章,一来是因为事比较多,二来就是我在研究使用XAML挑战传统HTML来做网页,这很可能是在全球的首次尝试,至少我从未找到任何可供参考的相关资料。 我对这次挑战的结果打7分: XAML在页面布局、图形、动画及可控性方面的表现堪称完美,我甚至根本想不出来有什么能与之平分秋色; 兼容性方面,XAML通吃所有Windows平台的各种浏览器,它实际上都是由后台的那个叫“Windows 演示基础主机”来解析和呈现的,所以只要是装有.Net 3.0的系统,不管什么浏览器都可以看,而且看起来都一样(非IE7的话会自动加一个导航条用来控制前进和后退); 对于XAML功能性测试不在本次挑战的范围内,因为我为挑战HTML而完全使用XAML来创制,没有加入任何程序代码,但WPF浏览器应用程序的功能性之强大是显而易见的,说白了它就是一个套着浏览器马甲的Windows桌面程序,这显然比JS等脚本语言能实现的功能要多得多; XAML的呈现速度相比HTML来说存在差距,这主要体现在页面的载入和刷新时的等待上,不需要任何测试工具,你就能了解到它们的载入所需时间差异,但好在延迟不算太大,且对于XAML...

更多

WPF界面设计技巧(11)-认知流文档 & 小议WPF的野心

    流文档是WPF中的一种独特的文档承载格式,它的书写和呈现方式都很像HTML,它也几乎具备了HTML的绝大多数优势,并提供了更强的编程支持及对WPF其他元素的兼容。   直接来看代码吧,需要讲解的地方比较多,我就直接注释在代码里了,看起来更方便些:     Code <Window x:Class=”流文档.Window1″     xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”     xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”     Title=”Window1″ Height=”376″ Width=&#...

更多