harmonia/Harmonia.WinUI/Views/PlayerView.xaml

<UserControl
    x:Class="Harmonia.WinUI.Views.PlayerView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Harmonia.WinUI.Views"
    xmlns:vm="using:Harmonia.WinUI.ViewModels"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    DataContext="{Binding Source={StaticResource Locator}, Path=PlayerViewModel}"
    d:DataContext="{d:DesignInstance Type=vm:PlayerViewModel, IsDesignTimeCreatable=True}"
    mc:Ignorable="d">

    <UserControl.Resources>
        <SolidColorBrush x:Key="SongItemTitleBrush" Color="#dddddd"/>
        <SolidColorBrush x:Key="SongItemSubtitleBrush" Color="#aaaaaa"/>

        <Style x:Key="PlayerGrid" TargetType="Grid">
            <Setter Property="Background" Value="#1a1a1a"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Background" Value="Transparent"/>
        </Style>
        <Style x:Key="SongTitleTextBlock" TargetType="TextBlock">
            <Setter Property="FontSize" Value="16"/>
            <Setter Property="FontWeight" Value="SemiBold"/>
            <Setter Property="TextTrimming" Value="CharacterEllipsis"/>
            <Setter Property="Foreground" Value="{StaticResource SongItemTitleBrush}"/>
        </Style>
        <Style x:Key="SongImage" TargetType="Image">
            <Setter Property="Width" Value="80"/>
            <Setter Property="Height" Value="80"/>
        </Style>
    </UserControl.Resources>

    <Grid Style="{StaticResource PlayerGrid}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition></ColumnDefinition>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"></RowDefinition>
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <!-- Position Slider -->
        <Grid Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" VerticalAlignment="Center" Margin="0 0 0 10">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
                <ColumnDefinition></ColumnDefinition>
                <ColumnDefinition Width="Auto"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <Border Grid.Column="0" Background="Transparent" Padding="0 8" Width="60" CornerRadius="4" VerticalAlignment="Center" Margin="0 0 6 0">
                <TextBlock
                    Foreground="#aaaaaa"
                    Text="{Binding Position, Converter={StaticResource SecondsToString}}"
                    FontSize="13"
                    HorizontalAlignment="Right"
                    VerticalAlignment="Center">
                </TextBlock>
            </Border>
            
            <Slider
                Name="PositionSlider"
                Loaded="PositionSlider_Loaded"
                Grid.Column="1"
                Value="{Binding CurrentPosition, Mode=TwoWay, UpdateSourceTrigger=Explicit}"
                Minimum="0"
                Maximum="{Binding MaxPosition, Mode=OneWay}"
                IsEnabled="{Binding CanUpdatePosition, Mode=OneWay}"
                ThumbToolTipValueConverter="{StaticResource SecondsToString}"
                VerticalAlignment="Center"
                VerticalContentAlignment="Center" />

            <Border Grid.Column="2" Background="Transparent" Padding="0 8" Width="60" CornerRadius="4" VerticalAlignment="Center" Margin="6 0 0 0">
                <TextBlock
                    Foreground="#aaaaaa"
                    Text="{Binding MaxPosition, Converter={StaticResource SecondsToString}}"
                    FontSize="13"
                    VerticalAlignment="Center">
                </TextBlock>
            </Border>
            
        </Grid>

        <!-- Song Info -->
        <Grid Grid.Row="1" Grid.Column="0" Name="PlayingSongGrid">
            <StackPanel Orientation="Horizontal">
                <Grid Margin="0 0 10 0">
                    <Image Source="{Binding SongImageSource, Mode=OneWay}" Style="{StaticResource SongImage}"></Image>
                    <Canvas Background="#19000000"></Canvas>
                </Grid>
                <StackPanel VerticalAlignment="Center">
                    <TextBlock Foreground="#dddddd" FontWeight="SemiBold" FontSize="16" Text="{Binding Song, Converter={StaticResource SongTitle}}"></TextBlock>
                    <TextBlock Foreground="#aaaaaa" FontSize="14" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}"></TextBlock>
                    <TextBlock Foreground="#aaaaaa" FontSize="14" Text="{Binding Song.Album}"></TextBlock>
                    <TextBlock Foreground="#777" FontSize="12"  Visibility="{Binding Song, Converter={StaticResource NullVisibility}}">
                        <Run Text="{Binding Song.FileType}"></Run><Run Text=" - "></Run><Run Text="{Binding Song.BitRate}"></Run><Run Text=" kbps - "></Run><Run Text="{Binding Song.SampleRate}"></Run><Run Text=" Hz"></Run>
                    </TextBlock>
                </StackPanel>
            </StackPanel>
        </Grid>

        <!-- Playback Actions -->
        <Grid Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">
            <StackPanel Orientation="Horizontal" Spacing="16">
                <Button Style="{StaticResource FlatButton}" Command="{Binding PreviousSongCommand}">
                    <Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource SkipStartFillIcon}"></Path>
                </Button>
                <Button Style="{StaticResource FlatButton}"  Command="{Binding StopSongCommand}">
                    <Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource StopFillIcon}"></Path>
                </Button>
                <Button Style="{StaticResource FlatButton}" Command="{Binding PlaySongCommand}">
                    <Path Style="{StaticResource FlatButtonPath-Large}"  Data="{StaticResource PlayFillIcon}"></Path>
                </Button>
                <Button Style="{StaticResource FlatButton}"  Command="{Binding PauseSongCommand}">
                    <Path Style="{StaticResource FlatButtonPath}" Data="{StaticResource PauseFillIcon}"></Path>
                </Button>
                <Button Style="{StaticResource FlatButton}"  Command="{Binding NextSongCommand}">
                    <Path Style="{StaticResource FlatButtonPath}"  Data="{StaticResource SkipEndFillIcon}"></Path>
                </Button>
            </StackPanel>
        </Grid>

    </Grid>
</UserControl>