### Assign and Invoke for Control References and Imperative Setup Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Use `Assign` to capture a control's reference into a variable mid-chain and `Invoke` to execute imperative setup logic against the element inline. ```csharp using CommunityToolkit.Maui.Markup; Entry? usernameEntry = null; Entry? passwordEntry = null; var layout = new VerticalStackLayout { Children = { new Entry() .Placeholder("Username") .Assign(out usernameEntry) // capture reference .Invoke(e => e.Completed += (_, _) => passwordEntry?.Focus()), new Entry() .Placeholder("Password") .Assign(out passwordEntry) .Invoke(e => { e.IsPassword = true; e.ReturnType = ReturnType.Go; }) } }; // usernameEntry and passwordEntry are now accessible usernameEntry?.Focus(); ``` -------------------------------- ### Create Grid with Label and Entry using MAUI Markup Source: https://github.com/communitytoolkit/maui.markup/blob/main/README.md This example demonstrates creating a Grid with defined rows and columns using MAUI Markup extensions. It includes a Label and an Entry, with the Entry data-bound to a ViewModel property and configured with specific keyboard, color, font size, and margin properties. Use this for defining complex UI layouts fluently in C#. ```csharp using static CommunityToolkit.Maui.Markup.GridRowsColumns; class SampleContentPage : ContentPage { public SampleContentPage() { Content = new Grid { RowDefinitions = Rows.Define( (Row.TextEntry, 36)), ColumnDefinitions = Columns.Define( (Column.Description, Star), (Column.Input, Stars(2))), Children = { new Label() .Text("Code:") .Row(Row.TextEntry).Column(Column.Description), new Entry { Keyboard = Keyboard.Numeric, BackgroundColor = Colors.AliceBlue, }.Row(Row.TextEntry).Column(Column.Input) .FontSize(15) .Placeholder("Enter number") .TextColor(Colors.Black) .Height(44) .Margin(5, 5) .Bind(Entry.TextProperty, static (ViewModel vm) vm => vm.RegistrationCode) } }; } enum Row { TextEntry } enum Column { Description, Input } } ``` -------------------------------- ### Fluent Sizing for Entry Source: https://github.com/communitytoolkit/maui.markup/blob/main/README.md Set the size of a UI element fluently using the Size extension method. This example sets the width and height of an Entry. ```csharp new Entry().Size(200, 40); ``` -------------------------------- ### Fluent Data Binding with Entry Source: https://github.com/communitytoolkit/maui.markup/blob/main/README.md Define data bindings fluently using the Bind extension method. This example binds the Entry's Text property to a ViewModel property. ```csharp new Entry() .Bind(Entry.TextProperty, static (ViewModel vm) => vm.RegistrationCode); ``` -------------------------------- ### Alignment Extensions Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Set HorizontalOptions and VerticalOptions using Center, Start, End, Fill, Top, and Bottom extensions. Directional Left() and Right() helpers are available via the LeftToRight sub-namespace. ```csharp using CommunityToolkit.Maui.Markup; using CommunityToolkit.Maui.Markup.LeftToRight; // for Left() / Right() new Label().Text("Centered").Center(); new Button().Text("Save").End().Bottom(); new BoxView().FillHorizontal().Top(); // Left-to-right directional alignment new Label().Text("Left-aligned").Left(); ``` -------------------------------- ### Create FuncMultiConverter for double x double to string Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Use FuncMultiConverter for type-safe IMultiValueConverter implementations with Func delegates. This example converts two doubles (width and height) to a formatted string representing area. ```csharp using CommunityToolkit.Maui.Markup; // Standalone multi-converter: double × double → string var areaConverter = new FuncMultiConverter( convert: static ((double? w, double? h) t) => $"Area: {(t.w ?? 0) * (t.h ?? 0):F1} m²"); new Label() .Bind( Label.TextProperty, [ new Binding(nameof(RoomViewModel.Width)), new Binding(nameof(RoomViewModel.Height)) ], areaConverter); ``` -------------------------------- ### Initialize .NET MAUI Community Toolkit Markup Source: https://github.com/communitytoolkit/maui.markup/blob/main/src/CommunityToolkit.Maui.Markup/ReadMe.txt Call the UseMauiCommunityToolkitMarkup() extension method in your MauiProgram.cs file to initialize the toolkit. ```csharp using CommunityToolkit.Maui.Markup; public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); // Initialise the toolkit builder.UseMauiApp().UseMauiCommunityToolkitMarkup(); // the rest of your logic... } ``` -------------------------------- ### Initialize .NET MAUI Markup Toolkit Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Register the toolkit with the MAUI application builder. This is a required step for using the toolkit's features. It also enables C# Hot Reload for compatible UI pages when a debugger is attached. ```csharp using CommunityToolkit.Maui.Markup; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() .UseMauiCommunityToolkitMarkup(); // required — registers toolkit return builder.Build(); } } ``` -------------------------------- ### Initialize .NET MAUI Community Toolkit Markup Source: https://github.com/communitytoolkit/maui.markup/blob/main/README.md Call this extension method in your MauiProgram.cs to initialize the toolkit. Ensure the CommunityToolkit.Maui.Markup namespace is included. ```csharp using CommunityToolkit.Maui.Markup; public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); // Initialise the toolkit builder.UseMauiApp().UseMauiCommunityToolkitMarkup(); // the rest of your logic... } ``` -------------------------------- ### UseMauiCommunityToolkitMarkup — Toolkit initialization Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Registers the CommunityToolkit.Maui.Markup with the MAUI application builder. It also wires up the C# Hot Reload handler when a debugger is attached. ```APIDOC ## UseMauiCommunityToolkitMarkup ### Description Registers the toolkit with the MAUI application builder. When a debugger is attached it also wires up the C# Hot Reload handler so that UI pages that implement `ICommunityToolkitHotReloadHandler` receive live reload notifications. ### Method Extension method on `MauiAppBuilder` ### Usage ```csharp // MauiProgram.cs using CommunityToolkit.Maui.Markup; public static class MauiProgram { public static MauiApp CreateMauiApp() { var builder = MauiApp.CreateBuilder(); builder .UseMauiApp() .UseMauiCommunityToolkitMarkup(); // required — registers toolkit return builder.Build(); } } ``` ``` -------------------------------- ### Visual Element Sizing Extensions Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Simplify setting WidthRequest, HeightRequest, MinimumWidthRequest, and MinimumHeightRequest using Size, Width, Height, and MinSize extensions. Size(double) sets both width and height. ```csharp using CommunityToolkit.Maui.Markup; // Fixed width and height new Button().Text("OK").Size(120, 44); // Square new Image { Source = "icon.png" }.Size(48); // Only one dimension new ProgressBar().Width(200).Height(4); // Minimum constraints new Editor().MinSize(200, 80); ``` -------------------------------- ### Attaching Behaviors and Effects to Visual Elements Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Use `Behaviors` to add `Behavior` instances and `Effects` to add `Effect` instances to elements. Both accept a `params` span for multiple additions. ```csharp using CommunityToolkit.Maui.Markup; // Behaviors on an Entry new Entry() .Placeholder("Email") .Behaviors( new EmailValidationBehavior(), new CharacterValidationBehavior { CharacterType = CharacterType.Email }); // Routing effects on a BoxView new BoxView { Color = Colors.Cyan } .Effects(Effect.Resolve("MyApp.ShadowEffect")); ``` -------------------------------- ### Grid Placement Extensions Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Use Row, Column, RowSpan, and ColumnSpan extensions to position elements within a Grid. Supports integer indices and type-safe enums for placement and spanning. ```csharp using CommunityToolkit.Maui.Markup; enum Row { Header, Content, Footer } enum Column { Left, Center, Right } // Integer-based placement new Label().Text("A").Row(0).Column(1); // With explicit span new BoxView().Row(0, span: 2).Column(0); // occupies rows 0–1 // Enum-based (type-safe) new Label().Text("Header") .Row(Row.Header) .Column(Column.Left, Column.Right); // spans Left→Right (3 columns) new ActivityIndicator() .Row(Row.Content) .Column(Column.Center) .ColumnSpan(1); ``` -------------------------------- ### AppThemeBinding and AppThemeColorBinding Source: https://context7.com/communitytoolkit/maui.markup/llms.txt Set bindable properties to different values based on the OS theme (light or dark). AppThemeColorBinding is a helper for Color properties. ```csharp using CommunityToolkit.Maui.Markup; new Label() .Text("Hello World") // Generic value variant .AppThemeBinding(Label.BackgroundColorProperty, light: Colors.White, dark: Colors.Black) // Colour-specific helper .AppThemeColorBinding(Label.TextColorProperty, light: Colors.Black, dark: Colors.White); // Inside a Style var labelStyle = new Style