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

原创 2012年03月30日 21:11:27

Web开发中,我们通过CSS来控制页面元素的样式,一般常用三种方式:

1.       内联样式表:即直接设置元素的style属性

2.       嵌入样式表:即在html页面上写一个<style>……..</style> 代码段,然后设置元素的class 属性

3.       外部样式表:即写一个独立的.css 文件,然后再html页面上引入该文件,然后设置元素的class属性

 

具体如何操作,这里就不说了。不懂的去百度一把,绝对会出现一大坨。

 

同样的,在WP7开发中,也有类似以上几种方式设置控件的样式——开发平台可以千差万别,编程思想都是大同小异的。

 

 一,内联样式:

直接设置控件的 Height WidthForegroundHorizontalAlignmentVerticalAlignment 等属性。以设置一个Botton控件的样式为例,如:

    <Grid x:Name="ContentPanel" >
            <Button Content="Button" Name="btnDemo" 
                    Height
="72" 
                    Width
="150" 
                    Foreground
="White" 
                    Background
="Blue" 
                    HorizontalAlignment
="Left" 
                    VerticalAlignment
="Top" 
                    Margin
="170,132,0,0" 
                    Grid.Row
="1" />
          </Grid>

 这种方式比较简单,但是代码不能复用。

 

 二,嵌入样式:

在页面<phone:PhoneApplicationPage.Resources节点下添加样式,然后在需要的控件上设置Style 属性。还是以上面那个Botton控件为例。 

     1,在页面<phone:PhoneApplicationPage.Resources>节点下添加一个Key值叫“BtnStyle”的样式

  <phone:PhoneApplicationPage.Resources>
        <Style x:Key="BtnStyle"  TargetType="Button">
            <Setter Property="Height" Value="72" />
            <Setter Property="Width" Value="150" />
            <Setter Property="Foreground" Value="White" />
            <Setter Property="Background" Value="Blue" />
            <Setter Property="HorizontalAlignment" Value="Left" />
            <Setter Property="VerticalAlignment" Value="Top" />
        </Style>
    </phone:PhoneApplicationPage.Resources>
      2, 设置Botton 控件的Style 属性为 "{StaticResource BtnStyle}" 
   <Grid x:Name="ContentPanel" >
            <Button Content="Button" Name="btnDemo" 
                   Style
="{StaticResource BtnStyle}"
                    Margin
="170,132,0,0"  />
   </Grid>

 

解释一下,TargetType="Button" 指定了该样式适用于Botton类型的控件Key="BtnStyle" 如果不设置该值,则该样式将适用于所有的Botton 控件,而设置了其值为“BtnStyle,则只用于设置了  Style="{StaticResource BtnStyle}" Botton控件。这就好比CSS中的元素选择器和类选择器。


wp7开发中,这种方式可以使得单个页面上的控件能够复用一个样式,比第一种方式面向对象了一步。 

三,外联样式:

1,新建一个.xaml资源文件,/Resources/BtnStyle.xaml

2, BtnStyle.xaml文件里编写样式代码

BtnStyle.xaml: 
<ResourceDictionary
  
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:System
="clr-namespace:System;assembly=mscorlib">
    <Style x:Key="BtnStyle" TargetType="Button">
        <Setter Property="Height" Value="72" />
        <Setter Property="Width" Value="150" />
        <Setter Property="Foreground" Value="White" />
        <Setter Property="Background" Value="Blue" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <Setter Property="VerticalAlignment" Value="Top" />
    </Style>
</ResourceDictionary>

    
    3,在App.xaml文件的<Application.Resources>

             或者普通页面的<phone:PhoneApplicationPage.Resources>

             或者用户控件的 <UserControl.Resources>  节点下

            添加相应的ResourceDictionary,配置引用BtnStyle.xaml:

app.xaml:
    <Application.Resources> 
        
         <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/BtnStyle.xaml"/>
            <!--<ResourceDictionary Source="Resources/BtnStyle2.xaml"/>
                <ResourceDictionary Source="Resources/BtnStyle3.xaml"/>
-->
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
        
    </Application.Resources>
或者MainPage.xaml:
<phone:PhoneApplicationPage.Resources>

        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Resources/BtnStyle.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>

</phone:PhoneApplicationPage.Resources>

 <ResourceDictionary.MergedDictionaries>节点下可以添加多个资源文件

这种方式相比前面两种使得样式和结构又更进一步分离了。

App.xam引用,是全局的,可以使得一个样式可以在整个应用程序中能够复用。在普通页面中引用只能在当前页面上得到复用。


     4, 
设置Botton 控件的Style 属性为"{StaticResource BtnStyle}" 和上面的一样。

 

 四,用C#代码动态加载资源文件并设置样式

     1,新建资源文件:同上面的12两步。

    2,在后台编写代码           

     ResourceDictionary resourceDictionary = new ResourceDictionary();

     Application.LoadComponent(resourceDictionary, new Uri("/PhoneApp1;component/Resources/BtnStyle.xaml", UriKind.Relative));
     Application.Current.Resources.MergedDictionaries.Add(resourceDictionary);
     //以上几行代码表示将我们自定义的样式加载到应用程序的资源字典中。
     this.btnDemo.SetValue(Button.StyleProperty, Application.Current.Resources["BtnStyle"]);


原文地址:http://www.cnblogs.com/xumingxiang/archive/2012/03/23/2413342.html 

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

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

Sass学习之路(4)——不同样式风格的输出方式

因为每个前端工程师编写代码的风格都不太一样,所以Sass的编译也非常人性化的提供了不同风格的编译方式,主要分为4种。     比如下面这一段Sass代码,我们来看看在不同风格下,会编译成什么样吧: ...
  • u013034014
  • u013034014
  • 2016年12月12日 14:52
  • 1476

四种CSS样式表的引入方式

代码: CSS样式表
  • linhaiyun_ytdx
  • linhaiyun_ytdx
  • 2016年09月19日 13:23
  • 891

Windows Phone Style样式的四种使用

转自:http://www.silverlightchina.net/html/zhuantixilie/winphone7/2012/0417/15362.html
  • gf771115
  • gf771115
  • 2014年07月13日 17:59
  • 554

继承UITableViewController,更改tableview样式

// 继承UITableViewController,更改tableview样式 - (instancetype)initWithStyle:(UITableViewStyle)style ...
  • sinat_22545219
  • sinat_22545219
  • 2017年02月10日 10:39
  • 2950

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

转自:http://www.silverlightchina.net/html/zhuantixilie/winphone7/2012/0417/15362.html 在Web开发中,我们通...
  • gf771115
  • gf771115
  • 2014年05月08日 11:10
  • 655

Andoroid中控件引用style样式

布局文件中引用样式: 在res----values----styles.xml文件中 match_parent 50dp @c...
  • zhaihaohao1
  • zhaihaohao1
  • 2016年06月07日 17:24
  • 1350

css_html_四种样式

html文档与css文档关联的方式     1. link标记的使用         2. style 元素中包含的css代码     3. @import指令     @...
  • xiongcz1991
  • xiongcz1991
  • 2018年01月11日 16:31
  • 14

style和className

元素.style.属性 = xxx,是修改行间样式,之后再修改className就会没有效果. 先变红后变绿色就没有问题,但是先变绿色再变红色就会出现问题,style的属性比className的优先...
  • dai_xiangjun
  • dai_xiangjun
  • 2016年03月02日 19:31
  • 983

style与className

stylestyle加的是行间样式 style取的是行间样式 取值代码如下:var oDiv=document.getElementById('div1'); alert(oDiv.style.b...
  • JZ_YouMayFly
  • JZ_YouMayFly
  • 2017年08月13日 18:07
  • 195
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WP7开发学习(4):Style样式的四种使用
举报原因:
原因补充:

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