UWP-xaml之style样式

最新推荐文章于 2025-06-02 00:26:17 发布

CRongQ

最新推荐文章于 2025-06-02 00:26:17 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏：应用开发

本文链接：https://blog.youkuaiyun.com/chen1083376511/article/details/97530260

应用开发专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了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>