Silverlight4Beta之Style的改进

这个改进虽然不大，但是个人认为绝对意义重大。且听俺慢慢道来…

玩过WPF的人再搞SL肯定觉得不爽。单说Style的定义，SL中没有隐式定义，也就是说某个控件要想引用定义好的Style就必须要写Style="{StaticResource style1}" 而那个定义的Style必须有x:key="style1"，这太令人不爽了！还好群众的呼声加上微软的自我反省使得sl4beta出现之际就解决了这个烦人的问题。

（当然，WPF中早就可以这么做）

以上是牢骚，以下步入正题

做个例子，我们希望在同一个Grid中的Button都是蓝色，另外一个Grid中的Button为蓝色

<UserControl x:Class="SilverlightApplication14.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <StackPanel   
        x:Name="layoutRoot">
        <Grid   
            Background="White">
            <Grid.Resources>
                <Style   
                    TargetType="Button">
                    <Setter   
                        Property="Background"
                        Value="Blue" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button   
                Content="Button 1" />
            <Button   
                Grid.Row="1"
                Content="Button 2" />
        </Grid>
        <Grid   
            Background="White">
            <Grid.Resources>
                <Style   
                    TargetType="Button">
                    <Setter   
                        Property="Background"
                        Value="Red" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button   
                Content="Button 3" />
            <Button   
                Grid.Row="1"
                Content="Button 4" />
        </Grid>
    </StackPanel>

</UserControl>  

注意，代码中的每个Style定义都没有x:Key，这样我们便隐式的将Style应用于所有适用的（其TargetType指定的）控件之上了。看图

也就是说,通过此方法，我们终于可以定义全局的控件样式而不用再写那些又臭又长的StaticeResource…了。

如果我们有多个隐式Style并且指定同一类型的控件（如TargetType="Button"），sl4并不会将它们的定义合并在一起：（ 比如我们在UserControl级定义一个Style使得所有其作用的控件的FontSize等于36：

<UserControl.Resources>
    <Style     
    TargetType="Button">
        <Setter     
                Property="FontSize"     
                Value="36" />
    </Style>
</UserControl.Resources>  

运行后你会发现这个Style并未生效。不过隐式定义的Style仍然可以使用BaseOn指定其要继承的Style定义。

<Style  TargetType="Button"  
        BasedOn="{StaticResource myStyle}">
    <Setter Property="Background"  
            Value="Blue" />
</Style>  

<Grid.Resources>
    <Style  TargetType="Button"  
            BasedOn="{StaticResource myStyle}">
        <Setter  Property="Background"  
                 Value="Red" />
    </Style>
</Grid.Resources>  

这样就可以了，看图：

如果一个控件的样式被一个显示定义的Style所定义，那么它不会接受任何隐式Style的定义，最终代码如下：

<UserControl x:Class="SilverlightApplication14.MainPage"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    mc:Ignorable="d"  
    d:DesignHeight="300" d:DesignWidth="400">

    <UserControl.Resources>
        <Style  
            x:Key="myStyle" TargetType="Button">
            <Setter  
                Property="FontSize"  
                Value="36" />
        </Style>
    </UserControl.Resources>

    <StackPanel  
        x:Name="layoutRoot">
        <Grid  
            Background="White">
            <Grid.Resources>
                <Style  
                    TargetType="Button"  
                    BasedOn="{StaticResource myStyle}">
                    <Setter  
                        Property="Background"  
                        Value="Blue" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button  
                Content="Button 1" />
            <Button  
                Grid.Row="1"  
                Content="Button 2" />
        </Grid>
        <Grid  
            Background="White">
            <Grid.Resources>
                <Style  
                    TargetType="Button"  
                    BasedOn="{StaticResource myStyle}">
                    <Setter  
                        Property="Background"  
                        Value="Red" />
                </Style>
            </Grid.Resources>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>
            <Button  
                Content="Button 3" />
            <Button  
                Grid.Row="1"  
                Content="Button 4"  
                Style="{StaticResource myStyle}"/>
        </Grid>
    </StackPanel>

</UserControl>  

Button4仍然使用默认的背景颜色

总的来说，大爽！