💄 Add bottom bar façade

this one feels dirty but we'll keep it at that for now

AMC.View/Controls/BottomBar.xaml

@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             xmlns:strings="clr-namespace:AMC.View.Resources.Strings"
+             xmlns:ctl="clr-namespace:AMC.View.Controls"
+             x:Class="AMC.View.Controls.BottomBar">
+
+    <StackLayout Orientation="Vertical"
+				 BackgroundColor="{AppThemeBinding Light={StaticResource Gray100}, Dark={StaticResource Gray900}}">
+
+        <StackLayout Orientation="Horizontal" 
+                     HeightRequest="{StaticResource SpaceXL}">
+
+            <Frame Margin="{StaticResource HSpaceLittleVSpaceVeryLittle}"
+                   BackgroundColor="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray750}}"
+                   BorderColor="Transparent"
+                   HorizontalOptions="Start"
+                   VerticalOptions="Center">
+                <Image Source="icon_default_song.png"
+               Aspect="AspectFill"/>
+            </Frame>
+
+            <Label Text="{x:Static strings:Strings.DefaultPlayingSongLabel}" 
+                   HorizontalOptions="StartAndExpand" 
+                   VerticalOptions="Center"
+                   TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" />
+
+            <ImageButton Source="{AppThemeBinding Light='icon_play.png', Dark='icon_play_dark.png'}" 
+                         Margin="{StaticResource SpaceS}"
+                         HorizontalOptions="End"
+                         VerticalOptions="Center"
+                         HeightRequest="{StaticResource SpaceML}"
+                         WidthRequest="{StaticResource SpaceML}" />
+
+            <ImageButton Source="{AppThemeBinding Light='icon_next.png', Dark='icon_next_dark.png'}" 
+                         Margin="{StaticResource SpaceS}"
+                         HorizontalOptions="End"
+                         VerticalOptions="Center"
+                         HeightRequest="{StaticResource SpaceML}"
+                         WidthRequest="{StaticResource SpaceML}" />
+        </StackLayout>
+
+        <BoxView Style="{StaticResource BottomBarGraySeparator}" />
+
+
+        <FlexLayout Direction="Row" 
+                    HeightRequest="{StaticResource SpaceXL}"
+                    JustifyContent="SpaceAround" 
+                    AlignItems="Center">
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_play_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.ListenNowTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_browse_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.BrowseTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_radio_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.RadioTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_library_red.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.LibraryTitle}" 
+                                 LabelTextColor="{StaticResource Secondary}"/>
+
+            <ctl:IconLabelButton ButtonSource="icon_bottom_search_gray.png" 
+                                 ButtonLabelText="{x:Static strings:Strings.SearchTitle}" 
+                                 LabelTextColor="{StaticResource Gray}"/>
+
+        </FlexLayout>
+
+    </StackLayout>
+
+</ContentView>

AMC.View/Controls/BottomBar.xaml.cs

@@ -0,0 +1,10 @@
+namespace AMC.View.Controls
+{
+    public partial class BottomBar : ContentView
+    {
+        public BottomBar()
+        {
+            InitializeComponent();
+        }
+    }
+}

AMC.View/Controls/IconLabelButton.xaml

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="AMC.View.Controls.IconLabelButton">
+
+    <StackLayout Orientation="Vertical" 
+                 Margin="{StaticResource SpaceXS}">
+
+        <ImageButton x:Name="Button" 
+                     HeightRequest="{StaticResource SpaceML}"
+                     WidthRequest="{StaticResource SpaceML}" />
+
+        <Label x:Name="ButtonLabel" 
+               FontSize="{StaticResource TinyFontSize}"
+               Margin="{StaticResource SpaceXXS}"/>
+    </StackLayout>
+
+</ContentView>

AMC.View/Controls/IconLabelButton.xaml.cs

@@ -0,0 +1,58 @@
+namespace AMC.View.Controls
+{
+    public partial class IconLabelButton : ContentView
+    {
+        public static readonly BindableProperty ButtonSourceProperty = BindableProperty.Create(
+            nameof(ButtonSource),
+            typeof(string),
+            typeof(IconLabelButton),
+            default(string),
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ((IconLabelButton)bindable).Button.Source = (string)newValue;
+            });
+
+        public static readonly BindableProperty ButtonLabelTextProperty = BindableProperty.Create(
+            nameof(ButtonLabelText),
+            typeof(string),
+            typeof(IconLabelButton),
+            default(string),
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ((IconLabelButton)bindable).ButtonLabel.Text = (string)newValue;
+            });
+
+        public static readonly BindableProperty LabelTextColorProperty = BindableProperty.Create(
+            nameof(LabelTextColor),
+            typeof(Color),
+            typeof(IconLabelButton),
+            default(Color),
+            propertyChanged: (bindable, oldValue, newValue) =>
+            {
+                ((IconLabelButton)bindable).ButtonLabel.TextColor = (Color)newValue;
+            });
+
+        public IconLabelButton()
+        {
+            InitializeComponent();
+        }
+
+        public string ButtonSource
+        {
+            get => (string)GetValue(ButtonSourceProperty);
+            set => SetValue(ButtonSourceProperty, value);
+        }
+
+        public string ButtonLabelText
+        {
+            get => (string)GetValue(ButtonLabelTextProperty);
+            set => SetValue(ButtonLabelTextProperty, value);
+        }
+
+        public Color LabelTextColor
+        {
+            get => (Color)GetValue(LabelTextColorProperty);
+            set => SetValue(LabelTextColorProperty, value);
+        }
+    }
+}

AMC.View/Resources/Strings/Strings.Designer.cs

@@ -78,6 +78,24 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Browse.
+        /// </summary>
+        public static string BrowseTitle {
+            get {
+                return ResourceManager.GetString("BrowseTitle", resourceCulture);
+            }
+        }
+        
+        /// <summary>
+        ///   Looks up a localized string similar to Not Playing.
+        /// </summary>
+        public static string DefaultPlayingSongLabel {
+            get {
+                return ResourceManager.GetString("DefaultPlayingSongLabel", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Genres.
         /// </summary>
@@ -105,6 +123,15 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Listen Now.
+        /// </summary>
+        public static string ListenNowTitle {
+            get {
+                return ResourceManager.GetString("ListenNowTitle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to minutes.
         /// </summary>
@@ -141,6 +168,15 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Radio.
+        /// </summary>
+        public static string RadioTitle {
+            get {
+                return ResourceManager.GetString("RadioTitle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Recently Added.
         /// </summary>
@@ -150,6 +186,15 @@ namespace AMC.View.Resources.Strings {
             }
         }
         
+        /// <summary>
+        ///   Looks up a localized string similar to Search.
+        /// </summary>
+        public static string SearchTitle {
+            get {
+                return ResourceManager.GetString("SearchTitle", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   Looks up a localized string similar to Shuffle.
         /// </summary>

AMC.View/Resources/Strings/Strings.fr.resx

@@ -156,4 +156,19 @@
   <data name="GenresCategory" xml:space="preserve">
     <value>Genres</value>
   </data>
+  <data name="DefaultPlayingSongLabel" xml:space="preserve">
+    <value>Rien en lecture</value>
+  </data>
+  <data name="ListenNowTitle" xml:space="preserve">
+    <value>Ecouter</value>
+  </data>
+  <data name="RadioTitle" xml:space="preserve">
+    <value>Radio</value>
+  </data>
+  <data name="BrowseTitle" xml:space="preserve">
+    <value>Éxplorer</value>
+  </data>
+  <data name="SearchTitle" xml:space="preserve">
+    <value>Recherche</value>
+  </data>
 </root>

AMC.View/Resources/Strings/Strings.resx

@@ -160,4 +160,19 @@
     <value>···</value>
     <comment>@Invariant</comment>
   </data>
+  <data name="DefaultPlayingSongLabel" xml:space="preserve">
+    <value>Not Playing</value>
+  </data>
+  <data name="ListenNowTitle" xml:space="preserve">
+    <value>Listen Now</value>
+  </data>
+  <data name="RadioTitle" xml:space="preserve">
+    <value>Radio</value>
+  </data>
+  <data name="BrowseTitle" xml:space="preserve">
+    <value>Browse</value>
+  </data>
+  <data name="SearchTitle" xml:space="preserve">
+    <value>Search</value>
+  </data>
 </root>

AMC.View/Resources/Styles/Colors.xaml

@@ -27,6 +27,7 @@
     <Color x:Key="Gray400">#919191</Color>
     <Color x:Key="Gray500">#6E6E6E</Color>
     <Color x:Key="Gray600">#404040</Color>
+    <Color x:Key="Gray750">#303030</Color>
     <Color x:Key="Gray900">#212121</Color>
     <Color x:Key="Gray950">#141414</Color>
 

AMC.View/Resources/Styles/Styles.xaml

@@ -6,18 +6,24 @@
 
     <Style TargetType="BoxView" x:Key="GraySeparator">
         <Setter Property="HeightRequest" Value="1"/>
-        <Setter Property="Color" Value="{StaticResource Gray200}"/>
+        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray900}}"/>
         <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
         <Setter Property="Margin" Value="32, 0, 8, 0"/>
     </Style>
 
     <Style TargetType="BoxView" x:Key="HeadGraySeparator">
         <Setter Property="HeightRequest" Value="1"/>
-        <Setter Property="Color" Value="{StaticResource Gray200}"/>
+        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray900}}"/>
         <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
         <Setter Property="Margin" Value="8, 8, 8, 8"/>
     </Style>
 
+    <Style TargetType="BoxView" x:Key="BottomBarGraySeparator">
+        <Setter Property="HeightRequest" Value="1"/>
+        <Setter Property="Color" Value="{AppThemeBinding Light={StaticResource Gray400}, Dark={StaticResource Gray600}}"/>
+        <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
+    </Style>
+
     <Style TargetType="Label" x:Key="FooterLabel">
         <Setter Property="FontSize" Value="12" />
         <Setter Property="TextColor" Value="{StaticResource Gray}" />
@@ -45,7 +51,7 @@
 
     <Style TargetType="Button">
         <Setter Property="TextColor" Value="{StaticResource Secondary}" />
-        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray600}}" />
+        <Setter Property="BackgroundColor" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray750}}" />
         <Setter Property="FontFamily" Value="OpenSansRegular"/>
         <Setter Property="FontSize" Value="14"/>
         <Setter Property="CornerRadius" Value="8"/>

AMC.View/Resources/Styles/Values.xaml

@@ -7,8 +7,9 @@
 	<x:Double x:Key="SpaceXXS">4</x:Double>
 	<x:Double x:Key="SpaceXS">8</x:Double>
 	<x:Double x:Key="SpaceS">12</x:Double>
-	<x:Double x:Key="SpaceM">16</x:Double>
+    <x:Double x:Key="SpaceM">16</x:Double>
-	<x:Double x:Key="SpaceL">32</x:Double>
+    <x:Double x:Key="SpaceML">24</x:Double>
+    <x:Double x:Key="SpaceL">32</x:Double>
 	<x:Double x:Key="SpaceXL">64</x:Double>
 	<x:Double x:Key="SpaceXXL">128</x:Double>
 	<x:Double x:Key="AlbumPageCoverHeight">320</x:Double>
@@ -21,13 +22,15 @@
 	<Thickness x:Key="BottomSpaceLittle">0, 0, 0, 8</Thickness>
 	<Thickness x:Key="LeftRightSpaceLarge">32, 0, 32, 0</Thickness>
 	<Thickness x:Key="WideButtonLeft">16, 16, 8, 16</Thickness>
-	<Thickness x:Key="WideButtonRight">8, 16, 16, 16</Thickness>
+    <Thickness x:Key="WideButtonRight">8, 16, 16, 16</Thickness>
+    <Thickness x:Key="HSpaceLittleVSpaceVeryLittle">8, 4, 8, 4</Thickness>
 
-	<CornerRadius x:Key="SlightlyRoundedCorner">8, 8, 8, 8</CornerRadius>
+    <CornerRadius x:Key="SlightlyRoundedCorner">8, 8, 8, 8</CornerRadius>
 
 	<x:Double x:Key="TitleFontSize">32</x:Double>
 	<x:Double x:Key="SubtitleFontSize">24</x:Double>
 	<x:Double x:Key="SubSubtitleFontSize">16</x:Double>
-	<x:Double x:Key="DetailsFontSize">12</x:Double>
+    <x:Double x:Key="DetailsFontSize">12</x:Double>
+    <x:Double x:Key="TinyFontSize">8</x:Double>
 
 </ResourceDictionary>

AMC.View/Views/AlbumPage.xaml

@@ -4,6 +4,7 @@
              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">
@@ -13,85 +14,88 @@
         </ResourceDictionary>
     </ContentPage.Resources>
 
-
+    <Grid>
-    <ScrollView 
+        <Grid.RowDefinitions>
-        Padding="{StaticResource BottomBarSpace}"
+            <RowDefinition Height="*"/>
-        BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
+            <RowDefinition Height="Auto"/>
-        <Grid Margin="{StaticResource SpaceXS}">
+        </Grid.RowDefinitions>
-            <Grid.RowDefinitions>
+        <ScrollView Grid.Row="0"
-                <RowDefinition Height="{StaticResource AlbumPageCoverHeight}"/>
+                BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
-                <RowDefinition Height="Auto"/>
+            <Grid Margin="{StaticResource SpaceXS}">
-                <RowDefinition Height="Auto"/>
+                <Grid.RowDefinitions>
-                <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="{StaticResource AlbumPageCoverHeight}"/>
-                <RowDefinition Height="*"/>
+                    <RowDefinition Height="Auto"/>
-                <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
-            </Grid.RowDefinitions>
+                    <RowDefinition Height="Auto"/>
-
+                    <RowDefinition Height="*"/>
-            <Border 
+                    <RowDefinition Height="Auto"/>
+                </Grid.RowDefinitions>
+
+                <Border 
                 Grid.Row="0"
                 Margin="{StaticResource LeftRightSpaceLarge}">
-                <Border.StrokeShape>
+                    <Border.StrokeShape>
-                    <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
+                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
-                </Border.StrokeShape>
+                    </Border.StrokeShape>
-                <Image Source="{Binding CoverImage}"
+                    <Image Source="{Binding CoverImage}"
                    Aspect="AspectFill"/>
-            </Border>
+                </Border>
 
-            <StackLayout Padding="{StaticResource SpaceXS}"
+                <StackLayout Padding="{StaticResource SpaceXS}"
                          Grid.Row="1">
 
-                <Label Text="{Binding Title}" 
+                    <Label Text="{Binding Title}" 
                        FontSize="{StaticResource SubtitleFontSize}" 
                        TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
                        HorizontalTextAlignment="Center"/>
 
-                <Label Text="{Binding Artist}" 
+                    <Label Text="{Binding Artist}" 
                        FontSize="{StaticResource SubSubtitleFontSize}" 
                        TextColor="{StaticResource Secondary}" 
                        HorizontalTextAlignment="Center" />
 
-            </StackLayout>
+                </StackLayout>
 
-            <StackLayout Grid.Row="2">
+                <StackLayout Grid.Row="2">
-                <Label Text="{Binding Details, StringFormat='\{0\} · \{1\}'}" 
+                    <Label Text="{Binding Details, StringFormat='\{0\} · \{1\}'}" 
                        FontSize="{StaticResource DetailsFontSize}" 
                        TextColor="{StaticResource Gray}" 
                        HorizontalTextAlignment="Center"/>
 
-                <Grid Margin="{StaticResource SpaceXS}">
+                    <Grid Margin="{StaticResource SpaceXS}">
-                    <Grid.ColumnDefinitions>
+                        <Grid.ColumnDefinitions>
-                        <ColumnDefinition Width="*"/>
+                            <ColumnDefinition Width="*"/>
-                        <ColumnDefinition Width="*"/>
+                            <ColumnDefinition Width="*"/>
-                    </Grid.ColumnDefinitions>
+                        </Grid.ColumnDefinitions>
 
-                    <Button Text="{x:Static strings:Strings.PlayButton}"
+                        <Button Text="{x:Static strings:Strings.PlayButton}"
                             Margin="{StaticResource WideButtonLeft}"
                             Grid.Column="0"/>
 
-                    <Button Text="{x:Static strings:Strings.ShuffleButton}"
+                        <Button Text="{x:Static strings:Strings.ShuffleButton}"
                             Margin="{StaticResource WideButtonRight}"
                             Grid.Column="1"/>
 
-                </Grid>
+                    </Grid>
 
-            </StackLayout>
+                </StackLayout>
 
-            <BoxView Style="{StaticResource HeadGraySeparator}"
+                <BoxView Style="{StaticResource HeadGraySeparator}"
                      Grid.Row="3" />
 
-            <CollectionView ItemsSource="{Binding Songs}"
+                <CollectionView ItemsSource="{Binding Songs}"
                             Grid.Row="4">
-                <CollectionView.ItemTemplate>
+                    <CollectionView.ItemTemplate>
-                    <DataTemplate x:DataType="vm:SongViewModel">
+                        <DataTemplate x:DataType="vm:SongViewModel">
-                        <StackLayout>
+                            <StackLayout>
-                            <Grid Margin="{StaticResource TopBottomSpaceLittle}">
+                                <Grid Margin="{StaticResource TopBottomSpaceLittle}">
-                                <Grid.ColumnDefinitions>
+                                    <Grid.ColumnDefinitions>
-                                    <ColumnDefinition Width="{StaticResource SpaceL}"/>
+                                        <ColumnDefinition Width="{StaticResource SpaceL}"/>
-                                    <ColumnDefinition Width="*"/>
+                                        <ColumnDefinition Width="*"/>
-                                    <ColumnDefinition Width="Auto"/>
+                                        <ColumnDefinition Width="Auto"/>
-                                </Grid.ColumnDefinitions>
+                                    </Grid.ColumnDefinitions>
-
+
-                                <Label Text="{Binding Index}" 
+                                    <Label Text="{Binding Index}" 
                                        FontSize="{StaticResource SubSubtitleFontSize}" 
                                        TextColor="{StaticResource Gray}"
                                        Margin="{StaticResource RightSpaceLittle}"
@@ -99,39 +103,42 @@
                                        HorizontalOptions="Center"
                                        Grid.Column="0"/>
 
-                                <Label Text="{Binding Title}" 
+                                    <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}" 
+                                    <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>
+                                </Grid>
 
-                            <BoxView Style="{StaticResource GraySeparator}"/>
+                                <BoxView Style="{StaticResource GraySeparator}"/>
-                        </StackLayout>
+                            </StackLayout>
-                    </DataTemplate>
+                        </DataTemplate>
-                </CollectionView.ItemTemplate>
+                    </CollectionView.ItemTemplate>
-            </CollectionView>
+                </CollectionView>
 
-            <StackLayout Margin="{StaticResource TopSpaceSome}"
+                <StackLayout Margin="{StaticResource TopSpaceSome}"
                          Grid.Row="5">
-                <Label Text="{Binding ReleaseDate, StringFormat='{0:d MMMM yyyy}'}" 
+                    <Label Text="{Binding ReleaseDate, StringFormat='{0:d MMMM yyyy}'}" 
                        Style="{StaticResource FooterLabel}" />
 
-                <Label Text="{Binding SongsInfo, Converter={StaticResource SongsInfo}}"
+                    <Label Text="{Binding SongsInfo, Converter={StaticResource SongsInfo}}"
                        Style="{StaticResource FooterLabel}" />
 
-                <Label Text="{Binding CopyrightInfo, StringFormat='℗ \{0\} \{1\}'}"
+                    <Label Text="{Binding CopyrightInfo, StringFormat='℗ \{0\} \{1\}'}"
                        Style="{StaticResource FooterLabel}" />
-            </StackLayout>
+                </StackLayout>
 
-        </Grid>
+            </Grid>
-    </ScrollView>
+        </ScrollView>
+        <!-- TODO Insert this in a main layout of some sort...-->
+        <ctl:BottomBar Grid.Row="1" />
+    </Grid>
 </ContentPage>

AMC.View/Views/LibraryPage.xaml

@@ -9,71 +9,78 @@
              x:Class="AMC.View.Views.LibraryPage"
              x:DataType="vm:LibraryViewModel">
 
-    <ScrollView 
+    <Grid>
-        Padding="{StaticResource BottomBarSpace}"
+        <Grid.RowDefinitions>
-        BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
+            <RowDefinition Height="*"/>
-        <StackLayout Spacing="{StaticResource SpaceXS}"
+            <RowDefinition Height="Auto"/>
-                     Margin="{StaticResource BottomSpaceLittle}">
+        </Grid.RowDefinitions>
-            <Label Text="{x:Static strings:Strings.LibraryTitle}"
+        <ScrollView Grid.Row="0"
-                   FontSize="{StaticResource TitleFontSize}"
+                    BackgroundColor="{AppThemeBinding Light={StaticResource Background}, Dark={StaticResource BackgroundDark}}">
-                   FontAttributes="Bold"
+            <StackLayout Spacing="{StaticResource SpaceXS}"
-                   TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
+                         Margin="{StaticResource BottomSpaceLittle}">
-                   Margin="{StaticResource SpaceXS}" />
+                <Label Text="{x:Static strings:Strings.LibraryTitle}"
+                       FontSize="{StaticResource TitleFontSize}"
+                       FontAttributes="Bold"
+                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
+                       Margin="{StaticResource SpaceXS}" />
 
-            <StackLayout Orientation="Vertical" Spacing="0">
+                <StackLayout Orientation="Vertical" Spacing="0">
-                <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.PlaylistsCategory}"
+                    <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.PlaylistsCategory}"
                                              IconSource="icon_categories_playlists.png" />
-                <BoxView Style="{StaticResource GraySeparator}"/>
+                    <BoxView Style="{StaticResource GraySeparator}"/>
 
-                <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.ArtistsCategory}"
+                    <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.ArtistsCategory}"
                                              IconSource="icon_categories_artists.png" />
-                <BoxView Style="{StaticResource GraySeparator}"/>
+                    <BoxView Style="{StaticResource GraySeparator}"/>
 
-                <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.AlbumsCategory}"
+                    <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.AlbumsCategory}"
                                              IconSource="icon_categories_albums.png" />
-                <BoxView Style="{StaticResource GraySeparator}"/>
+                    <BoxView Style="{StaticResource GraySeparator}"/>
 
-                <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.SongsCategory}"
+                    <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.SongsCategory}"
                                              IconSource="icon_categories_songs.png" />
-                <BoxView Style="{StaticResource GraySeparator}"/>
+                    <BoxView Style="{StaticResource GraySeparator}"/>
 
-                <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.GenresCategory}"
+                    <ctl:LibraryCategoryItem CategoryText="{x:Static strings:Strings.GenresCategory}"
                                              IconSource="icon_categories_genres.png" />
-                <BoxView Style="{StaticResource GraySeparator}"/>
+                    <BoxView Style="{StaticResource GraySeparator}"/>
 
-            </StackLayout>
+                </StackLayout>
 
-            <Label Text="{x:Static strings:Strings.RecentlyAddedHeader}"
+                <Label Text="{x:Static strings:Strings.RecentlyAddedHeader}"
                    FontSize="{StaticResource SubSubtitleFontSize}"
                    FontAttributes="Bold"
                    TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}"
                    Margin="{StaticResource SpaceXS}" />
 
-            <CollectionView ItemsSource="{Binding Albums}"
+                <CollectionView ItemsSource="{Binding Albums}"
                             ItemsLayout="VerticalGrid, 2"
                             SelectionMode="Single"
                             SelectionChanged="OnAlbumSelected">
-                <CollectionView.ItemTemplate>
+                    <CollectionView.ItemTemplate>
-                    <DataTemplate x:DataType="vm:AlbumViewModel">
+                        <DataTemplate x:DataType="vm:AlbumViewModel">
-                        <StackLayout Margin="{StaticResource SpaceS}">
+                            <StackLayout Margin="{StaticResource SpaceS}">
-                            <Border>
+                                <Border>
-                                <Border.StrokeShape>
+                                    <Border.StrokeShape>
-                                    <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
+                                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
-                                </Border.StrokeShape>
+                                    </Border.StrokeShape>
-                                <Image Source="{Binding CoverImage}"
+                                    <Image Source="{Binding CoverImage}"
-                                       Aspect="AspectFill" />
+                                           Aspect="AspectFill" />
-                            </Border>
+                                </Border>
 
-                            <Label Text="{Binding Title}"
+                                <Label Text="{Binding Title}"
-                                   TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
+                                       TextColor="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource PrimaryDark}}" 
-                                   LineBreakMode="TailTruncation" />
+                                       LineBreakMode="TailTruncation" />
-                            <Label Text="{Binding Artist}"        
+                                <Label Text="{Binding Artist}"        
-                                   TextColor="{StaticResource Gray}" 
+                                       TextColor="{StaticResource Gray}" 
-                                   LineBreakMode="TailTruncation" />
+                                       LineBreakMode="TailTruncation" />
-                        </StackLayout>
+                            </StackLayout>
-                    </DataTemplate>
+                        </DataTemplate>
-                </CollectionView.ItemTemplate>
+                    </CollectionView.ItemTemplate>
-            </CollectionView>
+                </CollectionView>
-        </StackLayout>
+            </StackLayout>
-    </ScrollView>
+        </ScrollView>
+        <!-- TODO Insert this in a main layout of some sort...-->
+        <ctl:BottomBar Grid.Row="1" />
+    </Grid>
 </ContentPage>

AMC.View/Views/LibraryPage.xaml.cs

@@ -21,7 +21,6 @@ namespace AMC.View.Views
         private void OnAlbumSelected(object sender, SelectionChangedEventArgs e)
         {
             var collectionView = (CollectionView)sender;
-            var selectedAlbum = (AlbumViewModel)e.CurrentSelection.FirstOrDefault();
 
             if (e.CurrentSelection.FirstOrDefault() is AlbumViewModel selectedAlbum)
             {