Search code examples
.netxamarinmaui

IsVisible binding can only hide element in Android


I have an element on a page in .NET MAUI, which should only be shown when a user has unread notifications. I have set a property on my viewmodel and is binding it to the isVisible property of element like this:

IsVisible="{Binding HasUnreadNotifications}"

The property is being requestet from the server, so it will take a short while until the HasUreadNotifications will be set. However when it is set to true and raised (invoke the OnPropertyChanged event), then the element does not show.

I have figured out, that if the default state is true, and the server responds false, then the element is correctly hidden.

So it seems that in android the IsVisible can only hide elements. Can this really be true?

The project is an upgrade from a previous Xamarin-project.

My property is very plain:

public bool _hasUnreadNotifications = false;
    public bool HasUnreadNotifications 
    { 
        get
        {
            return _hasUnreadNotifications;
        }
        set
        {
            _hasUnreadNotifications = value;
            RaisePropertyChanged(nameof(HasUnreadNotifications));
        }
    }

I use prism with my view-models inheriting from BindableBase, which has Raise property changed.

The setter is invoked after a service call:

private async Task GetNotificationStatisticsAsync()
{
    try
    {
       var result = await _notificationsService.GetLastSeenNotificationStatistics();
       UnreadNotificationsCount = result.Count;
       HasUnreadNotifications = result.Count > 0;
    }
    catch (Exception ex)
    {
        UnreadNotificationsCount = 0;
    }
}

The service call is invoked in the navigate callback:

public void OnNavigatedTo(INavigationParameters parameters)
{
    Task.Run(async () => await DoUpdateUserInformation());
}

The item I'm trying to show is in a regular ContentPage housed within a couple of grinds for layout:

<ContentPage ...>    
    <Grid Grid.Column="2" ColumnDefinitions="Auto, AutColumnSpacing="12">
        <controls:ArterIconButton Grid.Column="0"  Command="{Binding ShowNotificationsCommand}" Icon="{StaticResource Fa-Bell}" />
        <Border Grid.Column="0" InputTransparent="True" IsVisible="{Binding HasUnreadNotifications}" HorizontalOptions="End" HeightRequest="25" WidthRequest="25" StrokeShape="RoundRectangle 12.5" VerticalOptions="End" BackgroundColor="{StaticResource Red}">
            <Label HorizontalOptions="Center" TextColor="White" VerticalOptions="Center" Style="{StaticResource TextSmallBold}" Text="{Binding UnreadNotificationsCount}"/>
        </Border>
    </Grid>
</ContentPage>

P.s: In iOS the behavior is as expected: The property can be false and then the element is hidde, but when it is set to true, the element is shown.


Solution

  • We ended up migrating the entire app to Flutter, which is far more stable and easy to work with.