FmgLib.MauiMarkup

Free .NET Libraries by FmgLib.MauiMakrup

| NuGet Package | Link | Repo Info | |--------------|------|-------| | FmgLib.MauiMarkup | | | | FmgLib.MauiMarkup.Template | | - |

<br>

FmgLib.MauiMarkup is a specialized library crafted for .NET MAUI. This library allows you to code directly in C# without the necessity of employing XAML language. It provides developers with a straightforward and flexible approach to building user interfaces using C# code. With FmgLib.MauiMarkup, you can now develop application interfaces in a code-focused manner, avoiding the complexities of dealing with XAML files. This library accelerates your development process while enabling you to write more readable and manageable code.

FmgLib.MauiMarkup provides extension methods for all properties provided for a View on the XAML side.

<br> <br> <details> <summary><b>Getting Started</b></summary> <br> <br>

Creating a new FmgLib.MauiMarkup project from CLI

FmgLib provides a project template to start a new project with FmgLib.MauiMarkup.

Install latest templates from NuGet:

dotnet new install FmgLib.MauiMarkup.Template

Create a new project:

dotnet new fmglib-mauimarkup-app -o my-new-project

Optional parameters:

• --netMajor 10|9 (default 10) to pick the .NET/MAUI version and matching package versions.
• --includeContent true|false (default false) to choose between a minimal home page or a richer sample experience.

<br>

Existing Projects

Install the FmgLib.MauiMarkup NuGet package to your MAUI application.

dotnet add package FmgLib.MauiMarkup

<br> </details> <details> <summary><b>XAML to FmgLib.MauiMarkup(C#)</b></summary> <br> <br> If we were to write XAML code for the Image class, it would look like this:

<Image
    Source="dotnet_bot.png"
    HeightRequest="100"
    WidthRequest="150"
    Grid.Row="0"
    Grid.Column="1"
    Grid.RowSpan="2"
    Opacity=".8" />

The C# equivalent with the help of FmgLib.MauiMarkup would be as follows:

new Image()
.Source("dotnet_bot.png")
.Row(0)
.Column(1)
.RowSpan(2)
.SizeRequest(150,100)
.Opacity(.8)

Similarly, we can see this for other Views. Let's write a few sample codes as an example:

new Label()
.Text("fmglib.mauimarkup")
.FontSize(12)
.Row(1)
.TextColor(Colors.Green)
.FontAttributes(FontAttributes.Bold)
.Margin(new Thickness(5,3,0,5))

this
.BackgroundImageSource("background.jpg")
.Content(
    new StackLayout()
    .Center()
    .Children(
        new ActivityIndicator()
        .IsRunning(true)
        .HeightRequest(70)
        .WidthRequest(70)
        .Center()
        .InvokeOnElement(ai => ai.Loaded += CheckLogin(sender, e))
    )
);

<br> </details> <details> <summary><b>How to assign object references</b></summary> <br> <br> There are two main ways to assign objects in `FmgLib.MauiMarkup`:

• using the Assign method,

The first example uses the Assign method to assign a label object to a variable named label. This is done using the following code:

new Label().Assign(out var label);
new Entry().Assign(out var entry);

Or

Button btnOk;

new Button()
.Assign(out btnOk);

<br> </details> <details> <summary><b>Attached properties</b></summary> <br> <br> Attached properties are properties that are defined on a type but are intended to be used with instances of other types. In `FmgLib.MauiMarkup`, attached properties are matched with attached property fluent methods, allowing you to set their values in a more readable and fluent manner.

For example, if you want to set the AbsoluteLayout.LayoutBounds attached property on a Border object, you would create an instance of Border and then use the AbsoluteLayoutBounds fluent method to set its value, like this:

new Border().AbsoluteLayoutBounds(new Rect(100, 100, 200, 200));

This would set the AbsoluteLayout.LayoutBounds attached property to the specified rectangle value on the Border object.

Attached properties list

| Maui bağlı özelliği | FmgLib.MauiMarkup metodu | |-|-| |FlyoutBase.ContextFlyout|ContextFlyout()| |Grid.Column|Column()| |Grid.Row|Row()| |Grid.ColumnSpan|ColumnSpan()| |Grid.RowSpan|RowSpan()| |Grid.ColumnSpan+Grid.RowSpan|Span(column, row)| |VisualStateManager.VisualStateGroups|VisualStateGroups()| |RadioButtonGroup.GroupName|RadioButtonGroupGroupName()| |RadioButtonGroup.SelectedValue|RadioButtonGroupSelectedValue()| |AbsoluteLayout.LayoutFlags|AbsoluteLayoutFlags()| |AbsoluteLayout.LayoutBounds|AbsoluteLayoutBounds()| |BindableLayout.EmptyView|BindableLayoutEmptyView()| |BindableLayout.EmptyViewTemplate|BindableLayoutEmptyViewTemplate()| |BindableLayout.ItemsSource|BindableLayoutItemsSource()| |BindableLayout.ItemTemplate|BindableLayoutItemTemplate()| |BindableLayout.TemplateSelector|BindableItemTemplateSelector()| |Shell.PresentationMode|ShellPresentationMode()| |Shell.BackgroundColor|ShellBackgroundColor()| |Shell.ForegroundColor|ShellForegroundColor()| |Shell.TitleColor|ShellTitleColor()| |Shell.DisabledColor|ShellDisabledColor()| |Shell.UnselectedColor|ShellUnselectedColor()| |Shell.NavBarHasShadow|ShellNavBarHasShadow()| |Shell.NavBarIsVisible|ShellNavBarIsVisible()| |Shell.TitleView|ShellTitleView()| |Shell.TabBarBackgroundColor|ShellTabBarBackgroundColor()| |Shell.TabBarForegroundColor|ShellTabBarForegroundColor()| |Shell.TabBarTitleColor|ShellTabBarTitleColor()| |Shell.TabBarDisabledColor|ShellTabBarDisabledColor()| |Shell.TabBarUnselectedColor|ShellTabBarUnselectedColor()| |Shell.TabBarIsVisible|ShellTabBarIsVisible()| |Shell.FlyoutBackdrop|ShellFlyoutBackdrop()| |Shell.FlyoutBehavior|ShellFlyoutBehavior()| |Shell.FlyoutHeight|ShellFlyoutHeight()| |Shell.FlyoutWidth|ShellFlyoutWidth()| |Shell.FlyoutItemIsVisible|ShellFlyoutItemIsVisible()| |Shell.BackButtonBehavior|ShellBackButtonBehavior()| |Shell.ItemTemplate|ShellItemTemplate()| |Shell.MenuItemTemplate|ShellMenuItemTemplate()| |Shell.SearchHandler|ShellSearchHandler()| |NavigationPage.HasNavigationBar|NavigationPageHasNavigationBar()| |NavigationPage.BackButtonTitle|NavigationPageBackButtonTitle()| |NavigationPage.HasBackButton|NavigationPageHasBackButton()| |NavigationPage.IconColor|NavigationPageIconColor()| |NavigationPage.TitleIconImageSource|NavigationPageTitleIconImageSource()| |NavigationPage.TitleView|NavigationPageTitleView()| |SemanticProperties.Hint|SemanticHint()| |SemanticProperties.Description|SemanticDescription()| |SemanticProperties.HeadingLevel|SemanticHeadingLevel()| |AutomationProperties.ExcludedWithChildren|AutomationExcludedWithChildren()| |AutomationProperties.IsInAccessibleTree|AutomationIsInAccessibleTree()| |AutomationProperties.Name|AutomationName()| |AutomationProperties.HelpText|AutomationHelpText()| |AutomationProperties.LabeledBy|AutomationLabeledBy()| |ToolTipProperties.Text|ToolTipPropertiesText()|

</details> <details> <summary><b>Behaviors</b></summary> <br> <br> In `FmgLib.MauiMarkup`, you can add functionality to user interface controls using behaviors. Behaviors allow you to add functionality to controls without having to subclass them.

You can add a behavior to a control by using the Behaviors method and passing in an instance of the behavior class. For example:

new Entry().Text("Click Item")
  .Behaviors(new YourCustomBehaviors());

<br> </details> <details> <summary><b>Binding Converters</b></summary> <br> <br> This code is an example of how to use binding converters in `FmgLib.MauiMarkup`.

A CollectionView is defined and for each item in the MyNumbers list, a label is created with text equal to the value of the item. The BackgroundColor property of the label is bound to the item using the Convert method, which takes in a function that converts the value of the item (an integer) to a color. In this case, the function checks if the number is even or odd, and returns either Colors.Green or Colors.Yellow based on the result.

public class CustomPage : ContentPage
{
    public List<int> MyNumbers = new List<int> { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 };

    public CustomPage()
    {
	    this
	    .Content(
			new VerticalStackLayout()
			Children(
				new CollectionView()
                .ItemsSource(MyNumbers)
                .ItemTemplate(() => 
                    new Label()
                        .FontSize(30)
                        .Text(e => e.Path("."))
                        .TextColor(Colors.Gray)
                        .BackgroundColor(e => e
                            .Path(".")
                            .Convert((int n) => n % 2 == 0 ? Colors.Green : Colors.Yellow)