Can you use CSS Mesh Gradient definitions in .NET Maui as a control background? - Stack Overflow

admin2025-04-17  2

Having read the online documentation regarding the use of CSS in .NET Maui at .0#functions I'm attempting to reference a complex Mesh Gradient, such as ones that can be generated using the tool on /, and specify this as a resource in the XAML file as follows:-

<ContentPage.Resources>
    <StyleSheet>
        <![CDATA[
            #meshgradientgrid {
                background-color:hsla(0, 100 %, 50 %, 1);
                background-image: 
                    radial-gradient(at 40 % 20 %, hsla(28, 100 %, 74 %, 1) 0px, transparent 50 %), 
                    radial-gradient(at 80 % 0 %, hsla(189, 100 %, 56 %, 1) 0px, transparent 50 %),
                    radial-gradient(at 0 % 50 %, hsla(355, 100 %, 93 %, 1) 0px, transparent 50 %), 
                    radial-gradient(at 80 % 50 %, hsla(340, 100 %, 76 %, 1) 0px, transparent 50 %),
                    radial-gradient(at 0 % 100 %, hsla(22, 100 %, 77 %, 1) 0px, transparent 50 %), 
                    radial-gradient(at 80 % 100 %, hsla(242, 100 %, 70 %, 1) 0px, transparent 50 %), 
                    radial-gradient(at 0 % 0 %, hsla(343, 100 %, 76 %, 1) 0px, transparent 50 %);
            }
        ]]>
    </StyleSheet>    
</ContentPage.Resources>

and then consume the style with a grid control as follows:-

<Grid RowDefinitions="Auto, *"
      ColumnDefinitions="Auto, *"">
    <Button Grid.Column="1"
            Style="{DynamicResource CloseButton}"
            Command="{Binding CloseCommand}"/>
    <Label Style="{DynamicResource PageTitle}"
           TextColor="White"
           Text="Mesh Gradient Test"/>
    <Grid StyleId="meshgradientgrid"
          Grid.Row="1"
          Grid.ColumnSpan="2">
    </Grid>
</Grid>

However, the expected result unfortunately doesn't render. The grid appears completely filled with solid red.

If I change the CSS to use the 'background' tag in place of the 'background-image' tag, then the grid appears completely filled with solid pink.

Removing the 'background-color' item from the CSS makes no difference.

The expected result would have been something like this:-

Does anyone know if the restriction in .NET Maui is that only a single gradient fill can be specified, or is there a different syntax? Since the Background property of a visual element seems to only allow definition of a Radial/Linear Gradient element, I'm suspecting that Maui can't handle complex CSS, but am hopeful that someone knows of a workaround.

转载请注明原文地址:http://anycun.com/QandA/1744862998a88678.html