MAUI新生4.1-样式外观：样式风格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-不透明
