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.