style是样式,主要作用就是对元素的属性值进行分组,相对于普通元素添加效果的写法而言,其使用比较方便。
style的使用
普通代码
<StackPanel Orientation="Horizontal">
<Button FontSize="22" Background="Purple" Foreground="White"
Height="50" Width="50" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<RotateTransform Angle="10"/>
</Button.RenderTransform>
1</Button>
<Button FontSize="22" Background="Purple" Foreground="White"
Height="50" Width="50" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<RotateTransform Angle="10"/>
</Button.RenderTransform>
2 </Button>
<Button FontSize="22" Background="Purple" Foreground="White"
Height="50" Width="50" RenderTransformOrigin=".5,.5">
<Button.RenderTransform>
<RotateTransform Angle="10"/>
</Button.RenderTransform>
3 </Button>
</StackPanel>
样式代码
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="buttonStyle" TargetType="Button">
<Setter Property="Button.FontSize" Value="22"/>
<Setter Property="Button.Background" Value="Purple"/>
<Setter Property="Button.Foreground" Value="White"/>
<Setter Property="Button.Height" Value="50"/>
<Setter Property="Button.Width" Value="50"/>
<Setter Property="Button.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="Button.RenderTransform" >
<Setter.Value>
<RotateTransform Angle="10"/>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Style="{StaticResource buttonStyle}">1</Button>
<Button Style="{StaticResource buttonStyle}">2</Button>
<Button Style="{StaticResource buttonStyle}">3</Button>
</StackPanel>
效果图
继承style
代码(添加到被继承的style后面)
<Style x:Key="buttonStyleWithBold" TargetType="Button" BasedOn="{StaticResource buttonStyle}">
<Setter Property="Button.Foreground" Value="Red"/>
<Setter Property="Button.Opacity" Value="0.3"/>
</Style>
效果图
共享style
所谓共享,就是目标类型可分为多种具体目标类型,比如Control可分为按钮、文本框等具体控件类型。Control被style为目标类型,则所有具体控件类型就会共享到style设置好的效果。
<StackPanel Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="controlStyle" TargetType="Control">
<Setter Property="Control.FontSize" Value="22"/>
<Setter Property="Control.Background" Value="Purple"/>
<Setter Property="Control.Foreground" Value="White"/>
<Setter Property="Control.Height" Value="50"/>
<Setter Property="Control.Width" Value="50"/>
<Setter Property="Control.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="Control.RenderTransform" >
<Setter.Value>
<RotateTransform Angle="10"/>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button Style="{StaticResource controlStyle}">按钮</Button>
<TextBox Style="{StaticResource controlStyle}" Text="文本"></TextBox>
</StackPanel>
效果图
共享style的规则
1.Control类型的也分为好几种,比如按钮、文本框类、组合框等具体类型控件。如果setter所列出来的属性,对某些具体控件是没有的,则该属性对该控件是不产生作用的。但setter所列出来的属性,如果该控件有这个属性,就对该属性产生作用。
2.在setter添加不一样目标类型的控件,就会报错,如代码:
<!---原本是Control类型的-->
<Setter Property="TextBox.TextAlignment" Value="Right" >
3.虽然在WPF中,允许style中可不写上TargetType目标类型,表示可在不特定的控件下使用。但在UWP就必须写上这个TargetType。
在所有xaml设置控件style
在应用程序加载之后,所有目标类型控件设置为相同属性值效果,可在在App.xaml添加代码:
<Application.Resources>
<!--
注意:style设置为null仅在WPF起作用,而在UWP就会报错。
若添加x:Key="Buttonstyle",可在其他xaml使用控件不需要style特定属性值时,不用设置style为空也可。
但如果没有添加这个,则必须要设置style为null,否则也会产生style设置的效果。
--->
<Style TargetType="Button">
<Setter Property="Button.FontSize" Value="22"/>
<Setter Property="Button.Background" Value="Purple"/>
<Setter Property="Button.Foreground" Value="White"/>
<Setter Property="Button.Height" Value="50"/>
<Setter Property="Button.Width" Value="50"/>
<Setter Property="Button.RenderTransformOrigin" Value=".5,.5"/>
<Setter Property="Button.RenderTransform" >
<Setter.Value>
<RotateTransform Angle="10"/>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>