Silverlight中样式的用法

概述 Silverlight中的样式写法与普通的CSS有异曲同工之处，分为内联样式和全局样式。 内联样式是在XAML中定义控件样式，唯一不方便。eg：    <StackPanel  Orientation="Horizontal" HorizontalAlignment="Center"  VerticalAlignment="Center" Grid.Row="1">             <B

 Silverlight中的样式写法与普通的CSS有异曲同工之处，分为内联样式和全局样式。
内联样式是在XAML中定义控件样式，唯一不方便。eg：

   <StackPanel  OrIEntation="Horizontal" HorizontalAlignment="Center"  VerticalAlignment="Center" GrID.Row="1">
            <button Content="播放" WIDth="100" Height="60" FontSize="16" Foreground="Green" Background="Red" FontFamily="Arial"  margin="10"
                    name="btnPlay" Click="btnPlay_Click" />
            <button Content="暂停" WIDth="100" Height="60" FontSize="16" Foreground="Green" Background="Red" FontFamily="Arial"  margin="10"
                    name="btnPause"    Click="btnPause_Click" />
            <button Content="停止" WIDth="100" Height="60" FontSize="16" Foreground="Green" Background="Red" FontFamily="Arial"
                    name="btnStop"  Click="btnStop_Click" />
            <button Content="静音" WIDth="100" Height="60" FontSize="16" Foreground="Green" Background="Red" FontFamily="Arial" 
                    name="btnNoVoice"  margin="10" Click="btnNoVoice_Click" />
            <SlIDer  name="VoiceSilder"  Style="{StaticResource mySlIDer}"  margin="10" ValueChanged="VoiceSilder_ValueChanged" />
        </StackPanel>

其中button控件附加了一些样式属性，样式不可重用，页面XAML代码混乱等，这些缺点其实类似于在HTML中直接设置元素的样式。一种推荐的方式是应该使用全局的样式。

全局样式是在App.xaml中编辑样式，在其他XAML中调用的样式。将一下代码写到App.xaml中

 <Application.Resources>
        <Style x:Key="btnMedia" targettype="button">
            <Setter Property="WIDth" Value="100"></Setter>
            <Setter Property="Height" Value="60"></Setter>
            <Setter Property="FontSize"  Value="16"></Setter>
            <Setter Property="Foreground" Value="Green"></Setter>
            <Setter Property="Background"  Value="Red"></Setter>
            <Setter Property="FontFamily" Value="Arial"></Setter>
        </Style>
        <Style x:name="mySlIDer" targettype="SlIDer">
            <Setter Property="WIDth" Value="120"></Setter>
            <Setter Property="Height" Value="10"></Setter>
            <Setter Property="HorizontalAlignment" Value="Center"></Setter>
            <Setter  Property="OrIEntation" Value="Horizontal"></Setter>
        </Style>
    </Application.Resources>

通过Style元素指定，需要设置唯一的一个Key（也可以是name），类似于CSS中的类名或者ASP.NET 2.0中Skin功能，并且通过targettype指定该样式将使用在哪类控件上，每一个属性都用Setter来指定。在XAML中，通过StaticResource标记句法来指定具体的样式：

        <StackPanel  OrIEntation="Horizontal" HorizontalAlignment="Center"  VerticalAlignment="Center" GrID.Row="1">
            <button Content="播放" Style="{StaticResource btnMedia}"  margin="10" name="btnPlay" Click="btnPlay_Click" />
            <button Content="暂停"  Style="{StaticResource btnMedia}"  margin="10" name="btnPause"    Click="btnPause_Click" />
            <button Content="停止" Style="{StaticResource btnMedia}" margin="10" name="btnStop"  Click="btnStop_Click" />
            <button Content="静音" Style="{StaticResource btnMedia}"  name="btnNoVoice"  margin="10" Click="btnNoVoice_Click" />
            <SlIDer  name="VoiceSilder"  Style="{StaticResource mySlIDer}"  margin="10" ValueChanged="VoiceSilder_ValueChanged" />
        </StackPanel>

其中的KEY可以理解为CSS中的ID(#),targettype为样式赋予的类型是什么。相比较上面的XAML文件，现在代码已经干净多了，这使得我们可以只专注于应用程序的业务，而无需考虑它的外观。运行后效果如下：

 

样式重写是指在定义全局样式后，仍可以在附加全局样式的控件上重新定义某些样式
如上面的示例中，我们在XAML中通过属性Foreground指定第一个按钮的前景色为黑色：

       <StackPanel  OrIEntation="Horizontal" HorizontalAlignment="Center"  VerticalAlignment="Center" GrID.Row="1">
            <button Content="播放" Style="{StaticResource btnMedia}" Foreground="Black" margin="10" name="btnPlay" Click="btnPlay_Click" />
            <button Content="暂停"  Style="{StaticResource btnMedia}" Foreground="Black" margin="10" name="btnPause"    Click="btnPause_Click" />
            <button Content="停止" Style="{StaticResource btnMedia}" Foreground="Black" margin="10" name="btnStop"  Click="btnStop_Click" />
            <button Content="静音" Style="{StaticResource btnMedia}" Foreground="Black" name="btnNoVoice"  margin="10" Click="btnNoVoice_Click" />
            <SlIDer  name="VoiceSilder"  Style="{StaticResource mySlIDer}"  margin="10" ValueChanged="VoiceSilder_ValueChanged" />
        </StackPanel>

尽管我们在全局样式中指定第一个按钮的前景色为绿色，通过内联样式重写后，它显示为黑色：

总结

以上是内存溢出为你收集整理的Silverlight中样式的用法全部内容，希望文章能够帮你解决Silverlight中样式的用法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。