• Silverlight中样式的用法


     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>

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

  • 相关阅读:
    Whidbey 开发
    构建软件数字安全带系列课程
    微软产品生命周期模型系列课程
    Windows Mobile 2nd 开发黄金周
    微软高性能运算系列课程
    _tmain()和main()区别
    简单工厂模式&工厂方法模式
    单例模式
    java中去除字符串(String)中的换行字符(\r \n \t)
    阿里巴巴 Java开发手册1.4.0
  • 原文地址:https://www.cnblogs.com/majunfeng/p/3933834.html
Copyright © 2020-2023  润新知