MAUI新生1.6-XAML语法基础:样式风格Style&Settter

一、样式的定义和使用

Style类似于前端的CSS,可以对视觉元素的样式进行有组织的管理,大量减少代码和重复工作量。Style需要结合资源字典使用,将Style定义在资源字典中,元素通过StaticResource或DynamicResource引用样式资源。

   

二、引用样式资源的匹配原则

1、元素使用样式资源时,和其它资源一样,延着控件树向上匹配,直到根元素Application为止(在App.xaml文件中)。如果有多个匹配资源,应用第一个匹配到的资源;如果没有匹配资源,则报资源引用异常。按照匹配原则,定义在Application的样式资源为全局样式,所有XAML页面都可以引用;目标元素如果要覆盖样式资源,直接在本元素上定义相应样式属性或将样式属性值设置为Null,如覆盖,【<Label TextColor="Red"/>】;置空,【<Label TextColor="{x:Null}"/>】

2、匹配样式资源有三种方式:

  • x:Key方式:当Style显式设置资源键名时,目标元素需要显式引用资源,如【<Lable Style="{StaticResource lableStyle}" Text="显示使用样式资源" />】
  • 无x:Key方式:当Style未显式设置资源键名时,目标元素,不需要引用资源,元素自动使用样式,如【<Lable Text="隐式使用样式资源" />】
  • Class方式:当Style设置Class时,目标元素和x:Key一样需要显式应用资源,和x:Key的区别在于,目标元素可以应用多个Class
<!--使用Class定义样式类-->
<ContentPage
    ......>
    <ContentPage.Resources>
        <Style Class="lableStyle1" TargetType="Label">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
        <Style Class="lableStyle2" TargetType="Label">
            <Setter Property="FontSize" Value="30" />
        </Style>
    </ContentPage.Resources>

    <StackLayout>
        <Label StyleClass="lableStyle1,lableStyle2" Text="使用样式资源" />
    </StackLayout>

</ContentPage>

  三、派生、继承和动态

1、除了目标元素,样式资源还可以应用于目标元素的派生类

<Style TargetType="Button" ApplyToDerivedTypes="True">
    <Setter Property="BackgroundColor" Value="Red" />
</Style>

2、样式可以继承,减少重复代码

<ContentPage
    ......>
    <ContentPage.Resources>
        <Style x:Key="baseStyle" TargetType="View" ApplyToDerivedTypes="True">
            <Setter Property="HorizontalOptions" Value="Center" />
            <Setter Property="VerticalOptions" Value="Center" />
        </Style>
    </ContentPage.Resources>
    <StackLayout>
        <StackLayout.Resources>
            <Style x:Key="labelStyle" TargetType="Label" BasedOn="{StaticResource baseStyle}">
                <Setter Property="FontSize" Value="18" />
                <Setter Property="FontAttributes" Value="Italic" />
            </Style>
        </StackLayout.Resources>
        <Label Text="使用了样式继承" Style="{StaticResource labelStyle}" />
    </StackLayout>
</ContentPage>

3、动态样式资源,在运行时,可以通过将元素动态绑定的样式更换,达到在运行时动态更改元素样式的功能

<ContentPage
    ......>
    <!--页面资源中定义两个样式lableStyle1和lableStyle2-->
    <ContentPage.Resources>
        <Style x:Key="lableStyle1" TargetType="Label">
            <Setter Property="TextColor" Value="Red" />
        </Style>
        <Style x:Key="lableStyle2" TargetType="Label">
            <Setter Property="TextColor" Value="Green" />
        </Style>
    </ContentPage.Resources>

    <StackLayout>
        <!--Lable元素动态绑定样式lableStyle1-->
        <Label Style="{DynamicResource lableStyle1}" Text="动态更换样式资源" />
        <!--点击按钮,后台代码将lableSytle2赋值给lableStyle1,实现运行时动态更新样式-->
        <Button Clicked="Button_Clicked" Text="点击修改Lable样式" />
    </StackLayout>

</ContentPage>

<!--按钮点击事件Handler后台代码-->
<!--后台代码通过Resources[key]方式获取到资源字典项目-->
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
    private void Button_Clicked(object sender, EventArgs e)
    {
        this.Resources["lableStyle1"] = this.Resources["lableStyle2"];
    }
}

四、常用样式属性目录

 1、布局类

背景:Background-背景、BackgroundColor-背景色、HasShadow-是否有阴影

边框:CornerRadius-圆角、BorderColor-边框颜色、BorderWidth-边框宽度、Stroke-边框画笔、StrokeShape-边框形状、StrokeThickness-边框宽度、StrokeDashArray-边框长短线样式、StrokeLineCap-直点和终点样式

宽高:WidthRequest-宽、HeightRequest-高,MaximumWidthRequest、MaximumHeightRequest、MinimumWidthRequest、MinimumHeightRequest

对齐:VerticalOptions-垂直对齐、HorizontalOptions-水平对齐

间距:Margin-外边距,Padding-内边距

2、文本类

内容:Text-文内容

颜色:TextColor-文本颜色

字体:FontFamily-字体

大小:FontSize-字体大小

样式:FontAttributes-加粗斜体等、TextDecorations-上划线下划线等、TextTransform-大小写、FontAutoScalingEnabled-本文是否缩放

排列:VerticalTextAlignment-文本垂直对齐、HorizontalTextAlignment-文本居中对齐、CharacterSpacing-文本间距、LineHeight-行距、LineBreakMode-跨行处理、MaxLines-最大行数

 

3、图片类

来源:Source-图片源(图片元素)、ImageSource-图片源(可设置图片的元素,如按钮)

其它:IsLoading-是否显示正在加载、Aspect-缩放模式、IsAnimationPlaying-gif是否播放、IsOpaque-是否设置为不透明

0 条评论
请不要发布违法违规有害信息,如发现请及时举报或反馈
还没有人评论呢,速度抢占沙发!
相关文章
这里还什么都没有 o(╯□╰)o