MAUI新生4.4-笔刷Brush

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内置的颜色对照表，包括字符串颜色名称和十六进制颜色名称