android.netwindowsbindingmaui

Bindings visible on Android but not on Windows in .NET MAUI app


I am developing an application on .NET MAUI and I'm using it because I need the multi-platform feature through mobile and Windows, but I'm having some problems when I run the application on Windows. The application it's basically a warehouse manager where you can search for products that are left in database, you can also make inventories, see what you have added inside that inventory, so basically there's literally a list in the same page that updates itself automatically (and of course if there's already products inside that inventory and you are accessing it another day, the application will load every product added inside that inventory.

The thing is: Why if I run the application on Android I can see all the data inside the Inventories but when I run it on Windows I only see empty borders?

Here are some photos that might help to understand the difference, later I will post some code to make it even more understandable...

This is on Android: (For privacy reasons I have obscured the strings since they are DB articles but I've done it sparingly so that you can see that the data is actually visible on Android...)

Application run on Android where all the data is visible

And this is on Windows: Application run on Windows where all the data is not visible

It's evident that the data exists effectively because we can see that there are the same number of borders as the effective and visible data on Android.

I've tried all the solutions I had to make it work, but I couldn't find a solution.

So the final question is how can I make visible this data on Windows?

Here's the Xaml:

//On the top of the page there are these three rows inside the ContentPage:

xmlns:viewmodel="clr-namespace:TestAppMagazzino.ViewModels"
x:DataType="viewmodel:GestioneInventarioViewModel"
xmlns:models="clr-namespace:TestAppMagazzino.Models"

<ContentPage.Resources>
    <OnIdiom x:Key="LabelFontSize" x:TypeArguments="x:Double"
         Phone="20"
         Tablet="24"
         Desktop="20"/>

    <OnIdiom x:Key="QtaLabelOptions" x:TypeArguments="LayoutOptions"
             Phone="End"
             Tablet="End"
             Desktop="End"/>

    <OnIdiom x:Key="LabelDetails" x:TypeArguments="Thickness"
             Phone="0"
             Tablet="10, 0, 0, 0"
             Desktop="10, 0, 0, 0"/>
    
    <Style TargetType="Label">
        <Setter Property="FontSize" Value="{StaticResource LabelFontSize}" />
    </Style>
</ContentPage.Resources>

<VerticalStackLayout Grid.Row="2">
    <VerticalStackLayout IsVisible="{Binding ShowAddMode}">
        <CollectionView ItemsSource="{Binding Items}">
            <CollectionView.ItemTemplate>
                <DataTemplate x:DataType="models:InventoryItem">
                    <Border>
                        <Grid RowSpacing="10">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                        
                            <Label Text="{Binding CodArt}"
                               Grid.Column="0"
                               Grid.Row="0"
                               HorizontalTextAlignment="Start"
                               VerticalOptions="Center"/>

                            <Label Text="{Binding QtaMag}"
                               Grid.Row="0"
                               Grid.ColumnSpan="3"
                               HorizontalTextAlignment="Center"
                               HorizontalOptions="Center"
                               VerticalOptions="Center"
                               />

                            <Label Text="{Binding DesArt}"
                               Grid.Column="0"
                               Grid.Row="1"
                               Grid.ColumnSpan="2"
                               VerticalOptions="Center"/>

                            <Button ImageSource="{StaticResource Delete}"
                                Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:GestioneInventarioViewModel}}, Path=DeleteItemCommand}"
                                CommandParameter="{Binding CodArt}"
                                Grid.Row="0"
                                Grid.RowSpan="2"
                                Grid.Column="2"
                                HorizontalOptions="End"/>
                        </Grid>
                    </Border>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>

This is the ViewModel function where I load all the items, of course inside the LoadItemsFromInventory() on the first row there is the query:

//This is the ObservableCollection on top of the ViewModel file:
public ObservableCollection<InventoryItem> Items { get; } = new ObservableCollection<InventoryItem>();

//And here's the ViewModel class:
public GestioneInventarioViewModel(string idInv, bool showInventory = false)
{
    inventoryId = idInv;
    ShowInventoryMode = showInventory;

    if (showInventory)
        LoadItemsFromInventory();

    CodArt = string.Empty;
    DesArt = string.Empty;
    QtaMag = string.Empty;
}

public void LoadItemsFromInventory(){
    foreach (DataRow row in dt.Rows)
    {
        Items.Insert(0, new InventoryItem
        {
            CodArt = row["CodArt"].ToString(),
            DesArt = row["DesArt"].ToString(),
            QtaMag = row["qtaGiac"].ToString()
        });
    }
}

Solution

  • Finally found the solution on my self with a lot of attempts.

    The issue was inside here:

    <ContentPage.Resources>
        <OnIdiom x:Key="LabelFontSize" x:TypeArguments="x:Double"
             Phone="20"
             Tablet="24"
             Desktop="20"/>
    
        <OnIdiom x:Key="QtaLabelOptions" x:TypeArguments="LayoutOptions"
                 Phone="End"
                 Tablet="End"
                 Desktop="End"/>
    
        <OnIdiom x:Key="LabelDetails" x:TypeArguments="Thickness"
                 Phone="0"
                 Tablet="10, 0, 0, 0"
                 Desktop="10, 0, 0, 0"/>
        
        <Style TargetType="Label">
            <Setter Property="FontSize" Value="{StaticResource LabelFontSize}" />
        </Style>
    </ContentPage.Resources>
    

    Specifically the real issue was this:

    <Style TargetType="Label">
        <Setter Property="FontSize" Value="{StaticResource LabelFontSize}" />
    </Style>
    

    This part of code was changing the entire maui native label's style for all the labels existent on my xaml having only the FontSize and I wasn't pointing on this style on the labels, because I had to write something like: Style={StaticResource LabelFontSize} in order to use it but it was unnecessary for my purpose, so when I removed the last piece of code it worked and I finally could see the labels.

    How did I keep the logic that changes the font size based on which device the application is running?

    Here's how:

    <ContentPage.Resources>
        <OnIdiom x:Key="LabelFontSize" x:TypeArguments="x:Double"
                 Phone="20"
                 Tablet="24"
                 Desktop="24"/>
    </ContentPage.Resources>
    
    <VerticalStackLayout Grid.Row="2">
        <VerticalStackLayout IsVisible="{Binding ShowAddMode}">
            <CollectionView ItemsSource="{Binding Items}">
                <CollectionView.ItemTemplate>
                    <DataTemplate x:DataType="models:InventoryItem">
                        <Border>
                            <Grid RowSpacing="10">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="Auto"/>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition Width="Auto"/>
                                </Grid.ColumnDefinitions>
    
                                <Label Text="{Binding CodArt}"
                                       Grid.Column="0"
                                       Grid.Row="0"
                                       HorizontalTextAlignment="Start"
                                       VerticalOptions="Center"
                                       FontSize="{StaticResource LabelFontSize}"/>
    
                                <Label Text="{Binding QtaMag}"
                                       Grid.Row="0"
                                       Grid.ColumnSpan="3"
                                       HorizontalTextAlignment="Center"
                                       HorizontalOptions="Center"
                                       VerticalOptions="Center"
                                       FontSize="{StaticResource LabelFontSize}" />
    
                                <Label Text="{Binding DesArt}"
                                       Grid.Column="0"
                                       Grid.Row="1"
                                       Grid.ColumnSpan="2"
                                       VerticalOptions="Center"
                                       FontSize="{StaticResource LabelFontSize}"/>
    
                                <Button ImageSource="{StaticResource Delete}"
                                    Command="{Binding Source={RelativeSource AncestorType={x:Type viewmodel:GestioneInventarioViewModel}}, Path=DeleteItemCommand}"
                                    CommandParameter="{Binding CodArt}"
                                    Grid.Row="0"
                                    Grid.RowSpan="2"
                                    Grid.Column="2"
                                    HorizontalOptions="End"/>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </VerticalStackLayout>
    

    The big difference here is that now I'm not changing the style for all the labels existent inside the page, but I have only declared the FontSize values for all the devices inside the <ContentPage.Resources> and specified the FontSize on every Label:

    <Label Text="{Binding DesArt}"
           Grid.Column="0"
           Grid.Row="1"
           Grid.ColumnSpan="2"
           VerticalOptions="Center"
           FontSize="{StaticResource LabelFontSize}"/> <!-- LIKE THIS -->