SilverLigth继承了WPF的样式风格和模版的概念,和HTML使用CSS样式差不多。
为什么引入样式和使用样式,这点恐怕使用过CSS的人都应该有比较直观的感觉。就不多说了
在SilverLight中使用样式三种(目前我了解到的)
1,控件内部样式(CSS内联样式,和CSS中一样,具有最高优先权):在控件内部定义样式
<Button>
<Button.Style>
<Style> //这种形式的,要是闲着没事,可以选择
</Style>
</Button.Style>
</Button>
1 <Grid x:Name="LayoutRoot" Background="White"> 2 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 3 <Button x:Name="btn" Content="提交按钮" ToolTipService.Placement="Mouse" > 4 <ToolTipService.ToolTip> 5 <Image Source="/image/ooo.jpg"/> 6 </ToolTipService.ToolTip> 7 </Button> 8 <Button x:Name="btn1" Content="对比" FontSize="10"/> 9 </StackPanel> 10 </Grid>
2,用户控件资源
在UserControl.Resources中定义Style
<Style x:Key="btnStyle" TargetType="Button"></Style> //TargetType表示该样式作用于哪一种控件,key是为了引用
引用方式:Style="{StaticResource btnStyle}"
引入样式后可以在控件内部重新定义属性,并且可以覆盖引入的样式(和CSS中样式级别一样)
1 <UserControl.Resources> 2 <Style x:Key="btnStyle" TargetType="Button"> 3 <Setter Property="HorizontalAlignment" Value="Center"></Setter> 4 <Setter Property="VerticalAlignment" Value="Center"></Setter> 5 <Setter Property="HorizontalContentAlignment" Value="Center"></Setter> 6 <Setter Property="VerticalContentAlignment" Value="Center"></Setter> 7 <Setter Property="FontSize" Value="14"></Setter> 8 </Style> 9 </UserControl.Resources> 10 11 <Grid x:Name="LayoutRoot" Background="White"> 12 <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> 13 <Button x:Name="btn" Content="提交按钮" ToolTipService.Placement="Mouse" > 14 <ToolTipService.ToolTip> 15 <Image Source="/image/ooo.jpg"/> 16 </ToolTipService.ToolTip> 17 </Button> 18 <Button x:Name="btn1" Content="对比" Style="{StaticResource btnStyle}" FontSize="10"/> 19 </StackPanel> 20 </Grid>
3,全局样式:在APP.xaml中如上定义
1 <Application xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 2 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 3 x:Class="MySilverLightTest.App" 4 > 5 <Application.Resources> 6 <Style x:Key="btnStyle" TargetType="Button"> 7 <Setter Property="HorizontalAlignment" Value="Center"></Setter> 8 <Setter Property="VerticalAlignment" Value="Center"></Setter> 9 <Setter Property="HorizontalContentAlignment" Value="Center"></Setter> 10 <Setter Property="VerticalContentAlignment" Value="Center"></Setter> 11 <Setter Property="Background" Value="Red"></Setter> 12 <Setter Property="Foreground" Value="Blue"></Setter> 13 <Setter Property="FontSize" Value="14"></Setter> 14 </Style> 15 <Style x:Key="textBlockStyle" TargetType="TextBlock"> 16 17 </Style> 18 </Application.Resources> 19 </Application>
用户控件资源样式、全局样式形式,如果在定义Style时,没有指定x:Key="",那么,该样式作用于该样式的作用域!
用户控件资源样式作用域:定义该要是的xaml内部
App.xaml中定义的全局样式,作用域:该项目
扩展:
SilverLight中的控件内部样式使用仅限于该控件本身,因此它没有被放在资源字典中。
控件资源(xxx.Resources)是向下继承的!!!
1 <Grid> 2 <Grid.Resources> 3 <Style x:Key="btnStyle" TargetType="Button"> 4 <Setter Property="HorizontalAlignment" Value="Center"></Setter> 5 <Setter Property="VerticalAlignment" Value="Center"></Setter> 6 <Setter Property="HorizontalContentAlignment" Value="Center"></Setter> 7 <Setter Property="VerticalContentAlignment" Value="Center"></Setter> 8 <Setter Property="FontSize" Value="14"></Setter> 9 </Style> 10 </Grid.Resources> 11 <Button x:Name="btn" Style="{StaticResource btnStyle}"/> 12 </Grid>
控件模版
SilverLight每个控件都有若干属性,用于改变控件的大小、颜色、字体、位置等。但通过属性来改变控件的外观形状是有限的。
………………