harmonia/Harmonia.UI/Views/PlaybackBar.axaml

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:vm="clr-namespace:Harmonia.UI.ViewModels"
			 xmlns:converter="clr-namespace:Harmonia.UI.Converters"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
			 DataContext="{x:Static vm:ViewModelLocator.PlaybackBarViewModel}"
             x:Class="Harmonia.UI.Views.PlaybackBar"
             x:DataType="vm:PlaybackBarViewModel">
	<UserControl.Resources>
		<converter:SecondsToStringConverter x:Key="SecondsToString" />
		<converter:ArtistsToStringConverter x:Key="ArtistsToString" />
		<converter:NullVisibilityConverter x:Key="NullVisibility" />
		<converter:SongTitleConverter x:Key="SongTitle" />
	</UserControl.Resources>
	<UserControl.Styles>
		<!-- Flat Button -->
		<Style Selector="Button.Flat">
			<Setter Property="Padding" Value="10"/>
			<Setter Property="Margin" Value="8 0 8 0"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="0"/>
		</Style>

		<!-- Flat Button ViewBox -->
		<!--<Style Selector="Viewbox.FlatButtonViewbox">
			<Setter Property="Width" Value="18"/>
			<Setter Property="Height" Value="18"/>
		</Style>-->

		<!-- Flat Button Path Icon -->
		<Style Selector="PathIcon.FlatButtonIcon">
			<Setter Property="Padding" Value="10"/>
			<Setter Property="Width" Value="18"/>
			<Setter Property="Height" Value="18"/>
			<Setter Property="Foreground" Value="White"/>
		</Style>

		<!-- Flat Button Path Icon (Large) -->
		<Style Selector="PathIcon.FlatButtonIcon.Medium">
			<Setter Property="Width" Value="24"/>
			<Setter Property="Height" Value="24"/>
		</Style>

		<!-- Flat Button Path Icon (Large) -->
		<Style Selector="PathIcon.FlatButtonIcon.Large">
			<Setter Property="Width" Value="36"/>
			<Setter Property="Height" Value="36"/>
		</Style>
	</UserControl.Styles>
	<Border Background="#1a1a1a" Padding="10">
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition></ColumnDefinition>
				<ColumnDefinition></ColumnDefinition>
				<ColumnDefinition></ColumnDefinition>
			</Grid.ColumnDefinitions>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"></RowDefinition>
				<RowDefinition></RowDefinition>
			</Grid.RowDefinitions>

			<!-- 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>
				<TextBlock Grid.Column="0" Foreground="#aaaaaa" Text="{Binding Position, Converter={StaticResource SecondsToString}}" FontSize="13" Margin="0 0 6 0" VerticalAlignment="Center"></TextBlock>
				<Slider Name="TrackSlider" Loaded="Slider_Loaded" Grid.Column="1" Value="{Binding CurrentPosition, Mode=TwoWay, UpdateSourceTrigger=Explicit}" Minimum="0" Maximum="{Binding MaxPosition, Mode=OneWay}" VerticalAlignment="Center" />
				<TextBlock Grid.Column="2" Foreground="#aaaaaa" Text="{Binding MaxPosition, Converter={StaticResource SecondsToString}}" FontSize="13" Margin="6 0 0 0" VerticalAlignment="Center"></TextBlock>
			</Grid>

			<!-- Song Info -->
			<Grid Grid.Row="1" Grid.Column="0" Name="PlayingSongGrid">
				<StackPanel Orientation="Horizontal">
					<Grid Margin="0 0 10 0">
						<!--<Image Name="PlayingSongImage" Width="80" Height="80"></Image>-->
						<Image Source="{Binding SongImageSource, Mode=TwoWay}" Width="80" Height="80"></Image>
						<Canvas Background="#19000000"></Canvas>
					</Grid>
					<StackPanel VerticalAlignment="Center">
						<TextBlock Foreground="#dddddd" FontWeight="SemiBold" FontSize="16" LineHeight="20" Text="{Binding Song, Converter={StaticResource SongTitle}}"></TextBlock>
						<TextBlock Foreground="#aaaaaa" FontSize="14" LineHeight="20" Text="{Binding Song.Artists, Converter={StaticResource ArtistsToString}}"></TextBlock>
						<TextBlock Foreground="#aaaaaa" FontSize="14" LineHeight="20" Text="{Binding Song.Album}"></TextBlock>
						<TextBlock Foreground="#777" FontSize="12" Text="{Binding FormattedSongInfo}" IsVisible="{Binding Song, Converter={StaticResource NullVisibility}}" FontWeight="Normal" Opacity="1.0">
						</TextBlock>
					</StackPanel>
				</StackPanel>
			</Grid>

			<!-- Playback Buttons -->
			<Grid Grid.Row="1" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Center">
				<StackPanel Orientation="Horizontal">
					<Button Classes="Flat" Command="{Binding PreviousSongCommand}">
						<PathIcon Classes="FlatButtonIcon" Data="{StaticResource SemiIconBackward}"></PathIcon>
					</Button>
					<Button Classes="Flat" Command="{Binding StopSongCommand}">
						<PathIcon Classes="FlatButtonIcon" Data="{StaticResource SemiIconStop}"></PathIcon>
					</Button>
					<Button Classes="Flat" Command="{Binding PlaySongCommand}">
						<PathIcon Classes="FlatButtonIcon Large" Data="{StaticResource SemiIconPlay}"></PathIcon>
					</Button>
					<Button Classes="Flat" Command="{Binding PauseSongCommand}">
						<PathIcon Classes="FlatButtonIcon" Data="{StaticResource SemiIconPause}"></PathIcon>
					</Button>
					<Button Classes="Flat" Command="{Binding NextSongCommand}">
						<PathIcon Classes="FlatButtonIcon"  Data="{StaticResource SemiIconFastForward}"></PathIcon>
					</Button>
				</StackPanel>
			</Grid>

			<!-- Action Buttons -->
			<Grid Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
				<StackPanel Orientation="Horizontal">
					<Button Classes="Flat" Command="{Binding ToggleMuteCommand}">
						<Grid>
							<!--<PathIcon Classes="FlatButtonIcon Medium" Data="{StaticResource VolumeHighIcon}"></PathIcon>-->
							<PathIcon Classes="FlatButtonIcon Medium" Data="{Binding VolumeState, Converter={StaticResource VolumeStateToIconConverter}}"></PathIcon>
						</Grid>
					</Button>
					<Slider Value="{Binding Volume, Mode=TwoWay}" Minimum="0" Maximum="1" PointerWheelChanged="VolumeSlider_PointerWheelChanged" Width="200" VerticalAlignment="Center" />
					<Button Classes="Flat" Command="{Binding ToggleRandomizerCommand}">
						<PathIcon Classes="FlatButtonIcon Medium" Classes.ShuffleOn="{Binding IsRandom}" Data="{StaticResource ShuffleIcon}">
							<PathIcon.Styles>
								<Style Selector="PathIcon.ShuffleOn">
									<Setter Property="Foreground" Value="#76b9ed"/>
								</Style>
							</PathIcon.Styles>
						</PathIcon>
					</Button>
					<Button Classes="Flat" Command="{Binding ToggleRepeatCommand}">
						<PathIcon Classes="FlatButtonIcon Medium" Data="{Binding RepeatState, Converter={StaticResource RepeatStateToIconConverter}}"></PathIcon>
					</Button>
					<Button Classes="Flat">
						<PathIcon Classes="FlatButtonIcon" Data="{StaticResource SemiIconSetting}"></PathIcon>
						<Button.Flyout>
							<Flyout Placement="Top">
								<StackPanel>
									<TextBlock Text="Density"></TextBlock>
									<RadioButton Content="Compact" Margin="10" HorizontalAlignment="Stretch" GroupName="Density" />
									<RadioButton Content="Comfortable" Margin="10" HorizontalAlignment="Stretch" GroupName="Density" />
									<RadioButton Content="Cozy" Margin="10" HorizontalAlignment="Stretch" GroupName="Density" />
								</StackPanel>
							</Flyout>
						</Button.Flyout>
					</Button>
				</StackPanel>
			</Grid>
		</Grid>
	</Border>
</UserControl>