🚧 Improve songs list

AD_MAUI/Model/Song.cs

@@ -5,5 +5,6 @@
         public int Id { get; set; }
         public string Title { get; set; }
         public int Duration { get; set; }
+        public int? Index { get; set; }
     }
 }

AD_MAUI/ViewModel/AlbumViewModel.cs

@@ -1,7 +1,6 @@
 using AD_MAUI.Model;
 using System.Collections.ObjectModel;
 using System.ComponentModel;
-using System.Runtime.CompilerServices;
 
 namespace AD_MAUI.ViewModel
 {
@@ -53,9 +52,26 @@ namespace AD_MAUI.ViewModel
                 {
                     new Song { Id = 1, Title = "Test Song 1", Duration = 210 },
                     new Song { Id = 2, Title = "Test Song 2", Duration = 260 },
-                    new Song { Id = 3, Title = "Test Song 3", Duration = 817 },
+                    new Song { Id = 3, Title = "Test Soooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong 3", Duration = 817 },
+                    new Song { Id = 4, Title = "Test Song 4", Duration = 654 },
+                    new Song { Id = 5, Title = "Test Song 5", Duration = 768 },
+                    new Song { Id = 6, Title = "Test Song 6", Duration = 435 },
+                    new Song { Id = 7, Title = "Test Song 7", Duration = 864 },
+                    new Song { Id = 8, Title = "Test Song 8", Duration = 456 },
+                    new Song { Id = 9, Title = "Test Song 9", Duration = 83 },
+                    new Song { Id = 10, Title = "Test Song 10", Duration = 4533 },
+                    new Song { Id = 11, Title = "Test Song 11", Duration = 785 },
+                    new Song { Id = 12, Title = "Test Song 12", Duration = 712 },
+                    new Song { Id = 13, Title = "Test Song 13", Duration = 523 },
                 }
             };
+
+            int index = 1;
+            foreach (var song in this.album.Songs)
+            {
+                song.Index = index++;
+            }
+
             songs = new ObservableCollection<SongViewModel>(this.album.Songs.Select(song => new SongViewModel(song)));
         }
     }

AD_MAUI/ViewModel/SongViewModel.cs

@@ -1,6 +1,5 @@
 using AD_MAUI.Model;
 using System.ComponentModel;
-using System.Runtime.CompilerServices;
 
 namespace AD_MAUI.ViewModel
 {
@@ -20,6 +19,11 @@ namespace AD_MAUI.ViewModel
             get => song.Duration;
         }
 
+        public int? Index
+        {
+            get => song?.Index;
+        }
+
         public SongViewModel(Song? song)
         {
             this.song = song ?? new();

AD_MAUI/Views/AlbumPage.xaml

@@ -15,17 +15,11 @@
                 <RowDefinition Height="*"/>
             </Grid.RowDefinitions>
 
-            <Grid Grid.Row="0">
-                <Grid.ColumnDefinitions>
-                    <ColumnDefinition Width="32"/>
-                    <ColumnDefinition Width="*"/>
-                    <ColumnDefinition Width="32"/>
-                </Grid.ColumnDefinitions>
             <Image Source="{Binding CoverImage}"
                    Aspect="AspectFill"
                    BackgroundColor="{StaticResource Background}"
-                       Grid.Column="1"/>
+                   Margin="32,0,32,0"
-            </Grid>
+                   Grid.Row="0"/>
 
             <StackLayout Padding="10"
                          Grid.Row="1">
@@ -48,43 +42,68 @@
 
                 <Grid Margin="8">
                     <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="8"/>
                         <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="16"/>
                         <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="8"/>
                     </Grid.ColumnDefinitions>
 
                     <Button Text="Play"
-                            Grid.Column="1"/>
+                            Margin="16,16,8,16"
+                            Grid.Column="0"/>
 
                     <Button Text="Shuffle"
-                            Grid.Column="3"/>
+                            Margin="8,16,16,16"
+                            Grid.Column="1"/>
 
                 </Grid>
 
             </StackLayout>
 
             <BoxView HeightRequest="1" 
-                     Color="{StaticResource Gray}"
+                     Color="{StaticResource Gray300}"
                      HorizontalOptions="FillAndExpand"
                      Margin="8"
                      Grid.Row="3" />
 
-            <ListView ItemsSource="{Binding Songs}"
+            <CollectionView ItemsSource="{Binding Songs}" Grid.Row="4">
-                      Grid.Row="4">
+                <CollectionView.ItemTemplate>
-                <ListView.ItemTemplate>
                     <DataTemplate x:DataType="local:SongViewModel">
-                        <ViewCell>
+                        <StackLayout>
-                            <StackLayout Orientation="Horizontal">
+                            <Grid Margin="0,8,0,0">
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition Width="Auto"/>
+                                    <ColumnDefinition Width="*"/>
+                                    <ColumnDefinition Width="Auto"/>
+                                </Grid.ColumnDefinitions>
+
+                                <Label Text="{Binding Index}" 
+                                       FontSize="16" 
+                                       TextColor="{StaticResource Gray}"
+                                       Margin="0,0,8,0"
+                                       Grid.Column="0"/>
+                                
                                 <Label Text="{Binding Title}" 
                                        FontSize="16" 
-                                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
+                                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
+                                       LineBreakMode="TailTruncation" 
+                                       Grid.Column="1"/>
+                                
+                                <Label Text="···" 
+                                       FontSize="16" 
+                                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
+                                       FontAttributes="Bold" 
+                                       HorizontalOptions="End" 
+                                       Margin="0,0,8,0"
+                                       Grid.Column="2"/>
+                            </Grid>
+                            
+                            <BoxView HeightRequest="1" 
+                                     Color="{StaticResource Gray300}"
+                                     HorizontalOptions="FillAndExpand"
+                                     Margin="16,0,8,0"/>
                         </StackLayout>
-                        </ViewCell>
                     </DataTemplate>
-                </ListView.ItemTemplate>
+                </CollectionView.ItemTemplate>
-            </ListView>
+            </CollectionView>
         </Grid>
     </ScrollView>
 </ContentPage>