wp7样式的关联

转载 2012年03月30日 22:16:01

最近几个朋友(非IT行业的朋友)要买手机,我就问了一下:有考虑买wp7的吗。朋友:不买,wp7的界面太丑了。

当时我听了之后心里一下子凉了一大半。如果用户都这样想的话,wp7的命运真是悲剧啊。希望wp7的程序员多关注一下UI吧。用户是看不到功能代码的,如果UI进入不了他们的眼,那么何谈进入他们的心呢。

siliverlight不是Winfrom,拖一个Button然后写事件的方式去做应用是行不通的。

Metro也是个很不错的UI方案,我也挺喜欢,但是我是不大会利用Metro,尤其是用微软给提供的Button做应用(其它控件还算可以)。

前几天写了天气预报的界面,里面样式很多,并没有和控件分离开来,所以显得很冗余。毕竟那时候还不是很熟悉siliverlight样式,所以只能这样做。建议代价做界面要用Blend。

做过web的都知道DIV+CSS,给页面元素关联样式有三种方式:

1.内联样式表:就是在每个元素里面写style。优点就是灵活,给指定的元素添加样式。缺点是重用性很差,如果大量的元素样式相同的话,每个都要写一遍,会让重复代码很多。

2.嵌入样式表:在html页面上写一个<style></style> 代码段,然后在里面写样式表,然后用相应的类选择符或者是ID选择符去给元素关联样式。优点是在很大程度上解决了样式重用的问题。缺点是样式很多时,还是会使这个页面代码很多,不便于分类。

3.外部样式表:就是把嵌入样式表<style></style> 代码段里面的内容写到一个独立的.css文件里面。然后把所需要的样式表文件关联到相应的页面去。

 

先上效果图:

33

wp7里面对元素添加效果不仅仅只是样式那么简单,而且还会有视觉状态。这里只写样式。

1.内联样式:

拖来个Button,你尽情得设置里面的属性就可以了。或者是用Blend右边的属性管理器设置。image

2.嵌入样式:

在<phone:PhoneApplicationPage.Resources>标签内写样式,然后用控件去调用,代码如下

   1:  <phone:PhoneApplicationPage.Resources>
   2:          <Style x:Key="ButtonStyle"  TargetType="Button">
   3:              <Setter Property="Content" Value="嵌入样式"/>
   4:              <Setter Property="Height" Value="100" />
   5:              <Setter Property="Width" Value="200" />
   6:              <Setter Property="Margin" Value="50,170,0,0"/>
   7:              <Setter Property="Foreground" Value="Red" />
   8:              <Setter Property="Background" Value="Blue" />
   9:              <Setter Property="HorizontalAlignment" Value="Left" />
  10:              <Setter Property="VerticalAlignment" Value="Top" />
  11:          </Style>
  12:      </phone:PhoneApplicationPage.Resources>

 

Button控件调用:

<Button Style="{StaticResource ButtonStyle}"/>

3.外部样式

首先添加外表样式表文件

image

image

如果用Blend添加的话,会自动把这个资源字典引入到程序。

会自动在app.xaml里面添加如下代码

   1:  <Application.Resources>
   2:          <ResourceDictionary>
   3:              <ResourceDictionary.MergedDictionaries>
   4:                  <ResourceDictionary Source="Styles/Style1.xaml"/>
   5:              </ResourceDictionary.MergedDictionaries>
   6:          </ResourceDictionary>
   7:      </Application.Resources>

如果不是用Blend的话需要自己去关联。

也可以把这个资源文件之关联到某一页面。比如之关联到MainPage.xaml那就只在本页面的<phone:PhoneApplicationPage.Resources>部分添加如下代码:

   1:  <ResourceDictionary>
   2:   
   3:              <ResourceDictionary.MergedDictionaries>
   4:   
   5:                  <ResourceDictionary Source="Styles/Style1.xaml"/>
   6:   
   7:              </ResourceDictionary.MergedDictionaries>
   8:   
   9:          </ResourceDictionary>

后台动态关联资源文件并对控件绑定样式。

   1:  ResourceDictionary resourceDictionary = new ResourceDictionary();
   2:  Application.LoadComponent(resourceDictionary, new Uri("/WindowsPhoneApplication1;component/Styles/Style2.xaml", UriKind.Relative));
   3:  Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);
   4:  this.btn1.SetValue(Button.StyleProperty, Application.Current.Resources["ButtonStyle2"]);

 

源代码下载地址http://download.csdn.net/detail/wildfeng04/4186707

我做的手机归属地查询应用所有的样式用的是第三种,外部样式。除了央视之外还有视觉状态。

下次的博文会介绍。

1

手机归属地查询源代码:http://www.cnblogs.com/wildfeng/archive/2012/03/21/2409174.html


转自

http://www.cnblogs.com/wildfeng/archive/2012/03/30/2425248.html

黑马程序员_学习日记84_814WP7开发(画刷Brush、变换Transform、样式、换肤)

1、画刷: (1)Silverlight的界面都是用画刷(Brush)画出来的,可以改变不同的画刷画不同的内容。 SolidColorBrush:实心颜色画刷 LinearGradientBru...

WP7中,修改button样式并重用

在Wp7中按钮的默认效果是这样的: 黑色主题普通/按下   白色主题普通/按下   普通状态的背景色前景很容已通过修改Background、Foreground、BorderBr...

WP7开发学习(4):Style样式的四种使用

在Web开发中,我们通过CSS来控制页面元素的样式,一般常用三种方式: 1.       内联样式表:即直接设置元素的style属性 2.       嵌入样式表:即在html页面上写一个...

wp7样式代码

  • 2012年03月30日 14:41
  • 66KB
  • 下载

防止你的WP7手机偷跑流量——系统设置篇

不知道大家的WP7有没有偷跑流量的问题,笔者可是深受其苦,10月底到11月初光流量费就够买半个i917了。 其实这也不能怪微软,老美子那边流量可不想咱们这边按K收费。好啦,牢骚少发,其实我们的WP7...

WP7入门-XAML语法介绍

WP7入门-XAML语法介绍   http://www.silverlightchina.net/html/zhuantixilie/winphone7/2011/0210/5267.html ...

WP7 网络操作(1) HttpWebRequest基本的GET请求

一、预备知识:   什么是Get请求?什么是Url?请直接Baidu,Google,Bing。 二、WP7的网络操作:非阻塞的异步操作(暂时还没有看到直接的同步的操作的方式)。 三、主要...

[观点]从iOS-Android-WP7开发环境搭建感受平台风格

基本上来说我一名iOS平台的程序员,其他的平台基本都没有怎么接触过。不过开发环境倒是都搭建好了。弄好开发环境自后倒是颇有一点小感慨,不同平台的风格,在搭建开发环境上都有自己的体现。着实挺有意思的。 ...

<WP7>(三)手把手教你写天气预报程序:运用WebClient获取天气和json数据解析

上一节我们练习了UserControl,这次我们就要把UserControl运用到实际的布局上面来。           首先,把MainPage中的原来的测试UserControl的代码删除,在C...

<cocos2d-x for wp7>使用cocos2d-x制作基于Tile地图的游戏:碰撞检测和收集物品(二)

本教程基于子龙山人翻译的cocos2d的IPHONE教程,用cocos2d-x for XNA引擎重写,加上我一些加工制作。教程中大多数文字图片都是原作者和翻译作者子龙山人,还有不少是我自己的理解和加...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:wp7样式的关联
举报原因:
原因补充:

(最多只允许输入30个字)