4.3-笔刷Brush

lmc19841126

已于 2023-05-28 11:04:35 修改

阅读量235

点赞数

分类专栏： Maui教程文章标签： ui 前端 c#

于 2023-05-27 01:33:46 首次发布

原文链接：https://www.cnblogs.com/functionMC/p/16995336.html

版权

Maui教程专栏收录该内容

33 篇文章

订阅专栏

本文介绍了MAUI框架中用于定义控件外观的Brush类，包括SolidColorBrush（纯色笔刷）、LinearGradientBrush（线性渐变笔刷）和RadialGradientBrush（径向渐变笔刷）。通过示例展示了如何设置控件的背景和边框颜色，以及渐变的方向和颜色变化。此外，还提到了颜色的命名和十六进制表示法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

4.3-笔刷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>