How can programmatically refresh one "grial:Repeater"

[marketdevsoft]

Hi, in my view i have put this repeater:

            <grial:Repeater 
                Orientation="Horizontal"
                Spacing="20"
                SelectionMode="Single"
                SpacingMode="Arround"
                HorizontalOptions="CenterAndExpand"
                ScrollBarVisibility="Never"    
                InitialSelection="First"
                ItemsSource="{Binding ListActionButton}"
                SelectedItem="{ Binding ActionSelected, Mode=TwoWay }"
                >
                <!--DEFAULT ITEM TEMPLATE-->
                <grial:Repeater.ItemTemplate>
                    <DataTemplate>
                        <Grid VerticalOptions="FillAndExpand" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>

                            <!-- Icona -->
                            <local:RoundedImage Grid.Row="0"
                                            CornerRadius="7"
                                            BorderColor="{DynamicResource BasePageColor}"
                                            BorderSize="5"
                                            Source="{ Binding IconSource }" 
                                            Style="{ StaticResource Avatar }"                    
                                            HorizontalOptions="CenterAndExpand"
                                            Aspect="AspectFill"
                                            HeightRequest="57"
                                            WidthRequest="57"                                                   
                                            BackgroundColor="Transparent"                                                       
                            />

                            <!-- Testo sotto all'icona -->
                            <Label Grid.Row="1" 
                                   Text="{Binding IconText}" 
                                   FontSize="{StaticResource BaseFontSize}"
                                   HorizontalOptions="Center"
                                   Opacity="0.7"
                                   TextColor="{ DynamicResource BaseTextColor }" 
                                   FontAttributes="Bold"
                            />
                        </Grid>
                    </DataTemplate>
                </grial:Repeater.ItemTemplate>

                <!--SELECTED ITEM TEMPLATE-->
                <grial:Repeater.SelectedItemTemplate>
                    <DataTemplate>
                        <Grid VerticalOptions="FillAndExpand">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>

                            <!-- Icon -->
                            <local:RoundedImage Grid.Row="0"
                                                CornerRadius="7"
                                                BorderSize="5"
                                                BorderColor="{DynamicResource BasePageColor}"
                                                IsCircular="False"
                                                Source="{ Binding IconSource }" 
                                                Style="{ StaticResource Avatar }"                    
                                                HorizontalOptions="CenterAndExpand"
                                                BackgroundColor="Transparent"
                                                HeightRequest="57"
                                                WidthRequest="57"                                                   
                            />

                            <!-- Text -->
                            <Label Grid.Row="1" 
                                   Text="{Binding IconText}" 
                                   FontSize="{StaticResource BaseFontSize}"
                                   HorizontalOptions="CenterAndExpand"
                                   TextColor="{ DynamicResource AccentColor }"  
                                   Opacity="1" 
                                   Scale="1.1"
                            />
                        </Grid>
                    </DataTemplate>
                </grial:Repeater.SelectedItemTemplate>
            </grial:Repeater>

.... and in my viewModel i define the itemsource:

    public ObservableCollection<ActionButtonModel> ListActionButton { get; set; } = new ObservableCollection<ActionButtonModel>(){
            new ActionButtonModel { IconText="icon1", IconSource="icon_action_start" },
            new ActionButtonModel { IconText="icon2", IconSource="icon_action_selfpriming" },
            new ActionButtonModel { IconText="icon3", IconSource="icon_action_highpressvalve" },
            new ActionButtonModel { IconText="icon4", IconSource="icon_action_lowpressvalve" },
            new ActionButtonModel { IconText="icon5", IconSource="icon_action_resume" },
    };

.... and the model ActionButtonModel are this :

public class ActionButtonModel : ObservableObject
{
    public string IconText { get; set; }
    public string IconSource { get; set; }
}

I try to programmatically update the ListActionButton (adding new item, or removing existing item...) but in the UI the repeater doesn't update ! How can i "force" the update of the repeater in the UI for pull all the changes that i've maked in viewModel.ListActionButton ?

[dirivero]

Can you try with UXDivers.Grial nuget version 4.0.74-RC ? It should fix this problem.

[marketdevsoft]

Hi, thanks for help me! I tried the new RC with this fix and it work! But there is one other little problem: if load page without repeater's elements, when i try to add programmatically at runtime, it not update, and the new elements not appear in the repeater!

Best regards!

[marketdevsoft]

... also i'm trying this new use case: if i clear ListActionButton before adding new element (ListActionButton.Clear(); ListActionButton.Add(new ActionButtonModel { IconText = "Stop", .... ) my app crash with this error message: "System.ArgumentException: 'Reset action must be initialized with no changed items. (Parameter 'action')'" :

0xFFFFFFFFFFFFFFFF in Android.Runtime.JNIEnv.monodroid_debugger_unhandled_exception C#
0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:12,5 C#
0x1D in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:23,26    C#
0x17 in System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw    C#
0x6 in System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0 C#
0xC in Android.App.SyncContext. at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:36,19 C#
0xE in Java.Lang.Thread.RunnableImplementor.Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:36,6 C#
0x8 in Java.Lang.IRunnableInvoker.n_Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net7.0/android-33/mcw/Java.Lang.IRunnable.cs:84,4    C#
0x8 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:22,5  C#

Best regards!

[dirivero]

Hi, About the loading issue, are you using an observable collection? Otherwise it can't detect the Adds. Regarding the Reset problem, please try again with the latest release 4.0.75 that fixes that. Thanks!

[marketdevsoft]

Hi, i retested now with 4.0.75 version and the crash is resolved! But this problem not resolved: " if load page without repeater's elements, when i try to add programmatically at runtime, it not update, and the new elements not appear in the repeater!" Yes in my example i'm using observable collection (how showing in the code above):

.... and in my viewModel i define the itemsource:

public ObservableCollection<ActionButtonModel> ListActionButton { get; set; } = new ObservableCollection<ActionButtonModel>(){
        new ActionButtonModel { IconText="icon1", IconSource="icon_action_start" },
        new ActionButtonModel { IconText="icon2", IconSource="icon_action_selfpriming" },
        new ActionButtonModel { IconText="icon3", IconSource="icon_action_highpressvalve" },
        new ActionButtonModel { IconText="icon4", IconSource="icon_action_lowpressvalve" },
        new ActionButtonModel { IconText="icon5", IconSource="icon_action_resume" },
};

[dirivero]

Hi, Not sure if you solved this or not, but in case you didn't, can you send me the sample page/viewmodel to drivero [at] uxdivers.com ?