[Win8]Windows8开发笔记（七）：页面样式的相关介绍

Windows8下的页面样式和CSS非常相似，所有的属性都可以当作样式使用，没有单独的样式。

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里面的样式了。