🗂️ *Divide et Impera* and fix a typo

AMC.View/AMC.View.csproj

@@ -72,6 +72,8 @@
 	  <None Remove="Resources\Images\icon_next_dark.png" />
 	  <None Remove="Resources\Images\icon_play.png" />
 	  <None Remove="Resources\Images\icon_play_dark.png" />
+	  <None Remove="Resources\Images\icon_wide_button_play.png" />
+	  <None Remove="Resources\Images\icon_wide_button_shuffle.png" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -110,6 +112,9 @@
 	  <MauiXaml Update="Controls\IconLabelButton.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>
+	  <MauiXaml Update="Controls\IconLabelButtonWide.xaml">
+	    <Generator>MSBuild:Compile</Generator>
+	  </MauiXaml>
 	  <MauiXaml Update="Resources\Styles\Values.xaml">
 	    <Generator>MSBuild:Compile</Generator>
 	  </MauiXaml>

AMC.View/Controls/IconLabelButtonWide.xaml

@@ -0,0 +1,32 @@
+<?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.IconLabelButtonWide">
+
+	<Frame HeightRequest="{StaticResource SpaceLXL}"
+           WidthRequest="{StaticResource SpaceXXXL}"
+           HorizontalOptions="Center"
+           BackgroundColor="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray750}}"
+           Margin="{StaticResource SpaceXS}"
+           Padding="{StaticResource SpaceXS}"
+           CornerRadius="{StaticResource SlightlyRoundedCorners}">
+
+		<StackLayout Orientation="Horizontal"
+                     HorizontalOptions="CenterAndExpand"
+                     VerticalOptions="CenterAndExpand"
+                     Spacing="{StaticResource SpaceXXS}">
+
+			<ImageButton x:Name="Button"
+                         HeightRequest="{StaticResource SpaceML}"
+                         WidthRequest="{StaticResource SpaceML}" />
+
+			<Label x:Name="ButtonLabel"
+                   FontSize="{StaticResource SubSubtitleFontSize}"
+                   HorizontalOptions="Center"
+                   VerticalOptions="Center"
+                   TextColor="{StaticResource Secondary}"/>
+		</StackLayout>
+
+	</Frame>
+
+</ContentView>

AMC.View/Controls/IconLabelButtonWide.xaml.cs

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

AMC.View/Resources/Styles/Values.xaml

@@ -10,9 +10,11 @@
     <x:Double x:Key="SpaceM">16</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="SpaceLXL">48</x:Double>
-	<x:Double x:Key="SpaceXXL">128</x:Double>
+    <x:Double x:Key="SpaceXL">64</x:Double>
-	<x:Double x:Key="AlbumPageCoverHeight">320</x:Double>
+    <x:Double x:Key="SpaceXXL">128</x:Double>
+    <x:Double x:Key="SpaceXXXL">144</x:Double>
+    <x:Double x:Key="AlbumPageCoverHeight">320</x:Double>
 
 	<Thickness x:Key="BottomBarSpace">0, 0, 0, 128</Thickness>
 	<Thickness x:Key="TopSpaceSome">0, 24, 0, 0</Thickness>
@@ -25,7 +27,7 @@
     <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="SlightlyRoundedCorners">8</CornerRadius>
 
 	<x:Double x:Key="TitleFontSize">32</x:Double>
 	<x:Double x:Key="SubtitleFontSize">24</x:Double>

AMC.View/Views/AlbumPage.xaml

@@ -27,6 +27,7 @@
                     <RowDefinition Height="Auto"/>
                     <RowDefinition Height="Auto"/>
                     <RowDefinition Height="Auto"/>
+                    <RowDefinition Height="Auto"/>
                     <RowDefinition Height="*"/>
                     <RowDefinition Height="Auto"/>
                 </Grid.RowDefinitions>
@@ -35,7 +36,7 @@
                 Grid.Row="0"
                 Margin="{StaticResource LeftRightSpaceLarge}">
                     <Border.StrokeShape>
-                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
+                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorners}" />
                     </Border.StrokeShape>
                     <Image Source="{Binding CoverImage}"
                    Aspect="AspectFill"/>
@@ -56,35 +57,34 @@
 
                 </StackLayout>
 
-                <StackLayout Grid.Row="2">
+                <Label Grid.Row="2"  
-                    <Label Text="{Binding Details, StringFormat='\{0\} · \{1\}'}" 
+                       Text="{Binding Details, StringFormat='\{0\} · \{1\}'}" 
                        FontSize="{StaticResource DetailsFontSize}" 
                        TextColor="{StaticResource Gray}" 
                        HorizontalTextAlignment="Center"/>
 
-                    <Grid Margin="{StaticResource SpaceXS}">
+                <FlexLayout Grid.Row="3"
-                        <Grid.ColumnDefinitions>
+                            Direction="Row" 
-                            <ColumnDefinition Width="*"/>
+                            Margin="{StaticResource SpaceXS}"
-                            <ColumnDefinition Width="*"/>
+                            JustifyContent="SpaceAround" 
-                        </Grid.ColumnDefinitions>
+                            AlignItems="Center">
 
-                        <Button Text="{x:Static strings:Strings.PlayButton}"
+                    <ctl:IconLabelButtonWide ButtonSource="icon_wide_button_play.png"
-                            Margin="{StaticResource WideButtonLeft}"
+                                                 ButtonLabelText="{x:Static strings:Strings.PlayButton}" 
-                            Grid.Column="0"/>
+                                                 Margin="{StaticResource WideButtonLeft}" />
 
-                        <Button Text="{x:Static strings:Strings.ShuffleButton}"
+                    <ctl:IconLabelButtonWide ButtonSource="icon_wide_button_shuffle.png"
-                            Margin="{StaticResource WideButtonRight}"
+                                                 ButtonLabelText="{x:Static strings:Strings.ShuffleButton}"
-                            Grid.Column="1"/>
+                                                 Margin="{StaticResource WideButtonRight}" />
 
-                    </Grid>
+                </FlexLayout>
 
-                </StackLayout>
 
                 <BoxView Style="{StaticResource HeadGraySeparator}"
-                     Grid.Row="3" />
+                     Grid.Row="4" />
 
                 <CollectionView ItemsSource="{Binding Songs}"
-                            Grid.Row="4">
+                            Grid.Row="5">
                     <CollectionView.ItemTemplate>
                         <DataTemplate x:DataType="vm:SongViewModel">
                             <StackLayout>
@@ -125,7 +125,7 @@
                 </CollectionView>
 
                 <StackLayout Margin="{StaticResource TopSpaceSome}"
-                         Grid.Row="5">
+                         Grid.Row="6">
                     <Label Text="{Binding ReleaseDate, StringFormat='{0:d MMMM yyyy}'}" 
                        Style="{StaticResource FooterLabel}" />
 

AMC.View/Views/LibraryPage.xaml

@@ -62,7 +62,7 @@
                             <StackLayout Margin="{StaticResource SpaceS}">
                                 <Border>
                                     <Border.StrokeShape>
-                                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorner}" />
+                                        <RoundRectangle CornerRadius="{StaticResource SlightlyRoundedCorners}" />
                                     </Border.StrokeShape>
                                     <Image Source="{Binding CoverImage}"
                                            Aspect="AspectFill" />