https://github.com/brminnick/hellomauimarkup

An iOS, Android, macOS + Windows app built using .NET MAUI, demonstrating how to use the .NET MAUI Markup Community Toolkit
https://github.com/brminnick/hellomauimarkup

android catalyst dotnet hacktoberfest ios maccatalyst macos net6 windows winui

Last synced: about 1 month ago
JSON representation

An iOS, Android, macOS + Windows app built using .NET MAUI, demonstrating how to use the .NET MAUI Markup Community Toolkit

• Host: GitHub
• URL: https://github.com/brminnick/hellomauimarkup
• Owner: brminnick
• License: mit
• Created: 2021-10-12T21:00:42.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-07-29T23:18:37.000Z (5 months ago)
• Last Synced: 2024-07-30T04:12:44.397Z (5 months ago)
• Topics: android, catalyst, dotnet, hacktoberfest, ios, maccatalyst, macos, net6, windows, winui
• Language: C#
• Homepage: https://github.com/communitytoolkit/maui.markup
• Size: 161 KB
• Stars: 20
• Watchers: 4
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
[![.NET MAUI](https://github.com/brminnick/HelloMauiMarkup/actions/workflows/maui.yml/badge.svg)](https://github.com/brminnick/HelloMauiMarkup/actions/workflows/maui.yml)

# HelloMauiMarkup

The [.NET MAUI Markup Community Toolkit](https://github.com/communitytoolkit/maui.markup) is a collection of Fluent C# Extension Methods that allows developers to continue architecting their apps using MVVM, Bindings, Resource Dictionaries, etc., without the need for XAML.

### .NET MAUI Markup Community Toolkit

This specific example uses `CommunityToolkit.Maui.Markup` and `CommunityToolkit.Maui.Markup.GridRowsColumns` 

#### Add Markup Namespace

At the top of **MainPage.cs**, add the following `using static`

```cs

using static CommunityToolkit.Maui.Markup.GridRowsColumns;

```

#### Add `enum Row`

In **MainPage.cs**, add an `enum` to define the `Grid` rows:

```cs

enum Row { HelloWorld, Welcome, Count, ClickMeButton, Image }

```

#### Define Grid

In the constructor of **MainPage.cs**, define the `Content` as a `Grid`

```cs

Content = new Grid

{

    RowSpacing = 25,

    Padding = Device.RuntimePlatform switch

    {

        Device.iOS => new Thickness(30, 60, 30, 30),

        _ => new Thickness(30)

    },

    RowDefinitions = Rows.Define(

        (Row.HelloWorld, Auto),

        (Row.Welcome, Auto),

        (Row.Count, Auto),

        (Row.ClickMeButton, Auto),

        (Row.Image, Auto)),

    Children =

    {

        new Label { Text = "Hello World" }

            .Row(Row.HelloWorld).Font(size: 32)

            .CenterHorizontal().TextCenter(),

        new Label { Text = "Welcome to .NET MAUI Markup Community Toolkit Sample" }

            .Row(Row.Welcome).Font(size: 18)

            .CenterHorizontal().TextCenter(),

        new HorizontalStackLayout

        {

            new Label { Text = "Current Count: " }

                .Font(bold: true)

                .FillHorizontal().TextEnd(),

            new Label()

                .Font(bold: true)

                .FillHorizontal().TextStart()

                .Bind(Label.TextProperty, nameof(MainViewModel.ClickCount), convert: count => count.ToString())

        }.Row(Row.Count).CenterHorizontal(),

        new Button { Text = "Click Me" }

            .Row(Row.ClickMeButton)

            .Font(bold: true)

            .CenterHorizontal()

            .BindCommand(nameof(ViewModel.ClickMeButtonCommand)),

        new Image { Source = "dotnet_bot.png", WidthRequest = 250, HeightRequest = 310 }

            .Row(Row.Image)

            .CenterHorizontal()

    }

}

```