Getting Started with Uno Toolkit

In the previous session we learned how to Create your own C# Markup and how Custom your own C# Markup - Learn how to change Style, Bindings, Templates and Template Selectors using C# Markup.

Now we will check Uno Toolkit which is a library that can be added to any new or existing Uno solution.

For this sample you can use the how to Create your own C# Markup with Toolkit

For this sample we will cover this controls:

  • NavigationBar - Represents a specialized app bar that provides layout for AppBarButton and navigation logic.

  • Chip - Chips are compact elements that represent an input, attribute, or action.

The NavigationBar is a user interface component used to provide navigation between different pages or sections of an application.

The navigation bar can include items such as a back button, a page title, and other navigation elements, depending on your application's structure and requirements.

Changing UI to have the NavigationBar

  • In the Shared Project open the file MainPage.cs and change the content to have the NavigationBar.

    C# Markup

    To do so, create a new class file named SecondPage. Then open the class and replace the content for:

    namespace MySampleToolkitProject;

public sealed partial class SecondPage : Page
{
    public SecondPage()
    {
        this
            .Background(ThemeResource.Get<Brush>("ApplicationPageBackgroundThemeBrush"))
            .Content(new StackPanel()
            .VerticalAlignment(VerticalAlignment.Center)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .Children(
                new NavigationBar().Content("Title Second Page"),
                new Button()
                    .Content("Go to Main Page")
                    .Name(out var navigationButton)
            ));

        navigationButton.Click += (s, e) =>
        {
            Frame.Navigate(typeof(MainPage));
        };
    }
}

    Now we can change the content of the MainPage.cs to have the NavigationBar.

    new NavigationBar().Content("Title Main Page")

    And For have the controls to navigate for the SecondPage we can add a Button for do it.

    new Button()
    .Content("Go to Second Page")
    .Name(out var navigationButton),

    The main idea here is to create a button that has to assign itself, through the Name extension method, the output variable named in this case is navigationButton. After that, we need to add a Click EventHandler to add the Navigation using the Frame.Navigate.

    Notice how simple it is to create an action for the Button's Click event.

    
    navigationButton.Click += (s, e) =>
    {
        Frame.Navigate(typeof(SecondPage));
    };

Chip

A Chip is a user interface component used to display a specific selection or action in a compact format.

Chips are often used to display short pieces of information such as tags, categories, filters, or selected options. They provide a compact and interactive visual representation of this information, allowing users to efficiently view and interact with it.

Changing UI to have the Chip

  • In the Shared Project open the file MainPage.cs and change the content to have the Chip.

    C# Markup

    Chips can be displayed in lists, dropdown menus, action bars, or other areas of the user interface depending on the application's needs. They are highly flexible and adaptable, allowing you to use them according to your application's interaction flow.

    For this case we will add the Chip to show some information on the UI.

    new ChipGroup()
    .Name(out var chipGroup)
    .Items(
        new Chip()
            .Margin(5)
            .Content("Go to Second Page")
            .Background(new SolidColorBrush(Colors.LightBlue))
            .Name(out var navigationChip),
    )

    You can customize the appearance and behavior of Chips by setting properties such as Content, Icon, IsSelected, and handling associated events such as Click or Selected.

    So lets add more Chip to see they in action. The Second is for show how to custom the style of the chip.

    new ChipGroup()
    .Name(out var chipGroup)
    .Items(
        new Chip()
            .Margin(5)
            .Content("Chip 2")
            .Style(new Style<Chip>()
                        .Setters( s => s.Foreground(new SolidColorBrush(Colors.Red)))
                ),
    )

    And the third one is for show how to handle the Checked and the Unchecked events.

    new ChipGroup()
    .Name(out var chipGroup)
    .Items(

        new Chip()
            .Margin(5)
            .Content("Chip 3")
            .Name(out var chipElement)
    )

    And we need to add the event handlers to our code. Notice that we are using the Name extension method to have access to the chipElement in other places.

    
chipElement.Checked += (sender, e) =>
{
    if (sender is Chip chip)
    {
        chip.FontSize(18);
    }
};
chipElement.Unchecked += (sender, e) =>
{
    if (sender is Chip chip)
    {
        chip.FontSize(14);
    }
};

    Notice that we are able to use Event handlers and use them for many other purposes.

Try it yourself

Now try to change your MainPage to have different layout and test other attributes and elements.

In this Tutorial we add the NavigationBar and some Chip to the UI.

But the Uno Toolkit has many other Controls as:

Try to add another control as a learning exercise.

Next Steps