{"id":27786114,"url":"https://github.com/thecodetraveler/hellomauimarkup","last_synced_at":"2025-04-30T15:42:51.235Z","repository":{"id":42071239,"uuid":"416496443","full_name":"TheCodeTraveler/HelloMauiMarkup","owner":"TheCodeTraveler","description":"An iOS, Android, macOS + Windows app built using .NET MAUI, demonstrating how to use the .NET MAUI Markup Community Toolkit","archived":false,"fork":false,"pushed_at":"2025-04-21T17:25:10.000Z","size":171,"stargazers_count":21,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-30T15:42:40.793Z","etag":null,"topics":["android","catalyst","dotnet","hacktoberfest","ios","maccatalyst","macos","net6","windows","winui"],"latest_commit_sha":null,"homepage":"https://github.com/communitytoolkit/maui.markup","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheCodeTraveler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["brminnick"]}},"created_at":"2021-10-12T21:00:42.000Z","updated_at":"2025-04-21T17:25:14.000Z","dependencies_parsed_at":"2023-09-26T20:08:37.115Z","dependency_job_id":"10200c93-0872-465c-a973-28de8bee0374","html_url":"https://github.com/TheCodeTraveler/HelloMauiMarkup","commit_stats":null,"previous_names":["thecodetraveler/hellomauimarkup"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FHelloMauiMarkup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FHelloMauiMarkup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FHelloMauiMarkup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTraveler%2FHelloMauiMarkup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheCodeTraveler","download_url":"https://codeload.github.com/TheCodeTraveler/HelloMauiMarkup/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251733807,"owners_count":21635022,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","catalyst","dotnet","hacktoberfest","ios","maccatalyst","macos","net6","windows","winui"],"created_at":"2025-04-30T15:42:50.126Z","updated_at":"2025-04-30T15:42:51.227Z","avatar_url":"https://github.com/TheCodeTraveler.png","language":"C#","funding_links":["https://github.com/sponsors/brminnick"],"categories":[],"sub_categories":[],"readme":"[![.NET MAUI](https://github.com/brminnick/HelloMauiMarkup/actions/workflows/maui.yml/badge.svg)](https://github.com/brminnick/HelloMauiMarkup/actions/workflows/maui.yml)\n\n# HelloMauiMarkup\nThe [.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.\n\n### .NET MAUI Markup Community Toolkit\n\nThis specific example uses `CommunityToolkit.Maui.Markup` and `CommunityToolkit.Maui.Markup.GridRowsColumns` \n\n#### Add Markup Namespace\n\nAt the top of **MainPage.cs**, add the following `using static`\n\n```cs\nusing static CommunityToolkit.Maui.Markup.GridRowsColumns;\n```\n\n#### Add `enum Row`\n\nIn **MainPage.cs**, add an `enum` to define the `Grid` rows:\n\n```cs\nenum Row { HelloWorld, Welcome, Count, ClickMeButton, Image }\n```\n\n#### Define Grid\n\nIn the constructor of **MainPage.cs**, define the `Content` as a `Grid`\n\n```cs\nContent = new Grid\n{\n    RowSpacing = 25,\n\n    Padding = Device.RuntimePlatform switch\n    {\n        Device.iOS =\u003e new Thickness(30, 60, 30, 30),\n        _ =\u003e new Thickness(30)\n    },\n\n    RowDefinitions = Rows.Define(\n        (Row.HelloWorld, Auto),\n        (Row.Welcome, Auto),\n        (Row.Count, Auto),\n        (Row.ClickMeButton, Auto),\n        (Row.Image, Auto)),\n\n    Children =\n    {\n        new Label { Text = \"Hello World\" }\n            .Row(Row.HelloWorld).Font(size: 32)\n            .CenterHorizontal().TextCenter(),\n\n        new Label { Text = \"Welcome to .NET MAUI Markup Community Toolkit Sample\" }\n            .Row(Row.Welcome).Font(size: 18)\n            .CenterHorizontal().TextCenter(),\n\n        new HorizontalStackLayout\n        {\n            new Label { Text = \"Current Count: \" }\n                .Font(bold: true)\n                .FillHorizontal().TextEnd(),\n\n            new Label()\n                .Font(bold: true)\n                .FillHorizontal().TextStart()\n                .Bind\u003cLabel, int, string\u003e(Label.TextProperty, nameof(MainViewModel.ClickCount), convert: count =\u003e count.ToString())\n\n        }.Row(Row.Count).CenterHorizontal(),\n\n        new Button { Text = \"Click Me\" }\n            .Row(Row.ClickMeButton)\n            .Font(bold: true)\n            .CenterHorizontal()\n            .BindCommand(nameof(ViewModel.ClickMeButtonCommand)),\n\n        new Image { Source = \"dotnet_bot.png\", WidthRequest = 250, HeightRequest = 310 }\n            .Row(Row.Image)\n            .CenterHorizontal()\n    }\n}\n```\n\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://user-images.githubusercontent.com/13558917/137029038-3005f59f-8726-4462-a1e7-c54d5e897805.png\" width=\"500\" /\u003e\n\u003c/p\u003e\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecodetraveler%2Fhellomauimarkup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthecodetraveler%2Fhellomauimarkup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecodetraveler%2Fhellomauimarkup/lists"}