♻️ Mobile | Move to CollectionView on EarnPage and RedeemPage (#920)

* Move to CollectionView on EarnPage and RedeemPage * Cleanup
SSWConsulting · May 24, 2024 · 0f28233 · 0f28233
1 parent a2b16d3
commit 0f28233
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 45 deletions.
diff --git a/src/MobileUI/Controls/ListItem.xaml b/src/MobileUI/Controls/ListItem.xaml
@@ -46,14 +46,16 @@
         <Grid
             Grid.Column="1"
             ColumnDefinitions="*,Auto"
-            RowDefinitions="*,*"
+            RowDefinitions="Auto,*"
             VerticalOptions="Center"
             RowSpacing="2">
             <Label Grid.Row="0"
                    Grid.Column="0"
                    Text="{Binding Title, Source={x:Reference this}}"
                    TextColor="White"
                    InputTransparent="True"
+                   MaxLines="2"
+                   LineBreakMode="WordWrap"
                    VerticalTextAlignment="End"
                    FontSize="16"
                    Style="{StaticResource LabelBold}">

diff --git a/src/MobileUI/Pages/EarnPage.xaml b/src/MobileUI/Pages/EarnPage.xaml
@@ -52,28 +52,33 @@
                                    Margin="0,0,0,25"
                                    x:Name="QuizIndicator" />
                 </Grid>
-
-                <VerticalStackLayout
+                <CollectionView
                     Grid.Row="1"
                     x:Name="QuizListSection"
-                    BindableLayout.ItemsSource="{Binding Quizzes}"
-                    Spacing="6">
-                    <BindableLayout.ItemTemplate>
+                    ItemsSource="{Binding Quizzes}"
+                    ItemsUpdatingScrollMode="KeepItemsInView"
+                    ItemSizingStrategy="{OnPlatform iOS='MeasureFirstItem', Android='MeasureAllItems'}">
+                    <CollectionView.ItemsLayout>
+                        <GridItemsLayout Orientation="Vertical" />
+                    </CollectionView.ItemsLayout>
+                    <CollectionView.ItemTemplate>
                         <DataTemplate x:DataType="viewModels:QuizItemViewModel">
-                            <controls:ListItem Title="{Binding Title}"
-                                               Description="{Binding Description}"
-                                               Points="{Binding Points}"
-                                               ButtonText="GO"
-                                               ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
-                                               ItemId="{Binding Id}"
-                                               ThumbnailImage="{Binding ThumbnailImage}"
-                                               PlaceholderGlyph="&#xf11b;"
-                                               ShowTick="{Binding Passed}"
-                                               IsDisabled="{Binding Passed}"
-                                               IsButtonDisabled="{Binding Passed}"/> 
+                            <Grid Padding="0,0,0,6">
+                                <controls:ListItem Title="{Binding Title}"
+                                                   Description="{Binding Description}"
+                                                   Points="{Binding Points}"
+                                                   ButtonText="GO"
+                                                   ButtonCommand="{Binding Source={x:Reference QuizList}, Path=BindingContext.OpenQuizCommand}"
+                                                   ItemId="{Binding Id}"
+                                                   ThumbnailImage="{Binding ThumbnailImage}"
+                                                   PlaceholderGlyph="&#xf11b;"
+                                                   ShowTick="{Binding Passed}"
+                                                   IsDisabled="{Binding Passed}"
+                                                   IsButtonDisabled="{Binding Passed}"/> 
+                            </Grid>
                         </DataTemplate>
-                    </BindableLayout.ItemTemplate>
-                </VerticalStackLayout>
+                    </CollectionView.ItemTemplate>
+                </CollectionView>
             </Grid>
             <ActivityIndicator
                 HorizontalOptions="Center"

diff --git a/src/MobileUI/Pages/RedeemPage.xaml b/src/MobileUI/Pages/RedeemPage.xaml
@@ -109,34 +109,39 @@
                                            Margin="0,0,0,25"
                                            x:Name="QuizIndicator" />
                         </Grid>
-
-                        <VerticalStackLayout
-                            x:Name="QuizListSection"
-                            BindableLayout.ItemsSource="{Binding Rewards}"
-                            Spacing="6">
-                            <BindableLayout.ItemTemplate>
+
+                        <CollectionView
+                            ItemsSource="{Binding Rewards}"
+                            ItemsUpdatingScrollMode="KeepItemsInView"
+                            ItemSizingStrategy="{OnPlatform iOS='MeasureFirstItem', Android='MeasureAllItems'}">
+                            <CollectionView.ItemsLayout>
+                                <GridItemsLayout Orientation="Vertical" />
+                            </CollectionView.ItemsLayout>
+                            <CollectionView.ItemTemplate>
                                 <DataTemplate x:DataType="models:Reward">
-                                    <controls:ListItem Title="{Binding Name}"
-                                                       Description="{Binding Description}"
-                                                       IsButtonDisabled="{Binding CanAfford, Converter={StaticResource InverseBool}}"
-                                                       ItemId="{Binding Id}"
-                                                       Points="{Binding Cost}"
-                                                       ButtonText="GET"
-                                                       ThumbnailImage="{Binding ImageUri}"
-                                                       PlaceholderGlyph="&#xf06b;"
-                                                       ButtonCommand="{Binding Source={x:Reference RewardList}, Path=BindingContext.RedeemRewardCommand}">
-                                        <controls:ListItem.Triggers>
-                                            <DataTrigger TargetType="controls:ListItem"
-                                                         Binding="{Binding IsPendingRedemption}"
-                                                         Value="True">
-                                                <Setter Property="ButtonText"
-                                                        Value="QR" />
-                                            </DataTrigger>
-                                        </controls:ListItem.Triggers>
-                                    </controls:ListItem>
+                                    <Grid Padding="0,0,0,6">
+                                        <controls:ListItem Title="{Binding Name}"
+                                                           Description="{Binding Description}"
+                                                           IsButtonDisabled="{Binding CanAfford, Converter={StaticResource InverseBool}}"
+                                                           ItemId="{Binding Id}"
+                                                           Points="{Binding Cost}"
+                                                           ButtonText="GET"
+                                                           ThumbnailImage="{Binding ImageUri}"
+                                                           PlaceholderGlyph="&#xf06b;"
+                                                           ButtonCommand="{Binding Source={x:Reference RewardList}, Path=BindingContext.RedeemRewardCommand}">
+                                            <controls:ListItem.Triggers>
+                                                <DataTrigger TargetType="controls:ListItem"
+                                                             Binding="{Binding IsPendingRedemption}"
+                                                             Value="True">
+                                                    <Setter Property="ButtonText"
+                                                            Value="QR" />
+                                                </DataTrigger>
+                                            </controls:ListItem.Triggers>
+                                        </controls:ListItem>
+                                    </Grid>
                                 </DataTemplate>
-                            </BindableLayout.ItemTemplate>
-                        </VerticalStackLayout>
+                            </CollectionView.ItemTemplate>
+                        </CollectionView>
                     </VerticalStackLayout>
                 </ScrollView>
             </Grid>