Visual problem with ListView when using a Converter to Bold Labels

morphynnmorphynn Member ✭✭
edited February 26 in Xamarin.Forms

I have a ListView bound to a ObservableCollection. I created a ValueConverter which evaluates if a string property has a certain value sets the FontAttribute to Bold of respective labels in the ListItem. Sometimes though when I update the ObservableCollection, some items don't change from bold to normal. If I scroll down the ListView, they refresh.

My listview CachingStrategy is set to RecycleElement because when I set it to RetainElement I have some issues with items displaying incorrect data.

Does anyone have any idea why this happens?

This is ListView code.

`<ListView
x:Name="NewList"
CachingStrategy="RecycleElement"
HasUnevenRows="True"
IsPullToRefreshEnabled="False"
ItemsSource="{Binding Notifications}"
SelectionMode="None">
<ListView.ItemTemplate>
    <DataTemplate>
        <ViewCell Height="60">
            <Grid
                ColumnSpacing="0"
                HeightRequest="60"
                RowSpacing="0">
                <BoxView BackgroundColor="#bd3826" HorizontalOptions="Fill" />
                <Grid
                    BackgroundColor="White"
                    ColumnSpacing="0"
                    HeightRequest="60"
                    RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="40" />
                        <ColumnDefinition Width="60*" />
                        <ColumnDefinition Width="40*" />
                        <ColumnDefinition Width="40" />
                    </Grid.ColumnDefinitions>

                    <Grid.GestureRecognizers>
                        <PanGestureRecognizer PanUpdated="PanGestureRecognizer_PanUpdated" />
                        <TapGestureRecognizer Command="{Binding BindingContext.TapNewCommand, Source={x:Reference NewList}}" CommandParameter="{Binding .}" />
                    </Grid.GestureRecognizers>

                    <Image
                        Grid.Row="0"
                        Grid.RowSpan="3"
                        Grid.Column="0"
                        HeightRequest="25"
                        HorizontalOptions="Center"
                        Source="{Binding OrderItemTypeUrl}"
                        VerticalOptions="Center"
                        WidthRequest="25" />
                    <Label
                        Grid.Row="0"
                        Grid.Column="1"
                        FontAttributes="{Binding NotificationStatus, Converter={StaticResource TypeBold}}"
                        FontSize="16"
                        Text="{Binding MaterialDescription}"
                        TextColor="#4c4c4c" />
                    <Label
                        Grid.Row="0"
                        Grid.Column="2"
                        FontAttributes="{Binding NotificationStatus, Converter={StaticResource TypeBold}}"
                        FontSize="16"
                        Text="{Binding SoDate, StringFormat='{}{0:dd.MM.yyyy HH\\:mm}'}"
                        TextColor="#4c4c4c" />
                    <Label
                        Grid.Row="1"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        FontAttributes="{Binding NotificationStatus, Converter={StaticResource TypeBold}}"
                        FontSize="16"
                        TextColor="#4c4c4c">
                        <Label.FormattedText>
                            <FormattedString>
                                <Span Text="{Binding IBaseAddressStreet}" />
                                <Span Text=", #" />
                                <Span Text="{Binding IBaseAddressHouseNumber}" />
                                <Span Text=", " />
                                <Span Text="{Binding IBaseAddressZipCode}" />
                                <Span Text=", " />
                                <Span Text="{Binding IBaseAddressHouseCity}" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Label
                        Grid.Row="2"
                        Grid.Column="1"
                        Grid.ColumnSpan="2"
                        FontAttributes="{Binding NotificationStatus, Converter={StaticResource TypeBold}}"
                        FontSize="14"
                        Text="{Binding BusinessPartnerDescription}"
                        TextColor="#4c4c4c" />
                    <Image
                        Grid.Row="0"
                        Grid.RowSpan="3"
                        Grid.Column="3"
                        HeightRequest="40"
                        HorizontalOptions="Center"
                        Source="{local:ImageResource ELCO.App.Images.delete.png}"
                        VerticalOptions="Center"
                        WidthRequest="40">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Command="{Binding BindingContext.DeleteItemCommand, Source={x:Reference NewList}}" CommandParameter="{Binding .}" />
                        </Image.GestureRecognizers>
                    </Image>

                </Grid>
            </Grid>
        </ViewCell>
    </DataTemplate>
</ListView.ItemTemplate>`

Value Converter Code

`public class BoldConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            var isBold = ((string)value) != "READED";
            if (isBold)
            {
                return FontAttributes.Bold;
            }
            else
            {
                return FontAttributes.None;
            }
        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }`

ViewModel Methods

`public async void GetData()
{
    using (UserDialogs.Instance.Loading(App.AppSession.LocalTranslate.globalLoading))
    {
        try
        {
            Notifications = await App.AppSession.GetNotificationsFromApi();
        }
        catch (Exception ex)
        {
        }
    }
}

private async void OnItemTapped(object obj)
{
    try
    {
        using (UserDialogs.Instance.Loading(App.AppSession.LocalTranslate.globalLoading))
        {
            SelectedNotification = (obj as Notification);
            SelectedNotification.Altered = true;
            SelectedNotification.NotificationStatus = "READED";
            Notifications.Where(x => x.IdNotification == SelectedNotification.IdNotification)
                .ToList().ForEach(u =>
                {
                    u.Altered = true;
                    u.NotificationStatus = "READED";
                });

            await App.AppSession.LocalDB.SaveNotification(SelectedNotification);

            App.AppSession.ActualNotification = SelectedNotification;
            await NavigationService.NavigateAsync("DetailPage");
        }
    }
    catch (Exception ex)
    {
    }
}

public async void FillList()
{
    try
    {
        if (Notifications != null)
        {
            Notifications = new ObservableCollection<Notification>(App.AppSession.GetNotificationsFromDb(););
        }
    }
    catch (Exception ex)
    {
    }
}`

I did many test and data its ok, but visually happens the issue. Thanks.

Answers

Sign In or Register to comment.