Brush用于定义控件的外轮廓、背景等属性的值,是为属性赋值的。如Shape类控件的Stroke或Fill属性、Border控件的Stroke属性、Shadow的Brush属性、VisualElement派生类控件的Background属性等,同时在MAUI的Microsoft.Maui.Graphics画布中也有用到。MAUI为我们提供了三种类型的笔刷:(1)纯色笔刷:SolidColorBrush;(2)线性渐变笔刷:LinearGradientBrush;(3)径向渐变笔刷:RadialGradientBrush。其中纯色笔刷SolidColorBrush较常使用,线性渐变笔刷LinearGradientBrush次之。
一、纯色笔刷SolidColorBrush:
<ContentPage ......> <StackLayout> <!--①Background和Stroke属性,使用颜色名称赋值,内置转换器自动转换为SolidColorBrush对象。
Stroke为Border控件的外轮廓,Background为Boder控件的背景--> <Border x:Name="颜色名称" Background="Green" Stroke="GreenYellow" StrokeThickness="4" HeightRequest="200" WidthRequest="200" /> <!--②Background和Stroke属性,使用十六进制赋值,内置转换器自动转换为SolidColorBrush对象 十六进制颜色还可以增加透明度值,位于前两位,从00(100%透明度)至FF(0%透明度),如【#FF008000】--> <Border x:Name="十六进制" Background="#008000" Stroke="#ADFF2F" StrokeThickness="4" HeightRequest="200" WidthRequest="200" /> <!--③Background和Stroke属性,使用静态类Brush的静态属性赋值,内置转换器自动转换为SolidColorBrush对象--> <Border x:Name="Brush静态类" Background="{x:Static Brush.Green}" Stroke="{x:Static Brush.GreenYellow}" StrokeThickness="4" HeightRequest="200" WidthRequest="200" /> <!--④Background和Stroke属性,使用SolidColorBrush对象赋值--> <Border x:Name="使用SolidColorBrush实例化对象" HeightRequest="200" WidthRequest="200"> <Border.Background> <SolidColorBrush Color="Green" /> </Border.Background> <Border.Stroke> <SolidColorBrush Color="GreenYellow" /> </Border.Stroke> <Border.StrokeThickness>4</Border.StrokeThickness> </Border> </StackLayout> </ContentPage>
二、线性渐变笔刷:LinearGradientBrush
<ContentPage ......> <StackLayout> <!-- 渐变方向为从左向右,水平延伸 --> <Border HeightRequest="200" WidthRequest="200"> <Border.Background> <!-- LinearGradientBrush的StartPoint和EndPoint属性,确定渐变方向 笔刷区域的左上角为坐标起点(0,0),分别向右和向下延伸,右下角为坐标终点(1,1) GradientStop类型的集合,定义渐变的颜色段,其中Color定义颜色,Offset定义了渐变色的起止点 Offset的数值范围为0.0至1.0,0.0为渐变的起点,1.0为渐变的终点 --> <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> <GradientStop Offset="0.0" Color="Yellow" /> <GradientStop Offset="0.5" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </LinearGradientBrush> </Border.Background> </Border> <!-- 通过将EndPoint的值更改为【1,1】,将渐变方向为从左上角向右下向,对角线延伸 --> <Border HeightRequest="200" WidthRequest="200"> <Border.Background> <LinearGradientBrush StartPoint="0,0" EndPoint="1,1"> <GradientStop Offset="0.0" Color="Yellow" /> <GradientStop Offset="0.5" Color="Red" /> <GradientStop Offset="1.0" Color="Blue" /> </LinearGradientBrush> </Border.Background> </Border> </StackLayout> </ContentPage>
三、径向渐变笔刷RadialGradientBrush
<ContentPage ......> <StackLayout> <Border HeightRequest="200" WidthRequest="200"> <Border.Background> <!--RadialGradientBrush径向笔刷,以Center为圆心,以Radius为半径,以圆形方式填充渐变色--> <!--笔刷区域以左上角为坐标起点(0.0,0.0),右下角为坐标终点(1.0,1.0)--> <RadialGradientBrush Center="0.5,0.5" Radius="0.5"> <GradientStop Offset="0.0" Color="Red" /> <GradientStop Offset="0.8" Color="Green" /> <GradientStop Offset="1.0" Color="Blue" /> </RadialGradientBrush> </Border.Background> </Border> </StackLayout> </ContentPage>
四、MAUI内置的颜色对照表,包括字符串颜色名称和十六进制颜色名称
标签:4.4,控件,笔刷,渐变,Brush,MAUI,属性 From: https://www.cnblogs.com/functionMC/p/16995336.html