AD_MAUI/AMC.View/Views/AlbumPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:AMC.View"
             xmlns:strings="clr-namespace:AMC.View.Resources.Strings"
             xmlns:conv="clr-namespace:AMC.View.Converters"
             xmlns:ctl="clr-namespace:AMC.View.Controls"
             xmlns:vm="clr-namespace:AMC.ViewModel.ViewModels;assembly=AMC.ViewModel"
             x:Class="AMC.View.Views.AlbumPage"
             x:DataType="vm:AlbumViewModel">
    <ContentPage.Resources>
        <ResourceDictionary>
            <conv:SongsInfoConverter x:Key="SongsInfo" />
        </ResourceDictionary>
    </ContentPage.Resources>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <ScrollView Grid.Row="0"
                BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
            <Grid Margin="{StaticResource SpaceXS}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="{StaticResource AlbumPageCoverHeight}"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>

                <Border 
                Grid.Row="0"
                Margin="{StaticResource LeftRightSpaceLarge}">
                    <Border.StrokeShape>
                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorners}" />
                    </Border.StrokeShape>
                    <Image Source="{Binding CoverImage}"
                   Aspect="AspectFill"/>
                </Border>

                <StackLayout Padding="{StaticResource SpaceXS}"
                         Grid.Row="1">

                    <Label Text="{Binding Title}" 
                       FontSize="{StaticResource SubtitleFontSize}" 
                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
                       HorizontalTextAlignment="Center"/>

                    <Label Text="{Binding Artist}" 
                       FontSize="{StaticResource SubSubtitleFontSize}" 
                       TextColor="{StaticResource Secondary}" 
                       HorizontalTextAlignment="Center" />

                </StackLayout>

                <Label Grid.Row="2"  
                       Text="{Binding Details, StringFormat='\{0\} · \{1\}'}" 
                       FontSize="{StaticResource DetailsFontSize}" 
                       TextColor="{StaticResource Gray}" 
                       HorizontalTextAlignment="Center"/>

                <FlexLayout Grid.Row="3"
                            Direction="Row" 
                            Margin="{StaticResource SpaceXS}"
                            JustifyContent="SpaceAround" 
                            AlignItems="Center">

                    <ctl:IconLabelButtonWide ButtonSource="icon_wide_button_play.png"
                                                 ButtonLabelText="{x:Static strings:Strings.PlayButton}" 
                                                 Margin="{StaticResource WideButtonLeft}" />

                    <ctl:IconLabelButtonWide ButtonSource="icon_wide_button_shuffle.png"
                                                 ButtonLabelText="{x:Static strings:Strings.ShuffleButton}"
                                                 Margin="{StaticResource WideButtonRight}" />

                </FlexLayout>


                <BoxView Style="{StaticResource HeadGraySeparator}"
                     Grid.Row="4" />

                <CollectionView ItemsSource="{Binding Songs}"
                            Grid.Row="5">
                    <CollectionView.ItemTemplate>
                        <DataTemplate x:DataType="vm:SongViewModel">
                            <StackLayout>
                                <Grid Margin="{StaticResource TopBottomSpaceLittle}">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="{StaticResource SpaceL}"/>
                                        <ColumnDefinition Width="*"/>
                                        <ColumnDefinition Width="Auto"/>
                                    </Grid.ColumnDefinitions>

                                    <Label Text="{Binding Index}" 
                                       FontSize="{StaticResource SubSubtitleFontSize}" 
                                       TextColor="{StaticResource Gray}"
                                       Margin="{StaticResource RightSpaceLittle}"
                                       HorizontalTextAlignment="Center"
                                       HorizontalOptions="Center"
                                       Grid.Column="0"/>

                                    <Label Text="{Binding Title}" 
                                       FontSize="{StaticResource SubSubtitleFontSize}" 
                                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
                                       LineBreakMode="TailTruncation" 
                                       Grid.Column="1"/>

                                    <Label Text="{x:Static strings:Strings.HThreeDotsMenu}" 
                                       FontSize="{StaticResource SubSubtitleFontSize}" 
                                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
                                       FontAttributes="Bold" 
                                       HorizontalOptions="End" 
                                       Margin="{StaticResource RightSpaceLittle}"
                                       Grid.Column="2"/>
                                </Grid>

                                <BoxView Style="{StaticResource GraySeparator}"/>
                            </StackLayout>
                        </DataTemplate>
                    </CollectionView.ItemTemplate>
                </CollectionView>

                <StackLayout Margin="{StaticResource TopSpaceSome}"
                         Grid.Row="6">
                    <Label Text="{Binding ReleaseDate, StringFormat='{0:d MMMM yyyy}'}" 
                       Style="{StaticResource FooterLabel}" />

                    <Label Text="{Binding SongsInfo, Converter={StaticResource SongsInfo}}"
                       Style="{StaticResource FooterLabel}" />

                    <Label Text="{Binding CopyrightInfo, StringFormat='℗ \{0\} \{1\}'}"
                       Style="{StaticResource FooterLabel}" />
                </StackLayout>

            </Grid>
        </ScrollView>
        <!-- TODO Insert this in a main layout of some sort...-->
        <ctl:BottomBar Grid.Row="1" />
    </Grid>
</ContentPage>