DEV Community: Daniel Monettelli

Migrando Mitawi a .NET MAUI

Daniel Monettelli — Thu, 29 Dec 2022 22:44:24 +0000

En esta publicación comparto mi experiencia de migrar mi aplicación Mitawi a .NET MAUI y descubrir oportunidades prometedoras para mejorar la eficiencia de mis proyectos móviles.

Mitawi es una aplicación de pronóstico del tiempo open source que ofrece pronósticos precisos y actualizados del clima diario y semanal para ubicaciones alrededor del mundo. Recientemente, fue migrada a .NET MAUI para mejorar su rendimiento y facilidad de uso. Con Mitawi, puedes planificar tus actividades al aire libre con confianza, ya que siempre tendrás acceso a la previsión del tiempo para los próximos días.

Gracias a Mitawi, he podido realizar una comparación entre Xamarin.Forms y .NET MAUI en cuatro aspectos importantes: arquitecturas, rendimiento, controles útiles y proceso de migración. Mi intención es compartir mis observaciones y experiencias en estos aspectos para ayudar a otros desarrolladores que estén considerando migrar a .NET MAUI.

Arquitecturas

.NET MAUI ofrece una mayor integración con el ecosistema .NET y una arquitectura más limpia y moderna que Xamarin.Forms. Esto permite una mejor reutilización del código y una mayor facilidad para mantener y actualizar la aplicación. .NET MAUI también está basado en el marco de aplicaciones móviles de Microsoft, lo que significa que puedes aprovechar todas las herramientas y recursos disponibles en el ecosistema .NET.

Rendimiento

Después de comparar el rendimiento de .NET MAUI y Xamarin.Forms en la aplicación Mitawi, he de admitir que no he observado una diferencia significativa en velocidad y uso de recursos. Sin embargo, es importante mencionar que .NET MAUI utiliza el marco de aplicaciones móviles de Microsoft, el cual está optimizado para brindar eficiencia y desempeño. Además, permite el uso de compilación AOT (Ahead-of-Time) para mejorar el rendimiento en tiempo de ejecución. Estas características son valiosas y espero poder aprovecharlas en el futuro, especialmente cuando se actualice a .NET 7.

Es importante tener en cuenta que el rendimiento puede variar dependiendo del caso de uso y de la implementación de la aplicación, por lo que es recomendable hacer pruebas y mediciones para evaluar el rendimiento en cada caso específico.

Controles útiles

.NET MAUI ofrece algunos controles útiles que no están disponibles en Xamarin.Forms y que pueden simplificar el desarrollo de la interfaz de usuario de la aplicación. Por ejemplo, .NET MAUI cuenta con un control Border que permite crear bordes personalizados con facilidad. Este control ofrece características como sombras y gradientes que pueden ser útiles para el desarrollo de la interfaz de usuario de la aplicación y pueden ahorrar tiempo y esfuerzo al no tener que utilizar otras bibliotecas para lograr el mismo resultado.

<!--#region Top layer lower 1-->
<Border
    x:Name="topLayerLower1"
    sk:Skeleton.Hide="True"
    sk:Skeleton.IsBusy="{Binding IsBusy}"
    BackgroundColor="{StaticResource col_thirt}"
    Style="{StaticResource vsm_orientation_topLayerLower1}">
    <Border.Shadow>
        <Shadow
            Brush="{StaticResource col_thirt}"
            Opacity="0.93"
            Radius="45"
            Offset="20,20" />
    </Border.Shadow>
    <Border.StrokeShape>
        <RoundRectangle CornerRadius="0,0,43,43" />
    </Border.StrokeShape>
</Border>
<!--#endregion-->

Proceso de migración

Durante la migración de Mitawi a .NET MAUI, tomé medidas para asegurarme de tener todas las herramientas y dependencias necesarias para trabajar con esta tecnología. Aunque fue algo relativo, pude lograr adaptar la aplicación para aprovechar las características únicas de .NET MAUI, como el control Border. Además, realicé pruebas exhaustivas para minimizar cualquier posible error tras la migración. En resumen, el proceso fue desafiante pero logré completarlo con éxito.

Repositorio

El proyecto es de código abierto y puedes verlo haciendo clic en la siguiente imagen. ¡No dudes en echarle un vistazo!

Bibliografía

Conclusiones

Al migrar Mitawi de Xamarin.Forms a .NET MAUI he podido apreciar algunas de las ventajas de este nuevo marco multiplataforma en cuatro áreas clave: arquitecturas, rendimiento, controles útiles y proceso de migración.

En cuanto a las arquitecturas, .NET MAUI ofrece una mayor integración con el ecosistema .NET y una arquitectura más sencilla y flexible.
Aunque todavía no he notado una mejora significativa en el rendimiento de Mitawi con .NET MAUI en comparación con Xamarin.Forms, estoy optimista de que al actualizar a .NET 7 pueda ver una mejora mayor. .NET MAUI tiene características prometedoras y estoy dispuesto a trabajar duro para aprovechar al máximo éstas herramientas y mejorar el rendimiento de Mitawi en el futuro.
.NET MAUI tiene controles útiles como el control Border que pueden simplificar el desarrollo de la interfaz de usuario y ahorrar tiempo y esfuerzo.
Después de completar la migración de Mitawi a .NET MAUI, me he encontrado con algunos obstáculos de adaptabilidad en la segunda interfaz de la aplicación. Espero poder solucionarlos pronto y seguir disfrutando de las ventajas de .NET MAUI.

Por favor, no dudes en brindarme tu retroalimentación y, con la ayuda de mi repositorio, sacar tus propias conclusiones. Si tienes alguna pregunta o sugerencia constructiva, me gustaría mucho leerla. Muchas gracias por tu tiempo.

Xamarin.Forms UI/UX Challenges - Micuna Food - Part3

Daniel Monettelli — Sun, 20 Feb 2022 04:56:00 +0000

In this third part of the Challenge I will go beyond design, I will add functionality to the share icon making use of two of the most popular Xamarin.Forms libraries, which are Xamarin Community Toolkit and Xamarin.Essentials.

This publication is part of the Second Xamarin Advent Calendar in Spanish organized by Dr. Luis Beltrán, and of the third C# Advent Calendar in Spanish organized by Ing. Benjamín Camacho, thank you very much for being part of these great initiatives.

Screenshot and Toast Multiplatform

Previously, the FoodDetailPage had the share button, that’s what the designer did, but if we think as users, the first thing that comes to mind would be ¿What am I going to share?, in the wake of that dilemma, it will start with a screenshot button to remove false perceptions.

Digging deeper into the code, in the Icons.xaml file located in the Styles folder, we will customize the screenshot icon with its respective properties, including its size and color.

<!--#region FontImageSource INTERFACES-->
<FontImageSource
    x:Key="icon_screenshot_solid"
    FontFamily="MonettelliFontIcons"
    Glyph="{x:Static FontAwesome:MonettelliFontIcons.icon_screenshot_solid}"
    Size="26"
    Color="{DynamicResource colPrim}" />
<!--#endregion-->

To change one icon to another in the same button, I use Visual State Manager, these icons are linked in the Source property of the TargetType “Image”, it is worth mentioning, that it is necessary to add an x:Key to use it in a control or layout similar to the TargetType.

<!--#region Visual States Manager-->
<Style
    x:Key="vsm_fontIconChanged"
    TargetType="Image">
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">

                <VisualState x:Name="Normal">
                    <VisualState.Setters>
                        <Setter Property="Source" Value="{StaticResource icon_screenshot_solid}" />
                    </VisualState.Setters>
                </VisualState>

                <VisualState x:Name="Selected">
                    <VisualState.Setters>
                        <Setter Property="Source" Value="{StaticResource icon_share_solid}" />
                    </VisualState.Setters>
                </VisualState>

            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>
<!--#endregion-->

In FoodDetailPage.xaml, I implement a non-visible CachedImage control, responsible for storing the image capture, and with x:Name “imageForScreenshot”, we will work on the code behind said xaml file.

<!--  Image for Screenshot  -->
<ffimageloading:CachedImage
    x:Name="imageForScreenshot"
    Grid.Row="3"
    Grid.Column="2"
    Grid.ColumnSpan="5"
    IsVisible="false" />

In Mode Xamarin.Essentials.Screenshot

Using GestureRecognizers, I create an event called ScreenshotAndShareFile_Tapped, and through the if statement, I indicate, that if the Source property of imageForScreenshot is null, execute the following process:

The screenshot variable is responsible for capturing the screen based on the dimensions of the physical device or emulator (Height and Width).

The stream variable will obtain the data flow of the screenshot through the OpenReadAsync() method.

Finally, the FromStream() method is the linchpin for create an image from the specified stream variable, all of this is stored in the Source property of imageForScreenshot.

private async void ScreenshotAndShareFile_Tapped(object sender, EventArgs e)
{
    if (imageForScreenshot.Source == null)
    {
        // Mode Xamarin.Essentials.Screenshot
        var screenshot = await Screenshot.CaptureAsync();
        var stream = await screenshot.OpenReadAsync();
        imageForScreenshot.Source = ImageSource.FromStream(() => stream);

        // Visual State Manager here...

        // Toast Multiplatform here...
    }
    else
    {
        // File Share here...
    }
}

In Mode ImageFromXamarinUI

This library is so versatile, because we can create specific screenshots at the interface level, and it can be applied to different use cases. Very grateful to Dima Dimov for creating this amazing nuget package.

The following code fragment we can see that the x:Name called layoutMainParent is the parent GridLayout, therefore, my screenshot will be everything that encapsulates said layout.

<ContentPage.Content>

    <ScrollView>

        <Grid x:Name="layoutMainParent">

        <!--  Rest of the code here...  -->

        </Grid>

    </ScrollView>

</ContentPage.Content>

Continuing in the ScreenshotAndShareFile_Tapped event, the stream variable is in charge of adding the data flow, but now it will depend on the dimensions of the layoutMainParent, the parameter of the CaptureImageAsync() method assumes the background color, finally, the image is created with the same logic than Xamarin.Essentials.Screenshot.

private async void ScreenshotAndShareFile_Tapped(object sender, EventArgs e)
{
    if (imageForScreenshot.Source == null)
    {
        // Mode ImageFromXamarinUI
        var stream = await layoutMainParent.CaptureImageAsync(Color.White);
        imageForScreenshot.Source = ImageSource.FromStream(() => stream);

        // Visual State Manager here...

        // Toast Multiplatform here...
    }
    else
    {
        // File Share here...
    }
}

When the button is touched, it changes to the “Selected” state (share icon), this process is done by the GoToState() method of VisualStateManager.

Now I enter the Xamarin Community Toolkit grounds, and I am excited that they add Toast Multiplatform, with a few lines of code we can indicate the message and the duration of the notification, all thanks to the DisplayToastAsync() method.

<StackLayout
    Grid.Row="1"
    Grid.Column="6"
    Grid.ColumnSpan="2"
    xct:TouchEffect.NativeAnimation="True"
    xct:TouchEffect.AnimationDuration="300">
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="ScreenshotAndShareFile_Tapped" />
    </StackLayout.GestureRecognizers>

    <Image
        x:Name="stateFontIcon"
        Style="{StaticResource vsm_fontIconChanged}"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />
</StackLayout>

private async void ScreenshotAndShareFile_Tapped(object sender, EventArgs e)
{
    if (imageForScreenshot.Source == null)
    {
        // Mode ImageFromXamarinUI here...

        // Mode Xamarin.Essentials.Screenshot here...

        VisualStateManager.GoToState(stateFontIcon, "Selected");

        await this.DisplayToastAsync(message: "Successful screenshot", durationMilliseconds: 2000);
    }
    else
    {
        // File Share here...
    }
}

Share File

Xamarin.Essentials has another great API called Share, which allows you to send different types of files to the installed applications of the physical device or emulator.

Now that we have our image capture and the share button, we proceed with the file submission flow:

The fileName is in charge of naming the image.

The fullPath combines fileName with the CacheDirectory property, that gets the location where temporary data can be stored, and also helps to send the file faster.

The byteArray variable stores the weight of the image in bytes, it should be noted, that CachedImage has two methods to obtain png and jpg images (in this case I use the GetImageAsPngAsync() method), thank you very much Daniel Luberda for creating this fantastic library.

To encapsulate byteArray in fullPath it is done with the WriteAllBytes() method, with this, we already have a fully packed file.

In the RequestAsync() method I generate a new instance of ShareFileRequest(), there we add the title and corresponding file, it should be noted that “image/png” is only to highlight that it is a png file, it is not necessary to add it.

And WHOLAA!!!, we can now send our image, all thanks to Xamarin.Essentials.Share.

private async void ScreenshotAndShareFile_Tapped(object sender, EventArgs e)
{
    if (imageForScreenshot.Source == null)
    {
        // Mode ImageFromXamarinUI here...

        // Mode Xamarin.Essentials.Screenshot here...

        // Visual State Manager here...

        // Toast Multiplatform here...
    }
    else
    {
        string fileName = "MicunaFood - " + foodDetailViewModel.SelectedFood.Name_Food + ".png";
        string fullPath = Path.Combine(FileSystem.CacheDirectory, fileName);

        var byteArray = await imageForScreenshot.GetImageAsPngAsync();
        File.WriteAllBytes(fullPath, byteArray);

        await Share.RequestAsync(new ShareFileRequest
        {
            Title = "Data Transfer " + foodDetailViewModel.SelectedFood.Name_Food,
            File = new ShareFile(fullPath, "image/png")
        });
    }
}

Send and Save File

In the image above, you can see that the Android device sends the file through Microsoft Outlook application, while on the iPhone, it saves the screenshot, both ways are feasible.

The idea is for the user to share and save the different foods that MicunaFood offers for future purchases.

Other Features

Repository class

To improve the management of the MicunaFood data to the different ViewModels, they were migrated to the static class called repository.

Performance Tip in FFImageLoading

The video by Daniel Luberda shows the importance of adding the CacheType property to improve images performance.

The Result

Get the Code

All the code is open source, you can see it on my github.

Resources

Conclusions

I love Xamarin.Essentials.Screenshot and ImageFromXamarinUI, different features, same goal.
In a single line of code you can add Toast Multiplatform, my respects to Xamarin.Community.Toolkit.
This post demonstrates that Xamarin.Essentials.Share doesn’t just send text (like the example in the documentation), but any type of file.
State changes can also be done in a single control, and Visual State Manager helps me achieve it.

Remember that you can give feedback and with the help of my repository draw your own conclusions, if you have any questions or constructive criticism write to me below this publication, thank you very much.

Xamarin.Forms UI/UX Challenges - Micuna Food - Part2

Daniel Monettelli — Sun, 20 Feb 2022 04:36:00 +0000

In this second part of the Challenge, the protagonist is the nuget package "Xamarin Community Toolkit", an all-in-one that provides abstractions that we commonly use.

Inspirational Design

Continuing with the design of Ghulam Rasool, the following detail interface has two upper icons, one to go back and one to share, followed by the delicious image of the food, with its respective title and description, finally, the price of the food is accompanied by a button, which allows adding to the shopping cart, simple and clean at the same time.

Navigating from HomePage to FoodDetailPage

The navigation flow from page to page applies UX, when the user clicks on an item he has to observe what he did exactly, for this, a waiting time is necessary and then continue with the next page.

The following example*(Code-Behind of HomePage)* shows the CollectionView_SelectedItem event created from the SelectionChanged property of CollectionView, the selectedItem variable is made up of the event parameter, whose CurrentSelection property is responsible for finding the selected items, then an expression is added conditional*(if)* arguing that if there is a selection of an item, proceed with a Delay( ) of 350ms, and then go to the FoodDetailPage page, the item details are seen through the conversion "selectedItem as FoodsViewModel", finally, said selection is canceled.

public partial class HomePage : ContentPage
{

    // ...

    private async void CollectionView_SelectedItem(object sender, SelectionChangedEventArgs e)
    {
        var selectedItem = e.CurrentSelection.FirstOrDefault();
        if (selectedItem != null)
        {
            await Task.Delay(350);
            await Navigation.PushAsync(new FoodDetailPage(selectedItem as FoodsViewModel));
        }
        collectionView_MicunaFood.SelectedItem = null;
    }
}

The Code-Behind of FoodDetailPage has a similar logic to the previous one, the ReturnPreviousPage_Tapped" event created from GestureRecognizers, is responsible for returning to the HomePage, this triggers a 300ms animation(for the icon, see in the XAML), then complete the 50ms wait to return to the initial page.

public partial class FoodDetailPage : ContentPage
{

    // ...

    private async void ReturnPreviousPage_Tapped(object sender, EventArgs e)
    {
        await Task.Delay(350);
        await Navigation.PopAsync(true);
    }
}

FoodDetailViewModel is in charge of structuring the details of FoodDetailPage, we can see that HomeViewModel( ) is initialized in the constructor, because the list is there, the selectedItem variable filters the Foods list, and through LINQ the selectedFoodsViewModel is paired with the model property, finally, the FoodsViewModel( ) is initialized by adding the result of the selectedItem.

public class FoodDetailViewModel : BaseViewModel
{
    private readonly HomeViewModel homeViewModel;
    public FoodsViewModel SelectedFood { get; set; }
    public FoodDetailViewModel(FoodsViewModel selectedFoodsViewModel)
    {
        homeViewModel = new HomeViewModel();
        var selectedItem = homeViewModel.Foods.Where(f => f.Name_Food.Equals(selectedFoodsViewModel.Name_Food)).FirstOrDefault();
        SelectedFood = new FoodsViewModel(selectedItem);
    }
}

Proportions in the Interface

Going deeper into the issue of proportions, it is important to divide the elements of an interface into colored regions, both for the rows and for the columns, to later obtain a global view of both, this helps to locate the elements in the XAML.

Proportions in FoodDetailPage.xaml

<ScrollView>
    <Grid>
        <Grid.RowDefinitions>
            <!--  0  -->
            <RowDefinition Height="13" />
            <!--  1  -->
            <RowDefinition Height="48" />
            <!--  2  -->
            <RowDefinition Height="13" />
            <!--  3  -->
            <RowDefinition>
            <!-- Mix Structure  -->
            </RowDefinition>
            <!--  4  -->
            <RowDefinition Height="32" />
            <!--  5  -->
            <RowDefinition Height="Auto" />
            <!--  6  -->
            <RowDefinition Height="16" />
            <!--  7  -->
            <RowDefinition Height="Auto" />
            <!--  8  -->
            <RowDefinition>
            <!-- Mix Structure  -->
            </RowDefinition>
            <!--  9  -->
            <RowDefinition Height="16" />
            <!--  10  -->
            <RowDefinition Height="Auto" />
            <!--  11  -->
            <RowDefinition Height="8" />
            <!--  12  -->
            <RowDefinition Height="Auto" />
            <!--  13  -->
            <RowDefinition Height="10" />
            <!--  14  -->
            <RowDefinition Height="25" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <!--  0  -->
            <ColumnDefinition Width="0.01*" />
            <!--  1  -->
            <ColumnDefinition Width="0.04*" />
            <!--  2  -->
            <ColumnDefinition Width="32" />
            <!--  3  -->
            <ColumnDefinition Width="0.23*" />
            <!--  4  -->
            <ColumnDefinition Width="0.126*" />
            <!--  5  -->
            <ColumnDefinition Width="161" />
            <!--  6  -->
            <ColumnDefinition Width="32" />
            <!--  7  -->
            <ColumnDefinition Width="0.04*" />
            <!--  8  -->
            <ColumnDefinition Width="0.01*" />
        </Grid.ColumnDefinitions>

        <!--  Top Icons  -->
        <!--  Image  -->
        <!--  Title and Description  -->
        <!--  Description and Price Value  -->
        <!--  Add to Cart Button  -->
    </Grid>
</ScrollView>

Top Icons

Complying with the Material Design parameters, the icons were standardized with a Touch Target Area of 48*48px, all thanks to TouchEffect, a super useful and important effect from Xamarin Community Toolkit.

<!--  Top Icons  -->
<StackLayout
    Grid.Row="1"
    Grid.Column="1"
    Grid.ColumnSpan="2"
    xct:TouchEffect.NativeAnimation="True"
    xct:TouchEffect.AnimationDuration="300">
    <StackLayout.GestureRecognizers>
        <TapGestureRecognizer Tapped="ReturnPreviousPage_Tapped" />
    </StackLayout.GestureRecognizers>
    <Image
        Source="{StaticResource icon_left_arrow_line}"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />
</StackLayout>

<StackLayout
    Grid.Row="1"
    Grid.Column="6"
    Grid.ColumnSpan="2"
    xct:TouchEffect.NativeAnimation="True"
    xct:TouchEffect.AnimationDuration="300">
    <Image
        Source="{StaticResource icon_share_solid}"
        HorizontalOptions="Center"
        VerticalOptions="CenterAndExpand" />
</StackLayout>

Proportional Image

As for images, FFImageLoading is my ally to optimize them.

<!--  Image  -->
<ffimageloading:CachedImage
    Grid.Row="3"
    Grid.Column="2"
    Grid.ColumnSpan="5"
    CacheDuration="30"
    DownsampleToViewSize="True"
    FadeAnimationForCachedImages="True"
    FadeAnimationEnabled="True"
    FadeAnimationDuration="100"
    Source="{Binding SelectedFood.Image_Food}" />

Title and Description

Title and Description located proportionally.

<!--  Title and Description  -->
<Label
    Grid.Row="5"
    Grid.Column="2"
    Grid.ColumnSpan="5"
    Text="{Binding SelectedFood.Name_Food}"
    Style="{StaticResource TxtHeadLine5_1}" />
<Label
    Grid.Row="7"
    Grid.Column="2"
    Grid.ColumnSpan="5"
    MaxLines="100"
    Text="{Binding SelectedFood.Long_Description_Food}"
    Style="{StaticResource TxtBody1_1}" />

Description and Price Value

Description and Price Value located proportionally.

<!--  Description and Price Value  -->
<Label
    Grid.Row="10"
    Grid.Column="2"
    Grid.ColumnSpan="2"
    Text="Total Price:"
    Style="{StaticResource TxtBody1_1}" />
<Label
    Grid.Row="12"
    Grid.Column="2"
    Grid.ColumnSpan="2"
    Text="{Binding SelectedFood.Price_Food, StringFormat='{0:C2}'}"
    Style="{StaticResource TxtBody1_2}" />

Add to Cart Button

The Button is made with PancakeView, that custom shape was obtained with the "CornerRadius" property in 4 parameters, and with TouchEffect the essence that every Button should have was reinforced, the "add icon" was also encapsulated with PancakeView.

<!--  Add to Cart Button  -->
<yummy:PancakeView
    Grid.Row="9"
    Grid.RowSpan="5"
    Grid.Column="5"
    Grid.ColumnSpan="2"
    Padding="13,0"
    xct:TouchEffect.NativeAnimation="True"
    xct:TouchEffect.AnimationDuration="300"
    BackgroundColor="{DynamicResource colPrim}"
    CornerRadius="38,38,0,38">
    <StackLayout
        Orientation="Horizontal"
        VerticalOptions="CenterAndExpand"
        Spacing="7">
        <Label
            Text="Add to Cart"
            Style="{StaticResource TxtSubtitle1_3}"
            HorizontalOptions="EndAndExpand"
            VerticalOptions="Center" />
        <yummy:PancakeView
            BackgroundColor="{DynamicResource colQui}"
            HorizontalOptions="End"
            HeightRequest="48"
            WidthRequest="48"
            CornerRadius="24">
            <Image
                Source="{StaticResource icon_add_line}"
                VerticalOptions="CenterAndExpand" />
        </yummy:PancakeView>
    </StackLayout>
</yummy:PancakeView>

Good UX Practices in Harmonic Interfaces

Mix Structure

This Structure is the holy grail of Harmonic Interfaces, we can manipulate specific aspects in Tablets, Phones, Desktops, TV's, etc., and choose them on the different platforms that Xamarin.Forms supports*(UWP, Android, iOS, macOS, Samsung Tizen, etc.)*.

The following will name the parts that are not explicitly described in the Mix Structure:

Base.Property: The Base can be a Layout, Control, RowDefinition or ColumnDefinition, and the Property is the property from which the Mix will be added. Example:

<RowDefinition>
    <RowDefinition.Height>
    <!--  Use of the "Mix" here  -->
    </RowDefinition.Height>
</RowDefinition>

<Image>
    <Image.HeightRequest>
    <!--  Use of the "Mix" here  -->
    </Image.HeightRequest>
</Image>

Property Argument: It is the argument that the assigned property takes, in the following example the property argument is of type Double.
Property Value: It is the value of the property, according to the given argument.

<Image>
    <Image.HeightRequest>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Phone>
                <OnPlatform x:TypeArguments="x:Double">
                    <On
                        Platform="iOS,Android"
                        Value="120" />
                </OnPlatform>
            </OnIdiom.Phone>

            <OnIdiom.Tablet>
                <OnPlatform x:TypeArguments="x:Double">
                    <On
                        Platform="iOS"
                        Value="540" />
                    <On
                        Platform="Android"
                        Value="470.5" />
                </OnPlatform>
            </OnIdiom.Tablet>
        </OnIdiom>
    </Image.HeightRequest>
</Image>

Mix in Phones

Without using Mix on Phones: The image occupies almost the entire height of the device, is generated scrolled and a terrible global display of the user.
With Mix on Phones: The image has a fixed height, optimal display for the user and therefore good UX.

Mix in Tablets

Without using Mix on Tablets: By having an image with a fixed altitude and a defined distance with the lower controls, it generates a large space, in this case, the visual point is centered on the image of the food, which is little appreciated.
With Mix on Tablets: By generating proportions to the image and the distance with the lower controls, these adapt, eliminating said large space, the visual point of the image is good, and therefore there is a good UX.

The Result

Get the Code

All the code is open source, you can see it on my github.

Resources

Conclusions

Xamarin Community Toolkit is our ally when it comes to creating productive applications, a kit supported by community members under the guidance of the Xamarin team, that makes it a super reliable nuget package.
There are many ways to adapt our elements in an interface, Mix is one of them, because it encompasses devices and platforms that Xamarin.Forms supports.
Another thing that was seen are the colored guides for the locations of elements, this method helps to place the different layouts and controls that exist in a XAML interface.
The use of Material Design is essential as part of good UI/UX practices.

Xamarin.Forms UI/UX Challenges - Micuna Food - Part1

Daniel Monettelli — Sun, 20 Feb 2022 04:09:00 +0000

This first part of the challenge the protagonist is Visual State Manager, the easy use of changing one state to another through XAML and C# code-behind and combining with styles, makes it a powerful Xamarin.Forms feature.

Inspirational Design

Ghulam Rasool's Delicious Food design is a cool light theme from Material Design, it has icons and labels at the top, a category section, with two horizontal lists, accompanied by a stylish TabView that highlights the design.

Proportions in the Interface

In my other posts I always say that Grid is my ally when I create Harmonic Applications in Xamarin.Forms, since each control and layout has its own location thanks to the proportions, the following figures are a clear example of this.

Proportions in HomePage.xaml

<Grid>

    <Grid.RowDefinitions>
        <!--  0  -->
        <RowDefinition Height="0.869*" />
        <!--  1  -->
        <RowDefinition Height="Auto" />
        <!--  2  -->
        <RowDefinition Height="18" />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <!--  0  -->
        <ColumnDefinition Width="0.04*" />
        <!--  1  -->
        <ColumnDefinition Width="0.92*" />
        <!--  2  -->
        <ColumnDefinition Width="0.04*" />
    </Grid.ColumnDefinitions>

    <ScrollView
        Grid.RowSpan="3"
        Grid.ColumnSpan="3">
        <Grid>
            <Grid.RowDefinitions>
                <!--  0  -->
                <RowDefinition Height="24" />
                <!--  1  -->
                <RowDefinition Height="Auto" />
                <!--  2  -->
                <RowDefinition Height="56" />
                <!--  3  -->
                <RowDefinition Height="16" />
                <!--  4  -->
                <RowDefinition Height="Auto" />
                <!--  5  -->
                <RowDefinition Height="8" />
                <!--  6  -->
                <RowDefinition Height="Auto" />
                <!--  7  -->
                <RowDefinition Height="24" />
                <!--  8  -->
                <RowDefinition Height="70" />
                <!--  9  -->
                <RowDefinition Height="32" />
                <!--  10  -->
                <RowDefinition Height="Auto" />
                <!--  11  -->
                <RowDefinition Height="32" />
                <!--  12  -->
                <RowDefinition Height="Auto" />
                <!--  13  -->
                <RowDefinition Height="122" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <!--  0  -->
                <ColumnDefinition Width="0.04*" />
                <!--  1  -->
                <ColumnDefinition Width="0.087*" />
                <!--  2  -->
                <ColumnDefinition Width="0.68*" />
                <!--  3  -->
                <ColumnDefinition Width="0.153*" />
                <!--  4  -->
                <ColumnDefinition Width="0.04*" />
            </Grid.ColumnDefinitions>

            <!--  Top Icons and Labels  -->
            <!--  Category List         -->
            <!--  Dynamic Food List     -->
            <!--  List of All Foods     -->
        </Grid>
    </ScrollView>

    <!--  Elegant TabView  -->
    <tabs:TabHostView
        Grid.Row="1"
        Grid.Column="1">
    </tabs:TabHostView>

</Grid>

The Styles

MonettelliUIKIT's clean UI style architecture separates styles into Styles.xaml files linked with a ResourceDictionary into the various interfaces that are grouped in your folder.

Linked styles

<ContentPage.Resources>
      <ResourceDictionary Source="Styles.xaml" />
</ContentPage.Resources>

Top Icons and Label

Thanks to my method of proportions it is so easy to place the Image and Label controls.

<!--  Top Icons and Labels  -->
<Image
    Grid.Row="1"
    Grid.Column="1"
    Source="{StaticResource icon_filter_line}" />

<Image
    Grid.Row="1"
    Grid.RowSpan="2"
    Grid.Column="3"
    Source="{StaticResource icon_shopping_cart_line}" />

<Label
    Grid.Row="4"
    Grid.Column="1"
    Grid.ColumnSpan="2"
    Text="Delicious Food"
    Style="{StaticResource TxtHeadLine5_1}" />

<Label
    Grid.Row="6"
    Grid.Column="1"
    Grid.ColumnSpan="2"
    MaxLines="2"
    Text="We made fresh and Healthy food"
    Style="{StaticResource TxtSubtitle1_1}" />

Category List

The list of food categories has FlexLayout as its parent whose content is linked to a collection of items through BindableLayout, each item is encapsulated with PancakeView and its icons are Embedded Fonts.

<!--  Category List  -->
<FlexLayout
    x:Name="CategoryList"
    Grid.Row="8"
    Grid.Column="1"
    Grid.ColumnSpan="3"
    Direction="Row"
    JustifyContent="SpaceBetween"
    BindableLayout.ItemsSource="{Binding Categories}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <yummy:PancakeView
                CornerRadius="20"
                WidthRequest="70"
                HasShadow="True"
                Style="{StaticResource vsm_surfaceCategory}">
                <yummy:PancakeView.GestureRecognizers>
                    <TapGestureRecognizer Tapped="SelectedCategory_Tapped" />
                </yummy:PancakeView.GestureRecognizers>
                <StackLayout
                    VerticalOptions="FillAndExpand"
                    HorizontalOptions="FillAndExpand">
                    <Label
                        x:Name="ImageCategory"
                        HorizontalOptions="CenterAndExpand"
                        VerticalOptions="CenterAndExpand"
                        Text="{Binding Image_Category}"
                        FontFamily="MonettelliFontIcons"
                        FontSize="40"
                        Style="{StaticResource vsm_labelCategory}" />
                    <Label
                        x:Name="LabelCategory"
                        IsVisible="false"
                        Text="{Binding Name_Category}" />
                </StackLayout>
            </yummy:PancakeView>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

In the HomeViewModel class, the Categories collection is instantiated in the constructor by adding the name and the corresponding Font Icons.

The GetItemsForCategory( ) method will first clear the list, then the items variable starts a search action for Name_VarietyFood depending on the selected Category, at the end ToList( ) converts it from IEnumerable to List, then if there is a Category selected, we update the new added items in a foreach loop.

public class HomeViewModel : BaseViewModel
{

    // ...

    public ObservableRangeCollection<Category> Categories { get; set; }

    // ...

    public HomeViewModel()
    {

        //...

        Categories = new ObservableRangeCollection<Category>
        {
            new Category
            {
                Name_Category="Fast food",
                Image_Category=MonettelliFontIcons.icon_fast_food_line
            },
            new Category
            {
                Name_Category="Dessert",
                Image_Category=MonettelliFontIcons.icon_dessert_line
            },
            new Category
            {
                Name_Category="Beer",
                Image_Category=MonettelliFontIcons.icon_beer_line
            },
            new Category
            {
                Name_Category="Gourmet Food",
                Image_Category=MonettelliFontIcons.icon_gourmet_food_line
            },

        };

       // ...

    }

    public void GetItemsForCategory(string obj, bool isSelected)
    {
        DynamicFoods.Clear();
        var items = Foods.Where(f => f.VarietyFoods.Name_VarietyFood.Contains(obj)).ToList();
        if(isSelected == true)
        foreach (var item in items)
        {
            DynamicFoods.Add(new FoodsViewModel(item));
        }
    }

}

The FoodsViewModel class is responsible for refreshing the changes of the public properties of the DynamicFoods list thanks to the SetProperty( ) method, part of the MVVM Helpers nuget package, in the constructor these initial properties are instantiated with the data members of the Food class.

public class FoodsViewModel : BaseViewModel
{

    private VarietyFood varietyFoods;
    private string name_food;
    private string image_food;
    private double price_food;
    private string short_description_food;
    private string long_description_food;

    public VarietyFood VarietyFoods
    {
        get { return varietyFoods; }
        set { SetProperty(ref varietyFoods, value); }
    }

    public string Name_Food
    {
        get { return name_food; }
        set { SetProperty(ref name_food, value); }
    }

    public string Image_Food
    {
        get { return image_food; }
        set { SetProperty(ref image_food, value); }
    }

    public double Price_Food
    {
        get { return price_food; }
        set { SetProperty(ref price_food, value); }
    }

    public string Short_Description_Food
    {
        get { return short_description_food; }
        set { SetProperty(ref short_description_food, value); }
    }

    public string Long_Description_Food
    {
        get { return long_description_food; }
        set { SetProperty(ref long_description_food, value); }
    }

    public FoodsViewModel(Food food)
    {
        VarietyFoods = food.VarietyFoods;
        Name_Food = food.Name_Food;
        Image_Food = food.Image_Food;
        Price_Food = food.Price_Food;
        Short_Description_Food = food.Short_Description_Food;
        Long_Description_Food = food.Long_Description_Food;
    }

}

The HomeViewModel is bound with the BindingContext and a private keyword from that ViewModel, which will be used in the ChangeFontIconColor( ) method.

The ChangeFontIconColor( ) method consists of two variables similar to x:Name, the first indicates the category icon, while the second links the Name_Category(see HomePage.xaml), the string variable visualState makes use of a ternary operator, whose strings are the states assigned by VSM, the GoToState( ) method activates these states, finally, the GetItemsForCategory( ) method will take care of displaying the items based on the labelCategory.Text.

The SelectedCategory_Tapped( ) event consists of two variables, the first one casts a VisualElement(or the name of the layout of said event) and the second one casts but the collection's parent layout (FlexLayout). For the non-selected items in the category list to be in "normal" mode, we use the foreach loop to the parent.Children list, finally, we add the methods with "Selected" states.

public partial class HomePage : ContentPage
{
    private HomeViewModel homeViewModel;

    public HomePage()
    {
        InitializeComponent();

        BindingContext = homeViewModel = new HomeViewModel();

        // ...
    }

    // ...

    private void SelectedCategory_Tapped(object sender, EventArgs e)
    {
        var surfaceCategory = sender as VisualElement;
        var parent = surfaceCategory.Parent as FlexLayout;
        foreach (View child in parent.Children)
        {
            VisualStateManager.GoToState(child, "Normal");
            ChangeFontIconColor(child, false);
        }
        VisualStateManager.GoToState(surfaceCategory, "Selected");
        ChangeFontIconColor(surfaceCategory, true);
    }

    void ChangeFontIconColor(VisualElement child, bool isSelected)
    {
        var imageCategory = child.FindByName<Label>("ImageCategory");
        var labelCategory = child.FindByName<Label>("LabelCategory");
        string visualState = isSelected ? "Selected" : "Normal";
        VisualStateManager.GoToState(imageCategory, visualState);
        homeViewModel.GetItemsForCategory(labelCategory.Text, isSelected);
    }

}

The FilterCategory( ) method is responsible for selecting a category automatically when the application is opened, in the SelectedCategory_Tapped( ) event, the sender parameter is activated with Layout.Children[ ] indicating the category number in the array, finally, it is said instance method in the constructor.

public partial class HomePage : ContentPage
{
    // ...

    public HomePage()
    {
        InitializeComponent();

        // ...

        FilterCategory();
    }

    void FilterCategory()
    {
        SelectedCategory_Tapped(CategoryList.Children[3], null);
    }

    private void SelectedCategory_Tapped(object sender, EventArgs e)
    {
        // ...
    }

}

Dynamic Food List

This dynamic list uses CollectionView, its orientation is horizontal, it has two proportional layers for the food image that is above the child Frame, and they are optimized thanks to the FFImageLoading nuget package.

<!--  Dynamic Food List  -->
<CollectionView
    x:Name="collectionView_MicunaFood"
    Grid.Row="10"
    Grid.Column="1"
    Grid.ColumnSpan="4"
    ItemsSource="{Binding DynamicFoods}"
    SelectionMode="Single"
    HeightRequest="288">
    <CollectionView.ItemsLayout>
        <GridItemsLayout
            Orientation="Horizontal"
            HorizontalItemSpacing="35" />
    </CollectionView.ItemsLayout>
    <CollectionView.ItemTemplate>
        <DataTemplate>
            <Grid WidthRequest="190">
                <Grid.RowDefinitions>
                    <!--  0  -->
                    <RowDefinition Height="103" />
                    <!--  1  -->
                    <RowDefinition Height="59" />
                    <!--  2  -->
                    <RowDefinition Height="126" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <!--  0  -->
                    <ColumnDefinition Width="15" />
                    <!--  1  -->
                    <ColumnDefinition Width="160" />
                    <!--  2  -->
                    <ColumnDefinition Width="15" />
                </Grid.ColumnDefinitions>
                <Frame
                    Grid.Row="1"
                    Grid.RowSpan="2"
                    Grid.Column="0"
                    Grid.ColumnSpan="3"
                    CornerRadius="20">
                    <Frame.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Offset="0.1" Color="{StaticResource colStartSurf1}" />
                            <GradientStop Offset="1.0" Color="{StaticResource colEndSurf1}" />
                        </LinearGradientBrush>
                    </Frame.Background>
                    <Grid>
                        <Grid.RowDefinitions>
                            <!--  0  -->
                            <RowDefinition Height="0.32*" />
                            <!--  1  -->
                            <RowDefinition Height="0.086*" />
                            <!--  2  -->
                            <RowDefinition Height="Auto" />
                            <!--  3  -->
                            <RowDefinition Height="0.043*" />
                            <!--  4  -->
                            <RowDefinition Height="Auto" />
                            <!--  5  -->
                            <RowDefinition Height="0.032*" />
                            <!--  6  -->
                            <RowDefinition Height="0.054*" />
                            <!--  7  -->
                            <RowDefinition Height="Auto" />
                            <!--  8  -->
                            <RowDefinition Height="0.043*" />
                            <!--  9  -->
                            <RowDefinition Height="0.079*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <!--  0  -->
                            <ColumnDefinition Width="0.08*" />
                            <!--  1  -->
                            <ColumnDefinition Width="0.042*" />
                            <!--  2  -->
                            <ColumnDefinition Width="0.462*" />
                            <!--  3  -->
                            <ColumnDefinition Width="0.126*" />
                            <!--  4  -->
                            <ColumnDefinition Width="0.168*" />
                            <!--  5  -->
                            <ColumnDefinition Width="0.042*" />
                            <!--  6  -->
                            <ColumnDefinition Width="0.08*" />
                        </Grid.ColumnDefinitions>
                        <Label
                            Grid.Row="2"
                            Grid.Column="2"
                            Grid.ColumnSpan="3"
                            Text="{Binding Name_Food}"
                            Style="{StaticResource TxtSubtitle1_2}" />
                        <Label
                            Grid.Row="4"
                            Grid.Column="2"
                            Grid.ColumnSpan="3"
                            MaxLines="2"
                            Text="{Binding Short_Description_Food}"
                            Style="{StaticResource TxtSubtitle2_1}" />
                        <Label
                            Grid.Row="7"
                            Grid.Column="2"
                            Text="{Binding Price_Food, StringFormat='{0:C2}'}"
                            Style="{StaticResource TxtSubtitle1_2}" />
                        <yummy:PancakeView
                            Grid.Row="6"
                            Grid.RowSpan="3"
                            Grid.Column="4"
                            Grid.ColumnSpan="2"
                            CornerRadius="80"
                            BackgroundColor="{DynamicResource colPrim}">
                            <Image
                                Grid.Row="0"
                                Grid.RowSpan="2"
                                Grid.Column="1"
                                HorizontalOptions="Center"
                                VerticalOptions="Center"
                                TranslationY="1"
                                TranslationX="1"
                                Source="{StaticResource icon_heart_line}" />
                        </yummy:PancakeView>
                    </Grid>
                </Frame>
                <ffimageloading:CachedImage
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.Column="1"
                    CacheDuration="30"
                    DownsampleToViewSize="True"
                    FadeAnimationForCachedImages="True"
                    FadeAnimationEnabled="True"
                    FadeAnimationDuration="100"
                    Source="{Binding Image_Food}" />
            </Grid>
        </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>

In HomeViewModel, the public collection DynamicFoods is created and then instantiated in the constructor.

public class HomeViewModel : BaseViewModel
{

    // ...

    public ObservableRangeCollection<FoodsViewModel> DynamicFoods { get; set; }

    public HomeViewModel()
    {

        DynamicFoods = new ObservableRangeCollection<FoodsViewModel>();

        // ...

    }

    // ...
}

List of All Foods

This list is static, it is inside a CarouselView, its orientation is horizontal, it has two proportional layers since the image of the food protrudes a little from the Child Frame, it is also optimized with FFImageLoading.

<!--  List of All Foods  -->
<CarouselView
    x:Name="carouselView_MicunaFood"
    Grid.Row="12"
    Grid.Column="1"
    Grid.ColumnSpan="3"
    HeightRequest="157"
    ItemsSource="{Binding Foods}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout
            Orientation="Horizontal"
            SnapPointsType="MandatorySingle" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <!--  0  -->
                    <RowDefinition Height="0.076*" />
                    <!--  1  -->
                    <RowDefinition Height="0.924*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <!--  0  -->
                    <ColumnDefinition Width="0.577*" />
                    <!--  1  -->
                    <ColumnDefinition Width="0.196*" />
                    <!--  2  -->
                    <ColumnDefinition Width="0.227*" />
                </Grid.ColumnDefinitions>
                <Frame
                    Grid.Row="1"
                    Grid.Column="0"
                    Grid.ColumnSpan="2"
                    CornerRadius="20"
                    HeightRequest="145">
                    <Frame.Background>
                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                            <GradientStop Offset="0.1" Color="{StaticResource colStartSurf1}" />
                            <GradientStop Offset="1.0" Color="{StaticResource colEndSurf1}" />
                        </LinearGradientBrush>
                    </Frame.Background>
                    <Grid>
                        <Grid.RowDefinitions>
                            <!--  0  -->
                            <RowDefinition Height="0.2*" />
                            <!--  1  -->
                            <RowDefinition Height="Auto" />
                            <!--  2  -->
                            <RowDefinition Height="0.055*" />
                            <!--  3  -->
                            <RowDefinition Height="Auto" />
                            <!--  4  -->
                            <RowDefinition Height="0.11*" />
                            <!--  5  -->
                            <RowDefinition Height="Auto" />
                            <!--  6  -->
                            <RowDefinition Height="0.2*" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <!--  0  -->
                            <ColumnDefinition Width="23" />
                            <!--  1  -->
                            <ColumnDefinition Width="0.49*" />
                            <!--  2  -->
                            <ColumnDefinition Width="0.064*" />
                            <!--  3  -->
                            <ColumnDefinition Width="0.422*" />
                        </Grid.ColumnDefinitions>
                        <Label
                            Grid.Row="1"
                            Grid.Column="1"
                            Text="{Binding Name_Food}"
                            Style="{StaticResource TxtSubtitle1_2}" />
                        <Label
                            Grid.Row="3"
                            Grid.Column="1"
                            MaxLines="3"
                            Text="{Binding Short_Description_Food}"
                            Style="{StaticResource TxtSubtitle2_1}" />
                        <Label
                            Grid.Row="5"
                            Grid.Column="1"
                            Text="{Binding Price_Food, StringFormat='{0:C2}'}"
                            Style="{StaticResource TxtSubtitle1_2}" />
                    </Grid>
                </Frame>
                <ffimageloading:CachedImage
                    Grid.Row="0"
                    Grid.RowSpan="2"
                    Grid.Column="1"
                    Grid.ColumnSpan="2"
                    CacheDuration="30"
                    DownsampleToViewSize="True"
                    FadeAnimationForCachedImages="True"
                    FadeAnimationEnabled="True"
                    FadeAnimationDuration="100"
                    Source="{Binding Image_Food}" />
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

In HomeViewModel, the public Foods collection is created and then instantiated in the constructor adding all the data for each property.

public class HomeViewModel : BaseViewModel
{

    public ObservableRangeCollection<Food> Foods { get; set; }

    // ...

    public HomeViewModel()
    {

        Foods = new ObservableRangeCollection<Food>
        {
            new Food
            {
                Id=1,
                VarietyFoods=new VarietyFood
                {
                      Name_VarietyFood="Fast food",
                      Image_VarietyFood=MonettelliFontIcons.icon_fast_food_line
                },
                Name_Food="Black ramen",
                Image_Food="https://raw.githubusercontent.com/danielmonettelli/Area51/main/Foods/img_black_ramen.png",
                Price_Food=30.00,
                Short_Description_Food="Thick and milky broth with an intense flavor.",
                Long_Description_Food="Our Hakata Black Ramen is a rich and thick stock tonkotsu ramen typical of the Hakata area, in Fukuoka (south of the country), which is made by cooking pork bones for hours to obtain a thick and milky broth with an intense flavor that is It is accompanied by strong flavors such as garlic or ginger, resulting in a powerful umami."
            },

            // more food items...
        };
    }

    // ...

}

Elegant TabView

To create this great floating button style TabView I used the Sharpnado.Tabs nuget package, a steroidal layout, fully customizable and with excellent performance.

<Grid>

    <!--  ...  -->

    <!--  Elegant TabView  -->
    <tabs:TabHostView
        Grid.Row="1"
        Grid.Column="1"
        HeightRequest="86"
        CornerRadius="35"
        IsSegmented="True"
        Shades="{sh:ShadeStack}"
        BackgroundColor="{DynamicResource colPrim}"
        TabType="Fixed">

        <tabs:TabHostView.Tabs>

            <tabs:BottomTabItem
                IconImageSource="{StaticResource icon_tab_home_line}"
                IsTextVisible="False"
                SelectedTabColor="{DynamicResource colTer}" />

            <tabs:BottomTabItem
                IconImageSource="{StaticResource icon_tab_wallet_line}"
                IsTextVisible="False"
                SelectedTabColor="{DynamicResource colTer}" />

            <tabs:BottomTabItem
                IconImageSource="{StaticResource icon_tab_conversation_line}"
                IsTextVisible="False"
                SelectedTabColor="{DynamicResource colTer}" />

            <tabs:BottomTabItem
                IconImageSource="{StaticResource icon_tab_user_line}"
                IsTextVisible="False"
                SelectedTabColor="{DynamicResource colTer}" />

        </tabs:TabHostView.Tabs>
    </tabs:TabHostView>

</Grid>

The Result

Get the Code

All the code is open source, you can see it on my github.

Resources

Conclusions

I really enjoyed the challenge, I made use of collections in C#, a feature that we will see in all applications and that it is important to know how to use them to interact with the data of an API, a local json, etc. Regarding the interface, I am amazed by the power that Visual State Manager has, I will take it into account in the next versions of MonettelliUIKIT. Thank you very much for viewing this post, see you in the next part.

Harmonic Interfaces with MonettelliUIKIT in Xamarin.Forms Vol 1

Daniel Monettelli — Sun, 20 Feb 2022 03:31:00 +0000

When creating interfaces in Xamarin.Forms, most developers (and myself included) use the physical device or the emulator to give the appearance of the design that is being replicated, and what about the rest of the devices that exist around the world ?

From this question this publication is born, in my beginnings as a developer of Xamarin Native and Xamarin.Forms I focused on the C # language, as I was learning, I realized that the appearance of interfaces are also a fundamental complement in applications, therefore, I continue studying various UI/UX courses, and therefore, my comfort zone I extend it more and more. To date, I love creating beautiful applications, harmonizing each device (phones, tablets, desktops, etc.).

¿What are Harmonic interfaces?

Harmonic Interfaces is the balance of a group of controls with the dimensions of the devices that exist today.

Xamarin.Forms and its powerful Hot Reload, allow you to visualize in real time the process of the interfaces in XAML and C #, with this great tool, I did my practices to perfect my interfaces, and to present my results in this publication.

The harmonic layout

Xamarin.Forms has different layouts, each with a purpose, of all of them, the one indicated for me is GridLayout, because with RowDefinitions and ColumnDefinitions I can cleanly manage my controls, however what stands out is proportional mode, and that is where we will focus on this post.

Harmonic proportions

The proportional mode is in relation to the dimensions of the device and the content involved in the interface, that is, if a certain row and/or column proportion is added to a control, it is adapted to each device.

¿How to use proportions in GridLayout?

For this, it is necessary to use a design tool (in my case Adobe XD), adding semi-transparent blocks of different colors (both for rows and columns) to all the spaces of your design, in order to cover the positions that the controls, remember that each design has its difficulty.

The Ing. Juan Carlos Ricalde Poveda (UI/UX Expert), recommends that the artboard (Adobe XD or another tool) be done with the smallest screen size (preferably Android Phones), this helps extend and not reduce the space taken up by the controls.

In the "Prototype" section, we create the flow of the designs(if there are two or more interfaces).

In the "Share" section, in the settings part, select the "Development" mode, once the link is created, open in the default browser.

Tip: To have a harmonic ratio, divide the row and/or column distance of a control by the total distance of the design itself.
{: .prompt-tip }

In the Xamarin.Forms XAML, add Grid to encapsulate the different controls that your interface will have, together with the harmonic proportions that have been calculated, then with Grid.Colum and Grid.Row, we position the controls, if it occupies more than one space you can use Grid.ColumSpan or Grid.RowSpan, AND WUALÁ !, you already have a harmonic interface.

Note: Some controls will necessarily use Auto since their dimensions do not have to be changed, ahem (Label, Entry, etc).

 <Grid>

            <Grid.RowDefinitions>
                <RowDefinition Height=".175*" />
                <RowDefinition Height=".175*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".075*" />
                <ColumnDefinition Width=".85*" />
                <ColumnDefinition Width=".075*" />
            </Grid.ColumnDefinitions>


             <Image
                Grid.Row="0"
                Grid.RowSpan="2"
                Grid.Column="0"
                Grid.ColumnSpan="3"
                Aspect="AspectFill"
                Source="ItalianFood.png" />

             <Label
                Grid.Row="2"
                Grid.Column="0"
                Grid.ColumnSpan="2"
                Text="Hello Monettelli UIKIT"
                Style="{StaticResource TxtHeadLine4_1}" />

        </Grid>

Margin and Padding you will rarely see involved, because it generates "Absolute Distances", the following code is a clear example.

    <Grid>

            <Grid.RowDefinitions>
                <RowDefinition Height=".35*" />
                <RowDefinition Height=".65*" />
            </Grid.RowDefinitions>

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width=".075*" />
                <ColumnDefinition Width=".85*" />
                <ColumnDefinition Width=".075*" />
            </Grid.ColumnDefinitions>


             <Image
                Grid.Row="0"
                Grid.Column="1"
                Aspect="AspectFill"
                Source="ItalianFood.png" />

        </Grid>

MonettelliUIKIT, Shell and MVVM on stage

MonettelliUIKIT implements the "Clean UI Style Architecture", which reduces the time of developing beautiful interfaces and maintaining them, then I explain the process step by step.

a) Use of embedded Fonts and SVG's

In my publication Creating a clean Style Library for Xamarin.Forms I write about how to customize FontIcons and add fonts themselves, now with Embedded Fonts, it simplifies the use of such fonts, the next versions of MonettelliUIKIT will have this feature, considerably reducing the code and at the same time making us productive.

"Embedded Fonts" in AssemblyInfo.cs:

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]


#region FontIcons Embedded
[assembly: ExportFont("monettelliuikitfonticons.ttf", Alias = "MonettelliFontIcons")]
#endregion

#region FontFamily Embedded
[assembly: ExportFont("SourceSansPro-Bold.ttf", Alias = "SourceSansPro_Bold")]
[assembly: ExportFont("OpenSans-ExtraBold.ttf", Alias = "OpenSans_ExtraBold")]
[assembly: ExportFont("OpenSans-Bold.ttf", Alias = "OpenSans_Bold")]
[assembly: ExportFont("OpenSans-SemiBold.ttf", Alias = "OpenSans_SemiBold")]
[assembly: ExportFont("OpenSans-Regular.ttf", Alias = "OpenSans_Regular")]
#endregion

On the other hand, SVG's are already embedded, thanks to the Nuget package called Xamarin.FFImageLoading.Svg.Forms.

 <ffSvg:SvgCachedImage
                Grid.Row="0"
                BackgroundColor="#F5CEB8"
                Source="resource://XF_Demo.SVGImages.svg_bg_food.svg" />

b) MVVM Pattern

In the following image we can see the flow of the MVVM Pattern.

1.- The "Models" folder is part of the business logic, the models are made up of Full Property and inherit INotifyPropertyChanged, the other class houses the data repository.

Model Structure:

public class Exercise : INotifyPropertyChanged
{

        private Guid _id_Exercise;
        private string _name_Exercise;

        public Guid Id_Exercise
        {
            get => _id_Exercise;
            set
            {
                _id_Exercise = value;
                RaisePropertyChanged(nameof(Id_Exercise));
            }
         }

        public string Name_Exercise
        {
            get => _name_Exercise;
            set
            {
                _name_Exercise = value;
                RaisePropertyChanged(nameof(Name_Exercise));
            }
         }


        public event PropertyChangedEventHandler PropertyChanged;

        public void RaisePropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
 }

Structure of the Model Repository:

 public static class ExerciseRepository
 {
        static ExerciseRepository()
        {
            if (Exercises == null)
            {
                Exercises = new List<Exercise>
                {
                    new Exercise
                    {
                        Id_Exercise = Guid.Parse("{70822596-265D-49E3-8CCC-CD996093E601}"),
                        Name_Exercise = "Diet Recommendation",
                        Image_Exercise = "resource://XF__EmbeddedSVG.SVGImages.svg_hamburger.svg",
                        Duration_Exercise = "15-55 MIN Course",
                        Description_Exercise = "Learn how to Create Your Clients(or your)perfect diet and nutrition plan based on their goals, preferences and lifestyle"
                    }
                };
            }
        }

        public static List<Exercise> Exercises { get; set; }
 }

2.- The "Services" folder has two services, a flexible navigation class, and a Data Services class, each inheriting its respective Interface.

Navigation Service:

public class NavigationService : INavigationService
  {
        private Dictionary<string, Type> pages { get; } = new Dictionary<string, Type>();

        public Page MainPage => Application.Current.MainPage;

        public void Configure(string key, Type pageType) => pages[key] = pageType;

        public void GoBack() => MainPage.Navigation.PopAsync();

        public void NavigateTo(string pageKey, object parameter = null)
        {
            if (pages.TryGetValue(pageKey, out Type pageType))
            {
                var page = (Page)Activator.CreateInstance(pageType);
                page.SetNavigationArgs(parameter);

                MainPage.Navigation.PushAsync(page);

                (page.BindingContext as MyBaseViewModel).Initialize(parameter);
            }
            else
            {
                throw new ArgumentException($"This page doesn't exist: {pageKey}.", nameof(pageKey));
            }
        }
    }

    public static class NavigationExtensions
    {
        private static ConditionalWeakTable<Page, object> arguments = new ConditionalWeakTable<Page, object>();

        public static object GetNavigationArgs(this Page page)
        {
            object argument;
            arguments.TryGetValue(page, out argument);

            return argument;
        }

        public static void SetNavigationArgs(this Page page, object args)
            => arguments.Add(page, args);
    }

Data Services:

public class ExerciseDataService : IModelDataService<Exercise>
 {
        public void Add(Exercise model)
        {
            throw new NotImplementedException();
        }

        public List<Exercise> GetAll()
        {
            return ExerciseRepository.Exercises;
        }

        public void Remove(Exercise model)
        {
            throw new NotImplementedException();
        }

        public void Update(Exercise model)
        {
            throw new NotImplementedException();
        }
 }

3.- As a Singleton, the Services are managed throughout the project*(mainly in the ViewModels)*.

Singleton in App.xaml.cs:

public partial class App : Application
 {
        public static ExerciseDataService ExerciseDataService { get; } = new ExerciseDataService();
        public static SessionDataService SessionDataService { get; } = new SessionDataService();
        public static NavigationService NavigationService { get; } = new NavigationService();
        public App()
        {
            InitializeComponent();

            NavigationService.Configure(ViewNames.ExercisePage, typeof(ExercisePage));
            NavigationService.Configure(ViewNames.ExerciseDetailPage, typeof(ExerciseDetailPage));

            MainPage = new AppShell();
            //MainPage = new NavigationPage(new ExercisePage());
        }

        protected override void OnStart()
        {
        }

        protected override void OnSleep()
        {
        }

        protected override void OnResume()
        {
        }
 }

4.- The "Helpers" folder, add an Enum Type called "ThemeType", where you have the different Themes, the ThemeHelper class inherits said Enum, it should be noted that its use is through the method of a command that will be created in the ViewModel.

ThemeType.cs:

 public enum ThemeType
 {
        Light,
        Dark
 }

ThemeHelper.cs:

public static class ThemeHelper
{
        public static void ChangeTheme(ThemeType themeType)
        {
            if (Application.Current.Resources != null)
                Application.Current.Resources.Clear();


            switch (themeType)
            {
                case ThemeType.Light:
                    Application.Current.Resources = new LightTheme();
                    break;
                case ThemeType.Dark:
                    Application.Current.Resources = new DarkTheme();
                    break;
            }
        }
}

5.- The "ViewModels" folder has a Base Class for each ViewModel.

MyBaseViewModel.cs:

 public class MyBaseViewModel : BaseViewModel
 {
        public virtual void Initialize(object parameter)
        {

        }
 }

ViewModel Structure:

public class ExerciseViewModel : MyBaseViewModel
 {
        public ThemeType SelectedTheme;
        public ICommand ExerciseSelectedCommand { get; }
        public ICommand ThemeSelectedCommand { get; }

        private ObservableRangeCollection<Exercise> _exercises;

        public ObservableRangeCollection<Exercise> Exercises
        {
            get => _exercises;
            set
            {
                _exercises = value;
                OnPropertyChanged(nameof(Exercises));
            }
        }

        private Exercise _selectedExercise;

        public Exercise SelectedExercise
        {
            get { return _selectedExercise; }
            set { SetProperty(ref _selectedExercise, value); }
        }

        public ExerciseViewModel()
        {
            Exercises = new ObservableRangeCollection<Exercise>(App.ExerciseDataService.GetAll());

            ExerciseSelectedCommand = new Command(OnExerciseSelectedCommand);

            ThemeSelectedCommand = new Command(OnThemeSelectedCommand);
        }

        private void OnThemeSelectedCommand()
        {
            if(SelectedTheme == ThemeType.Light)
            {
                SelectedTheme = ThemeType.Dark;
            }
            else
            {
                SelectedTheme = ThemeType.Light;
            }

            ThemeHelper.ChangeTheme(SelectedTheme);
        }

        private void OnExerciseSelectedCommand()
        {
            if (SelectedExercise != null)
            {
                App.NavigationService.NavigateTo(ViewNames.ExerciseDetailPage, SelectedExercise);

                SelectedExercise = null;
            }
        }
 }

6.- The "Utilities" folder has two classes, a ViewModelLocator(useful for unit tests) that facilitates the replacement of the ViewModel in each View, and a ViewNames that names each View.

ViewModelLocator Structure:

 public static class ViewModelLocator
 {
        public static ExerciseViewModel ExerciseViewModel { get; set; }
            = new ExerciseViewModel();

        public static ExerciseDetailViewModel ExerciseDetailViewModel { get; set; }
            = new ExerciseDetailViewModel();
 }

ViewNames.cs:

public class ViewNames
{
        public const string ExercisePage = "ExercisePage";
        public const string ExerciseDetailPage = "ExerciseDetailPage";
}

7.- In the C# code-behind file of the View, through the BindingContext property, we link the ViewModelLocator.

ViewModelLocator in the C# code-behind file:

public partial class ExercisePage : ContentPage
{
        public ExercisePage()
        {
            InitializeComponent();

            BindingContext = ViewModelLocator.ExerciseViewModel;
        }
}

c) XAML Harmonic

Now that you have a clear vision of what interface harmony is all about, let's apply what we have learned in the following design.

Making a feedback, we analyze the design(s) in Adobe XD, we add multi-colored blocks to the rows and columns, we prototype and create the link that will help to see the distances of these blocks, and then calculate the proportions of each design.

Using the GridLayout, we complement these proportions in Row(Colum)Definitions, and with the help of the design, we position the controls, then through StaticResource/DynamicResource, we incorporate the styles assigned in Styles.xaml.

Complete Structure of a Style with OnIdiom:

 <Style
        x:Key="TxtHeadLine4_1"
        TargetType="Label">
        <Setter Property="TextColor" Value="{DynamicResource colSec}" />
        <Setter Property="FontSize">
            <OnIdiom
                x:TypeArguments="x:Double"
                Watch="{StaticResource TxtSizeCap_12}"
                Phone="{StaticResource TxtSizeH4_34}"
                Desktop="{StaticResource TxtSizeH3_48}"
                Tablet="{StaticResource TxtSizeH3_48}"
                TV="{StaticResource TxtSizeH3_48}" />
        </Setter>
        <Setter Property="FontFamily" Value="OpenSans_ExtraBold" />
    </Style>

d) Shell in action

MonettelliUIKIT comes with Shell, and with AppShell.xaml you can add Views, easily modify colors, labels, images, etc. It practically makes life easier for the developer.

e) Final Score

If you have applied each step, the result will be similar to this one.

Conclusions

The use of harmonic proportions is one of many methods to stylize interfaces, make them flexible, and above all, provide a good user experience on each device.

MonettelliUIKIT is a great ally of the UI/UX in Xamarin.Forms and I hope it is also in the new .NET MAUI.

Resources

Github Repository

danielmonettelli/XF_HarmonicInterfaces

Sketch App Sources

Exercise App Concept Sketch Resource

What’s new in Xamarin.Forms – XAML

Daniel Monettelli — Sun, 20 Feb 2022 02:59:00 +0000

The new features of XAML help productivity and thus reduce development time in mobile applications.

The Xamarin.Forms team has put the batteries in giving the developer a pleasant experience, and XAML is no exception.

Maddy Leger (Program Manager at Microsoft working on Xamarin.Forms tooling) in his video tutorial tells us about many new features that we can use in XAML, these are the most relevant.

Quick encapsulation of controls

This improvement groups controls using the “Surround With…” option or with the “Ctrl + K, Ctrl + S” shortcut.

XAML Regions

Without a doubt this characteristic fascinates me, in C # it is good practice to separate important parts, contract them or expand them is something that a simple comment does not do, with “XAML Regions” we can reorganize our code and add good practices in the process.

Go To Definition

This option allows you to go directly to an object, it is great to locate styles, binding, etc, that we are using.

GitHub Update: https://github.com/danielmonettelli/XF_FoodApp

Conclusions

As you can see, Microsoft continues to take great steps to meet the needs of the Developer of Xamarin.Forms, “productivity” is one of the goals that is taking it very seriously, I look forward to the next updates to come.

Creating a clean Style Library for Xamarin.Forms

Daniel Monettelli — Sun, 20 Feb 2022 02:35:00 +0000

A brief introduction of how this publication originated, seeing several Xamarin.Forms projects with different ways of using styles, I said to myself, why not make a Library that is universal for any type of application?, Then I started researching Microsoft documentation, blogs, etc., and thus this great project was born.

Before explaining step by step the components that make up this Style Library, we will add two primary extensions focused on the order and readability of XAML.

XAML Styler

XAML Styler is an extension compatible with Visual Studio 2017 and 2019, its purpose is to organize the XAML code.

Next, I show you my configuration for XAML Styler.

We install the plugin, then we go to TOOLS / Options / XAML Styler and leave it just like the following images.

…to then obtain this result in our XAML code.

Color picker

Color picker is another extension compatible with Visual Studio 2017 and 2019, its purpose is to highlight hexadecimal colors, RGB, etc., it is very useful to realize what type of color we use in an XAML style or control.

To have it included in our Visual Studio work area we will make the following configurations:

Install the extension, then go to TOOLS, click on “Color Picker”, and attach it to the right side of Visual Studio.

Now that we have these two great extensions, we will begin to understand the Style Library.

Styles Architecture in Xamarin.Forms

Before talking about style architecture, we have to see what interfaces have in common, we can see that there are images, icons, texts and the spaces that separate it.

From there, this style architecture emerges, the following image shows the flow of the Style Library:

Does it seem complicated to understand ?, do not worry, then I explain step by step said Workflow.

1.- Font Icons

The Font Icons are enriched icons SVG font, exactly as you read it , let alone implement your project type icons png, jpg, etc, now you will work with sources, and how do I get Font Icons ?, there are two ways to acquire :

On websites that offer free and paid Font Icons, a popular one is MaterialDesignIcons.
The other way is to create your own icon source, ooohhhhhhh !!!!, we will use two tools, AdobeXD and IconMoon:
In AdobeXD, batch select the icons and export it to SVG.
In IconMoon, convert them to a custom font.
With “ IconFontToCode”, you will transform the source into code, which you will use in your Xamarin.Forms project.

…then we copy the two sources to the Android and iOS projects.

In the .NET Standard project, create a folder called “Styles”, and two classes called “IconFont.cs” (a nexa materialdesignicons-webfont.ttf ) and “CustomIconFont.cs” ( appendix CustomIconFont.ttf ), then copy the code generated by ”IconFontToCode”.

2.- Resource Dictionary in XAML

2.1.- Texts.xaml

This ResourceDictionary establishes the sources of the application through OnPlatform, and with their respective variants called Bold, ItalicBold, italic, etc.

First we add the TTF or OTF source, Adam Pedley’s post clearly explains how to do it.

TIP: The x:key must start with the variant followed by the name of the font family, this helps to differentiate from other sources. Example: BoldFont_ProductSans.

Font size is an important issue, and thanks to Material Design we can categorize them as shown in the left image.

TIP: The x:key begins with TxtSize followed by the abbreviation of the Scale Category and theSize of this, example TxtSizeH2_60 (see the full Image).

As for the “TargetType” of the styles, we will use controls that have text, example: Button, Label, etc.

The abbreviation is easy to understand, and thanks to the XAML intellisense we will create styles in record time, in the following image you can distinguish the parts that integrate a text style.

CASE: When we have two styles with similar FontSize but with different TextColor or FontFamily, the abbreviation ends in a number that indicates the priority, this case can be seen in the image.

2.2.- Icons.xaml

This ResourceDictionary establishes the IconFonts through OnPlatform, its structure can be seen in the following image.

To use the IconFonts, the labeling “FontImageSource” must be created, and since we are using Shell we must separate the resources from Tabs, Flyout and Interfaces ( views that will use these resources ).

2.3 Spaces.xaml

This ResourceDictionary implements Thickness, and thanks to OnPlatform we establish the amplitude of the Layouts, following the parameters of Material Design.

We regularly use GridLayout, StackLayout and Frame, therefore, the styles will be exclusive to them.

NOTE: The layouts and controls mentioned have default spaces, for which, assign a group of basic styles and whose properties are of value 0 (See the image "Spaces BASE").

3.- Themes

This ResourceDictionary implements “Color”, a group of colors that will qualify the interfaces of Xamarin.Forms.

NOTE: The colors of the themes I classify as follows:

Color Range: It is the range of colors that the interfaces will have, the range is by level of prominence.

Backgroundcolors: They are the background colors of an interface.

Entry Colors: Typical colors for the Entry control.

Border Colors: Border colors for controls such as Button, frame etc.

Remark Colors: Colors for the Button type Label control.

Surface Colors: Surface colors for Frames.

Shell Colors: Colors for Tabs and Flyout.

The help of Zeplin is very important to organize resources to the themes, only the way you use it depends, in the following gif you can see how I import colors from Zeplin to Visual Studio.

4.- General.xaml

This ResourceDictionary merges Texts.xaml, Icons.xaml and Spaces.xaml through MergedDictionaries, thanks to Adam Pedley, it is possible to separate several XAML files, and create this great style architecture.

5.- App.xaml

The XAML App class, is the nexus of the architecture of styles and the Views of Xamarin.Forms, therefore, to link them, it is necessary to add a dictionary of resources, in this case, the source is WhiteTheme.xaml.

6.- AppShelll.xaml

AppShell seeks to reduce the complexity of creating mobile applications by providing fundamental application architecture features. As a complete visual hierarchy, common browsing experience, URI-based routing and integrated search management ( David Ortinau, Principal Program Manager of Microsoft ).

In the following image we can see the structure of Shell in broad strokes.

7.- Views

They are XAML files whose base class is a ContentPage, in it we can add layouts, controls, etc.

Binding also plays an important role, the following image shows the MainService.cs class, whose “Image_Category” property, is a font icon, and with “ImageColor_Category”, allows the color to be different in each instance, in XAML we add a Label and we include this logic.

… With DynamicResource it will make possible the change of Themes.

8.- Final result

The application speaks for itself, remember that the only way to do a great job is to love what you do … ( Steve Jobs )

GitHub: https://github.com/danielmonettelli/XF_FoodApp

Conclusions

As one learns, one realizes that order is very important in every way, and in programming with greater reason, that is why I take the time to create such a publication, this Xamarin Styles Architecture.Forms will serve to To ignore common properties that we use, it is feasible for Shell, easy implementation of colors to Themes thanks to Zeplin, use of Font Icons to improve the performance of the application, clean management of resources in each interface of the application, etc.

I hope it helps, any questions you have regarding the Architecture of Styles write to me and I will gladly answer all your questions.