UWP-xaml之style样式

本文详细介绍了UWP中XAML的Style样式使用,包括style的基础应用、继承以及共享规则。通过示例代码展示了如何创建和应用样式,强调了在UWP中TargetType的必要性以及样式共享的条件和注意事项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值