🚧 Improve songs list

pull/1/head
Alexis Drai 2 years ago
parent 4e0a2d5168
commit a8dd472e6e

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

@ -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)));
}
}

@ -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();

@ -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"/>
</Grid>
<Image Source="{Binding CoverImage}"
Aspect="AspectFill"
BackgroundColor="{StaticResource Background}"
Margin="32,0,32,0"
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}"
Grid.Row="4">
<ListView.ItemTemplate>
<CollectionView ItemsSource="{Binding Songs}" Grid.Row="4">
<CollectionView.ItemTemplate>
<DataTemplate x:DataType="local:SongViewModel">
<ViewCell>
<StackLayout Orientation="Horizontal">
<StackLayout>
<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}}" />
</StackLayout>
</ViewCell>
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>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</ScrollView>
</ContentPage>

Loading…
Cancel
Save