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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值