jpd21122012

{
  "page": {
    "type": "ContentPage",
    "properties": {
      "title": "Login Page",
      "background": "linear-gradient(#e3f2fd, #bbdefb)"
    },
    "children": [
      {
        "type": "VerticalStackLayout",

jpd21122012

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.LoginPage">
    <ContentPage.Background>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
            <GradientStop Color="#e3f2fd" Offset="0.0"/>
            <GradientStop Color="#bbdefb" Offset="1.0"/>
        </LinearGradientBrush>
    </ContentPage.Background>

jpd21122012

page LoginPage {
    background: gradient(linear, #e3f2fd, #bbdefb)
    layout: VerticalStackLayout {
        spacing: 20
        padding: 30
        vertical-options: center
        children: [
            Image {
                source: "logo.png"
                height-request: 100

jpd21122012

    screen WelcomeScreen {
        layout: VerticalStack {
            padding: 20
            children: [
                Text {
                    value: "Hello, World!"
                    font-size: 24
                    is-bold: true
                },
                Button {

jpd21122012

    UI.Build()
        .StackLayout(Orientation.Vertical)
            .Label("Hello, World!").FontSize(24).Bold().End()
            .Button("Click Me").OnClick(ButtonClicked).Primary().End()
        .End();

jpd21122012

public class AnimatePathAction : TriggerAction<VisualElement>
{
    protected override async void Invoke(VisualElement sender)
    {
        if (sender is Path path)
        {
            // Calculate the approximate length of the path (this can be complex for real apps)
            double pathLength = 1000;

            path.StrokeDashArray = new DoubleCollection { pathLength, pathLength };

jpd21122012

<Path x:Name="AnimatedPath"
      Stroke="Blue"
      StrokeThickness="3"
      Fill="Transparent"
      Data="M 10,50 C 100,0 200,100 290,50">
    <Path.Triggers>
        <EventTrigger Event="Loaded">
            <EventTrigger.Actions>
                <local:AnimatePathAction />
            </EventTrigger.Actions>

jpd21122012

<Path Fill="#FF8030" Stroke="Black"
      Data="M 50,10 L 70,40 L 90,50 L 70,60 L 50,90 L 30,60 L 10,50 L 30,40 Z M 50,30 A 5,5 0 1 1 50,30.1 Z" />
<Path Fill="White"
      Data="M 40,45 A 3,3 0 1 1 40,45.1 Z M 60,45 A 3,3 0 1 1 60,45.1 Z" />

jpd21122012

<Path Stroke="Green"
      StrokeThickness="3"
      HorizontalOptions="Center"
      VerticalOptions="Center"
      Data="M 10,30 L 25,45 L 60,10" />

jpd21122012

<!-- A wavy divider at the bottom of a layout -->
<BoxView Color="LightBlue" HeightRequest="20"/>
<Path Fill="LightBlue"
      Data="M0,0 L0,20 C100,0 200,40 300,20 L300,0 Z"
      HorizontalOptions="Fill"/>