[Win8]Windows8开发笔记(七):页面样式的相关介绍
2013-03-29 20:35
513 查看
Windows8下的页面样式和CSS非常相似,所有的属性都可以当作样式使用,没有单独的样式。
1.内联样式:就是直接修改控件的样式。
2.页面样式:在根节点下增加
<Page.Resources>
<Style>
<Setter></Setter>
</Style>
</Page.Resources>
下面新建一个项目TestStyle来看一下。
拖拽三个Button做实验:
一种写法是在xaml文件里挨个写上Foreground="xxxxx"这种的,但是以后如果修改每次都要对其进行修改,如果三四个按钮还好办,如果是七八十个,那工作量估计就可观了。
所以我们需要像CSS一样指定样式。
现在在xaml里面新建一个样式:
可以看到,button的字体已经变成了红色:
当然Setter也可以设置很多次。
Resources是配置的一个属性,上面的操作相当于设定配置类的Resouces属性。
那如果想要某两个button变成紫色怎么操作呢?
可以给这个Style样式起个名字:key,然后样按钮使用这个样式即可。
比如添加一个Style:
那么Button在调用Style的时候也要注明Resource的key值:
这样效果就是这样的:
和CSS一样,除了这样在xaml里面直接定义,也可以定义资源字典来调用样式。
新建一个文件,选择 资源字典:
默认的样式文件内容如下:
我们可以在里面添加自定义的样式,比如Style2:
那么如何在xaml中引用样式呢?
如下代码可以实现:
这样就可以使用在MyDictionary中定义的样式们了:
当然也可以去App.xml,或者在StantardStyles.xaml里面,这样所有的页面都可以使用StandardStyles里面的样式了。
1.内联样式:就是直接修改控件的样式。
2.页面样式:在根节点下增加
<Page.Resources>
<Style>
<Setter></Setter>
</Style>
</Page.Resources>
下面新建一个项目TestStyle来看一下。
拖拽三个Button做实验:
<Button Content="Button" HorizontalAlignment="Center" Margin="0,0,0,-100" VerticalAlignment="Center"/> <Button Content="Button" HorizontalAlignment="Center" Margin="0,0,0,100" VerticalAlignment="Center"/> <Button Content="Button" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center"/>
一种写法是在xaml文件里挨个写上Foreground="xxxxx"这种的,但是以后如果修改每次都要对其进行修改,如果三四个按钮还好办,如果是七八十个,那工作量估计就可观了。
所以我们需要像CSS一样指定样式。
现在在xaml里面新建一个样式:
<Page.Resources> <!--这个样式用于button类型的控件,必须强制--> <Style TargetType="Button"> <Setter Property="Foreground" Value="Red"/> </Style> </Page.Resources>
可以看到,button的字体已经变成了红色:
当然Setter也可以设置很多次。
Resources是配置的一个属性,上面的操作相当于设定配置类的Resouces属性。
那如果想要某两个button变成紫色怎么操作呢?
可以给这个Style样式起个名字:key,然后样按钮使用这个样式即可。
比如添加一个Style:
<Style TargetType="Button"> <Setter Property="Foreground" Value="Red"/> </Style> <Style TargetType="Button" x:Name="Style1"> <Setter Property="Foreground" Value="Blue"/> </Style>
那么Button在调用Style的时候也要注明Resource的key值:
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}"> <Button Content="Button" HorizontalAlignment="Center" Margin="0,0,0,-100" VerticalAlignment="Center"/> <Button Content="Button" HorizontalAlignment="Center" Margin="0,0,0,100" VerticalAlignment="Center"/> <Button Style="{StaticResource Style1}" Content="Button" HorizontalAlignment="Center" Margin="0,0,0,0" VerticalAlignment="Center"/> </Grid>
这样效果就是这样的:
和CSS一样,除了这样在xaml里面直接定义,也可以定义资源字典来调用样式。
新建一个文件,选择 资源字典:
默认的样式文件内容如下:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestStyle"> </ResourceDictionary>
我们可以在里面添加自定义的样式,比如Style2:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:TestStyle"> <Style TargetType="Button" x:Key="Style2"> <Setter Property="Background" Value="White" /> </Style> </ResourceDictionary>
那么如何在xaml中引用样式呢?
如下代码可以实现:
<Page.Resources> <ResourceDictionary Source="MyDictionary.xaml"></ResourceDictionary> </Page.Resources>
这样就可以使用在MyDictionary中定义的样式们了:
当然也可以去App.xml,或者在StantardStyles.xaml里面,这样所有的页面都可以使用StandardStyles里面的样式了。
相关文章推荐
- [Win8]Windows8开发笔记(七):页面样式的相关介绍
- [Win8]Windows8开发笔记(十一):动画故事版 StoryBoard的入门介绍
- [Win8]Windows8开发笔记(四):画刷介绍以及如何实现实现歌词动态变色显示
- [Win8]Windows8开发笔记(六):页面导航的基础与深入
- [Win8]Windows8开发笔记(十一):动画故事版 StoryBoard的入门介绍
- [Win8]Windows8开发笔记(三):代码读取图片动态生成页面
- jforum二次开发相关笔记——(一)页面请求机制
- 【裸机开发笔记】6410的系统时钟设置(中)---相关寄存器介绍
- jforum二次开发相关笔记——(一)页面请求机制
- 【Android 应用开发】Android 网络编程 API笔记 - java.net 包 权限 地址 套接字 相关类 简单介绍
- jforum二次开发相关笔记——页面请求机制
- [Win8]Windows8开发笔记(二):三种基础的布局控件
- 【裸机开发笔记】6410的系统时钟设置(中)---相关寄存器介绍
- [Win8]Windows8开发笔记(九):ListView的使用和数据绑定
- [Win8]Windows8开发笔记(十二):动画中Transition的使用
- [Win8]Windows8开发笔记(一):猜数字大小的游戏
- [Win8]Windows8开发笔记(十):FlipView和自定义值转换器
- iOS开发笔记之四十八——gem、brew、rvm、bundle的相关介绍
- [Win8]Windows8开发笔记(八):数据绑定的基础
- TERSUS画画一样开发软件 显示相关处理元件介绍-页面行为元件2