style(win): make album art immersive without fixed boundaries

- Removed the fixed border around the album art\n- Set the album art to cover the background of the page with a uniform-to-fill stretch\n- Added a gradient overlay fading to the system background color to smoothly blend the bottom half into the UI

Author: jayfunc

Windows/ViewModels/PlayerViewModel.cs

@@ -48,6 +48,13 @@ public partial class PlayerViewModel : ObservableObject
     [ObservableProperty]
     public partial Microsoft.UI.Xaml.Media.Imaging.BitmapImage? AlbumArtImage { get; set; }
 
+    partial void OnAlbumArtImageChanged(Microsoft.UI.Xaml.Media.Imaging.BitmapImage? value)
+    {
+        OnPropertyChanged(nameof(NoAlbumArtVisibility));
+    }
+
+    public Microsoft.UI.Xaml.Visibility NoAlbumArtVisibility => AlbumArtImage == null ? Microsoft.UI.Xaml.Visibility.Visible : Microsoft.UI.Xaml.Visibility.Collapsed;
+
     public DevicesViewModel DevicesVM { get; }
 
     public PlayerViewModel(INetworkService networkService, ISmtcService smtcService, DevicesViewModel devicesVm)

Windows/Views/PlayerPage.xaml

@@ -8,15 +8,45 @@
     Background="Transparent"
     mc:Ignorable="d">
 
-    <Grid Padding="24">
-        <Grid MaxWidth="440" HorizontalAlignment="Center" VerticalAlignment="Center">
+    <Grid>
+        <!-- Background Immersive Image -->
+        <Image
+            Source="{x:Bind ViewModel.AlbumArtImage, Mode=OneWay}"
+            Stretch="UniformToFill"
+            VerticalAlignment="Top"
+            HorizontalAlignment="Stretch"
+            Opacity="0.5" />
+
+        <!-- Fade out gradient overlay -->
+        <Border VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+            <Border.Background>
+                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
+                    <GradientStop Offset="0.0" Color="#00000000" />
+                    <GradientStop Offset="0.5" Color="#00000000" />
+                    <GradientStop Offset="1.0" Color="{ThemeResource SystemAltHighColor}" />
+                </LinearGradientBrush>
+            </Border.Background>
+        </Border>
+
+        <!-- Placeholder Icon -->
+        <FontIcon 
+            FontFamily="Segoe Fluent Icons" 
+            Glyph="&#xE8D6;" 
+            FontSize="120" 
+            Foreground="{ThemeResource TextFillColorTertiaryBrush}" 
+            VerticalAlignment="Top" 
+            Margin="0,100,0,0"
+            Visibility="{x:Bind ViewModel.NoAlbumArtVisibility, Mode=OneWay}" />
+
+        <!-- Foreground Content -->
+        <Grid Padding="24">
             <Grid.RowDefinitions>
-                <RowDefinition Height="Auto" />
                 <RowDefinition Height="Auto" />
                 <RowDefinition Height="*" />
                 <RowDefinition Height="Auto" />
             </Grid.RowDefinitions>
 
+            <!-- Device Selector -->
             <ComboBox
                 Grid.Row="0"
                 x:Uid="SelectDevice"
@@ -34,19 +64,8 @@
                 </ComboBox.ItemTemplate>
             </ComboBox>
 
-            <Grid Grid.Row="1" Height="24" />
-
-            <!-- Album Art Container (Responsive) -->
-            <Viewbox Grid.Row="2" Stretch="Uniform" StretchDirection="DownOnly" HorizontalAlignment="Center" VerticalAlignment="Center">
-                <Border Width="320" Height="320" CornerRadius="16" BorderBrush="{ThemeResource SurfaceStrokeColorDefault}" BorderThickness="1" Background="{ThemeResource LayerFillColorDefaultBrush}">
-                    <Grid>
-                        <FontIcon FontFamily="Segoe Fluent Icons" Glyph="&#xE8D6;" FontSize="64" Foreground="{ThemeResource TextFillColorTertiaryBrush}" />
-                        <Image Source="{x:Bind ViewModel.AlbumArtImage, Mode=OneWay}" Stretch="UniformToFill" />
-                    </Grid>
-                </Border>
-            </Viewbox>
-
-            <StackPanel Grid.Row="3" Spacing="16" Margin="16,24,16,0">
+            <!-- Info & Controls -->
+            <StackPanel Grid.Row="2" Spacing="16" MaxWidth="560" HorizontalAlignment="Stretch" VerticalAlignment="Bottom">
                 <!-- Text -->
                 <StackPanel Spacing="4">
                     <TextBlock Text="{x:Bind ViewModel.DisplayTitle, Mode=OneWay}" Style="{ThemeResource TitleTextBlockStyle}" FontWeight="Bold" TextTrimming="CharacterEllipsis" MaxLines="1" HorizontalAlignment="Left" />