unison/Views/MainWindow.xaml

<Window x:Class="unison.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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:emoji="clr-namespace:Emoji.Wpf;assembly=Emoji.Wpf"
        xmlns:properties="clr-namespace:unison.Resources"
        mc:Ignorable="d"
        Title="unison" Closing="Window_Closing" LocationChanged="Window_LocationChanged" Icon="/Resources/icon-full.ico" ResizeMode="CanMinimize" SizeToContent="WidthAndHeight">

    <Window.Resources>
        <Style TargetType="Border" x:Key="UnselectedButton">
            <Setter Property="BorderThickness" Value="0, 0, 0, 0"/>
        </Style>
        <Style TargetType="Border" x:Key="SelectedButton">
            <Setter Property="BorderThickness" Value="0, 0, 0, 2"/>
        </Style>
    </Window.Resources>

    <Grid Background="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}" MinHeight="270" MinWidth="700">
        <Grid x:Name="TopLayout" Margin="10,0,10,0" VerticalAlignment="Stretch" Width="Auto" Height="Auto">
            <Grid x:Name="Display" HorizontalAlignment="Stretch" VerticalAlignment="Top" Margin="225,0,0,0" Height="Auto" Width="Auto">
                <GroupBox Height="220" VerticalAlignment="Center">
                    <GroupBox.Header>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="🎶"/>
                        </StackPanel>
                    </GroupBox.Header>
                    <Grid>
                        <Grid x:Name="CurrentSong" Margin="10,0,10,0" VerticalAlignment="Top" MinHeight="80">
                            <StackPanel Orientation="Vertical" VerticalAlignment="Center" MouseDown="MouseDownClipboard">
                                <TextBlock x:Name="SongTitle" TextWrapping="Wrap" TextAlignment="Center" FontWeight="Normal" FontSize="20" Text="Title"/>
                                <TextBlock x:Name="SongArtist" TextWrapping="Wrap" TextAlignment="Center" FontWeight="Bold" FontSize="18"  Text="Artist"/>
                                <TextBlock x:Name="SongAlbum" TextWrapping="Wrap" TextAlignment="Center" FontWeight="Normal" FontSize="16"  Text="Album"/>
                                <TextBlock x:Name="SongInfo" TextWrapping="Wrap" TextAlignment="Center" FontWeight="Normal" Foreground="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" Margin="0,2,0,0">
                                    <Run x:Name="SongGenre"/>
                                    <Run x:Name="SongInfoDash"> – </Run>
                                    <Run x:Name="SongFormat"/>
                                </TextBlock>
                            </StackPanel>
                        </Grid>
                        <Grid x:Name="Controls" VerticalAlignment="Top" Margin="10,95,10,0">
                            <StackPanel HorizontalAlignment="Stretch" Orientation="Vertical" VerticalAlignment="Top">
                                <Grid HorizontalAlignment="Center" VerticalAlignment="Top">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock x:Name="CurrentTime" Text="0:00" TextWrapping="Wrap" HorizontalAlignment="Left"/>
                                        <Slider Style="{DynamicResource SliderTime}" x:Name="TimeSlider" MinWidth="320" Margin="5,0,5,0" HorizontalAlignment="Center" Maximum="100" PreviewMouseUp="TimeSlider_DragCompleted" Thumb.DragStarted="TimeSlider_DragStarted" FocusVisualStyle="{x:Null}"/>
                                        <TextBlock x:Name="EndTime" Text="0:00" TextWrapping="Wrap" Height="18" HorizontalAlignment="Right"/>
                                    </StackPanel>
                                </Grid>
                                <!-- https://docs.microsoft.com/en-us/windows/apps/design/style/segoe-ui-symbol-font -->
                                <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,8,0,0">
                                    <Button x:Name="PreviousTrack" Click="Previous_Clicked" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Left" FocusVisualStyle="{x:Null}">
                                        <TextBlock FontSize="25" FontFamily="Segoe MDL2 Assets" Text="&#xeb9e;"/>
                                    </Button>
                                    <Button x:Name="PauseButton" Click="Pause_Clicked" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,0,10,0" FocusVisualStyle="{x:Null}">
                                        <TextBlock x:Name="PlayPause" FontSize="25" FontFamily="Segoe MDL2 Assets" Text="&#xedb5;"/>
                                    </Button>
                                    <Button x:Name="NextTrack" Click="Next_Clicked" FontSize="18" Background="{x:Null}" BorderBrush="{x:Null}" HorizontalAlignment="Right" FocusVisualStyle="{x:Null}">
                                        <TextBlock FontSize="25" FontFamily="Segoe MDL2 Assets" Text="&#xeb9d;"/>
                                    </Button>
                                </StackPanel>
                                <Grid VerticalAlignment="Stretch" Margin="0,18,0,0">
                                    <StackPanel Orientation="Horizontal" VerticalAlignment="Top" HorizontalAlignment="Center" Margin="10,2,10,0">
                                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xe992;" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" FontSize="16"/>
                                        <Slider x:Name="VolumeSlider" Maximum="100" Value="50" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" MinWidth="180" FlowDirection="LeftToRight" PreviewMouseUp="VolumeSlider_DragCompleted" FocusVisualStyle="{x:Null}"/>
                                        <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xe995;" TextWrapping="Wrap" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="7.5,0,0,0" FontSize="16"/>
                                    </StackPanel>
                                    <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Bottom" MinHeight="27">
                                        <Border x:Name="BorderRandom" Style="{StaticResource UnselectedButton}" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Top" SnapsToDevicePixels="True">
                                            <Button x:Name="Random" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" Background="{x:Null}" BorderBrush="{x:Null}" Click="Random_Clicked" FocusVisualStyle="{x:Null}">
                                                <TextBlock FontSize="18" FontFamily="Segoe MDL2 Assets" Text="&#xe8b1;" Margin="0" Padding="0, 0, 0, 2"/>
                                            </Button>
                                        </Border>
                                        <Border x:Name="BorderRepeat" Style="{StaticResource UnselectedButton}" BorderBrush="Black" VerticalAlignment="Top" Margin="10,0,0,0">
                                            <Button x:Name="Repeat" Background="{x:Null}" FontSize="18" BorderBrush="{x:Null}" Click="Repeat_Clicked" FocusVisualStyle="{x:Null}">
                                                <TextBlock FontSize="18" FontFamily="Segoe MDL2 Assets" Text="&#xe8ee;" Padding="0, 0, 0, 2"/>
                                            </Button>
                                        </Border>
                                    </StackPanel>
                                    <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Bottom" MinHeight="27">
                                        <Border  x:Name="BorderSingle" Style="{StaticResource UnselectedButton}" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Top" SnapsToDevicePixels="True" Margin="0,0,10,0">
                                            <Button x:Name="Single" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" BorderBrush="{x:Null}" Background="{x:Null}" Click="Single_Clicked" FocusVisualStyle="{x:Null}">
                                                <TextBlock FontSize="18" FontFamily="Segoe MDL2 Assets" Text="&#xe8ed;" Margin="0" Padding="0, 0, 0, 2"/>
                                            </Button>
                                        </Border>
                                        <Border x:Name="BorderConsume" Style="{StaticResource UnselectedButton}" BorderBrush="Black" HorizontalAlignment="Stretch" VerticalAlignment="Top" SnapsToDevicePixels="True">
                                            <Button x:Name="Consume" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" BorderBrush="{x:Null}" Background="{x:Null}" Click="Consume_Clicked" FocusVisualStyle="{x:Null}">
                                                <TextBlock FontSize="18" FontFamily="Segoe MDL2 Assets" Text="&#xe75c;" Margin="0" Padding="0, 0, 0, 2"/>
                                            </Button>
                                        </Border>
                                    </StackPanel>
                                </Grid>
                            </StackPanel>
                        </Grid>
                    </Grid>
                </GroupBox>
            </Grid>
            <Border x:Name="Cover_Border" Padding="2" HorizontalAlignment="Left" VerticalAlignment="Top" MinWidth="219" MinHeight="219" MaxWidth="219" MaxHeight="219" BorderThickness="1" BorderBrush="#FFD5DFE5" CornerRadius="4">
                <Grid>
                    <Border Name="mask" Background="White" CornerRadius="3"/>
                    <StackPanel>
                        <StackPanel.OpacityMask>
                            <VisualBrush Visual="{Binding ElementName=mask}"/>
                        </StackPanel.OpacityMask>
                        <Image x:Name="Cover" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Resources/nocover.png" Visibility="Collapsed" />
                        <Image x:Name="NoCover" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Resources/nocover.png" Visibility="Collapsed" />
                        <Image x:Name="RadioCover" HorizontalAlignment="Center" VerticalAlignment="Center" Source="/Resources/radio.png" Visibility="Collapsed" />
                    </StackPanel>
                </Grid>
            </Border>
        </Grid>
        <Grid x:Name="BottomLayout" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Background="{DynamicResource {x:Static SystemColors.ControlLightBrushKey}}" Width="Auto" MinHeight="40">
            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Center" Margin="10,0,0,0">
                <Button x:Name="Shuffle" Padding="5, 2" Click="Shuffle_Clicked" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" FocusVisualStyle="{x:Null}" Margin="0,0,10,0">
                    <StackPanel Orientation="Horizontal">
                        <emoji:TextBlock Text="🔁" Padding="0,0,0,2"/>
                        <TextBlock Text="{x:Static properties:Resources.Shuffle}" Margin="5, 0, 0, 0"/>
                    </StackPanel>
                </Button>

                <Button x:Name="Radio" Padding="5, 2" HorizontalAlignment="Left" Click="Radios_Clicked" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" FocusVisualStyle="{x:Null}" IsEnabled="False">
                    <StackPanel Orientation="Horizontal">
                        <emoji:TextBlock Text="📻" Padding="0,0,0,2"/>
                        <TextBlock Text="{x:Static properties:Resources.Radios}" Margin="5, 0, 0, 0"/>
                    </StackPanel>
                </Button>
            </StackPanel>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Grid x:Name="ConnectionOkIcon" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xf385;" Foreground="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xf386;" Foreground="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Grid>
                <Grid x:Name="ConnectionFailIcon" HorizontalAlignment="Center" VerticalAlignment="Center">
                    <TextBlock FontFamily="Segoe MDL2 Assets" Text="&#xf384;" Foreground="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" VerticalAlignment="Center" HorizontalAlignment="Center" />
                </Grid>
                <TextBlock x:Name="Connection" HorizontalAlignment="Center" Text="Not connected" TextWrapping="Wrap" VerticalAlignment="Top" TextAlignment="Center" Foreground="{DynamicResource {x:Static SystemColors.ControlDarkDarkBrushKey}}" Margin="5,0,0,0" />
            </StackPanel>
            <StackPanel HorizontalAlignment="Right" Orientation="Horizontal" VerticalAlignment="Center" Margin="0,0,10,0">
                <Button x:Name="Snapcast" HorizontalAlignment="Left" VerticalAlignment="Center" Click="Snapcast_Clicked" Margin="0,0,10,0" Padding="5, 2" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" FocusVisualStyle="{x:Null}" IsEnabled="False">
                    <StackPanel Orientation="Horizontal">
                        <emoji:TextBlock Text="🔊" Padding="0,0,0,2"/>
                        <TextBlock x:Name="SnapcastText" Text="{x:Static properties:Resources.StartSnapcast}" Margin="5, 0, 0, 0"/>
                    </StackPanel>
                </Button>

                <Button x:Name="Settings" Padding="5, 2" Click="Settings_Clicked" Background="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" FocusVisualStyle="{x:Null}">
                    <StackPanel Orientation="Horizontal">
                        <emoji:TextBlock Text="🛠️"  Padding="0,0,0,2"/>
                        <TextBlock Text="{x:Static properties:Resources.Settings}" Margin="5, 0, 0, 0"/>
                    </StackPanel>
                </Button>
            </StackPanel>
        </Grid>
    </Grid>
</Window>