playnite-plugin/DownloadQueue/DownloadQueueView.xaml

<UserControl x:Class="RomM.DownloadQueue.DownloadQueueView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:RomM"
             xmlns:scm="clr-namespace:System.ComponentModel;assembly=WindowsBase"
             xmlns:Models="clr-namespace:LANCommander.PlaynitePlugin.Models"
             xmlns:Converters="clr-namespace:LANCommander.PlaynitePlugin.Converters"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800" d:DataContext="{d:DesignInstance Type=local:DownloadQueueController, IsDesignTimeCreatable=True}">
    <UserControl.Resources>
        <Converters:NullVisibilityConverter x:Key="NullToVisibilityConverter" />
        <Converters:IEnumerableVisibilityConverter x:Key="IEnumerableVisibilityConverter" />
        <Converters:IEnumerableEmptyVisibilityConverter x:Key="IEnumerableEmptyVisibilityConverter" />
        <Converters:RelativeDateConverter x:Key="RelativeDateConverter" />
        <Converters:ByteSizeConverter x:Key="ByteSizeConverter" />
    </UserControl.Resources>
    <DockPanel VerticalAlignment="Top">
        <StackPanel Orientation="Horizontal" Margin="10,10,0,0" DockPanel.Dock="Top">
            <TextBlock VerticalAlignment="Center" WindowChrome.IsHitTestVisibleInChrome="True">
                <Hyperlink Click="BackToLibrary">
                    <TextBlock Text="&#xea5c;" FontFamily="{DynamicResource FontIcoFont}" FontSize="26" />
                </Hyperlink>
            </TextBlock>
            <TextBlock Text="{DynamicResource LOCLANCommanderDownloadQueueTitle}" VerticalAlignment="Center" Style="{StaticResource BaseTextBlockStyle}" Margin="10,0,0,0" FontSize="18" />
        </StackPanel>

        <DockPanel Margin="20,0,20,0">
            <ItemsControl BorderThickness="0" Margin="10" DockPanel.Dock="Top" Visibility="{Binding DownloadQueue.CurrentItem, Converter={StaticResource NullToVisibilityConverter}}">
                <Grid Name="CurrentItemGrid" Grid.Row="0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="48" />
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="{Binding DownloadQueue.CurrentItem.CoverPath}" Height="100" />
                    <Grid Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="1*" />
                            <ColumnDefinition Width="1*" />
                        </Grid.ColumnDefinitions>

                        <StackPanel Orientation="Vertical" Grid.Column="0" VerticalAlignment="Center">
                            <TextBlock Text="{Binding DownloadQueue.CurrentItem.Title}" FontSize="20" Style="{StaticResource BaseTextBlockStyle}" />
                            <TextBlock Text="{Binding DownloadQueue.CurrentItem.Version}" Margin="0,6,0,0" FontSize="14" Style="{StaticResource BaseTextBlockStyle}" />
                        </StackPanel>

                        <Grid Grid.Column="1" Width="400" VerticalAlignment="Center" HorizontalAlignment="Right">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="1*" />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>

                            <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding DownloadQueue.CurrentItem.StatusText}" HorizontalAlignment="Left" Style="{StaticResource BaseTextBlockStyle}" />
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding DownloadQueue.CurrentItem.TimeRemaining}" HorizontalAlignment="Right">
                                <TextBlock.Style>
                                    <Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=DownloadQueue.CurrentItem.Speed}" Value="0">
                                                <Setter Property="Visibility" Value="Collapsed" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>

                            <ProgressBar
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="2"
                                Minimum="0"
                                Maximum="{Binding DownloadQueue.CurrentItem.Size}"
                                Value="{Binding DownloadQueue.CurrentItem.TotalDownloaded}"
                                IsIndeterminate="{Binding DownloadQueue.CurrentItem.ProgressIndeterminate}"
                                Height="16"
                                Margin="0,10,0,10" />

                            <TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding DownloadQueue.CurrentItem.SpeedText}">
                                <TextBlock.Style>
                                    <Style TargetType="TextBlock" BasedOn="{StaticResource BaseTextBlockStyle}">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=DownloadQueue.CurrentItem.Speed}" Value="0">
                                                <Setter Property="Visibility" Value="Collapsed" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </TextBlock.Style>
                            </TextBlock>
                            <StackPanel Grid.Row="2" Grid.Column="1" Orientation="Horizontal" HorizontalAlignment="Right">
                                <StackPanel.Style>
                                    <Style TargetType="StackPanel">
                                        <Style.Triggers>
                                            <DataTrigger Binding="{Binding Path=DownloadQueue.CurrentItem.Size}" Value="0">
                                                <Setter Property="Visibility" Value="Collapsed" />
                                            </DataTrigger>
                                        </Style.Triggers>
                                    </Style>
                                </StackPanel.Style>
                                <TextBlock Text="{Binding DownloadQueue.CurrentItem.TotalDownloaded, Converter={StaticResource ByteSizeConverter}}" Style="{StaticResource BaseTextBlockStyle}" />
                                <TextBlock Text="/" Style="{StaticResource BaseTextBlockStyle}" />
                                <TextBlock Text="{Binding DownloadQueue.CurrentItem.Size, Converter={StaticResource ByteSizeConverter}}" Style="{StaticResource BaseTextBlockStyle}" />
                            </StackPanel>
                        </Grid>
                    </Grid>

                    <TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
                        <Hyperlink Click="CancelDownload">
                            <TextBlock Text="&#xec4f;" FontFamily="{DynamicResource FontIcoFont}" FontSize="16" ToolTip="{DynamicResource LOCLANCommanderDownloadQueueCancelDownloadTooltip}" />
                        </Hyperlink>
                    </TextBlock>
                </Grid>
            </ItemsControl>

            <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
                <StackPanel Orientation="Vertical">
                    <Border BorderThickness="0,0,0,2" BorderBrush="{DynamicResource PopupBorderBrush}">
                        <TextBlock Text="{DynamicResource LOCLANCommanderDownloadQueueUpNextTitle}" FontSize="24" Style="{StaticResource BaseTextBlockStyle}" Margin="0,10,0,10" />
                    </Border>

                    <TextBlock Text="{DynamicResource LOCLANCommanderDownloadQueueEmptyMessage}" FontSize="16" Style="{StaticResource BaseTextBlockStyle}" Visibility="{Binding DownloadQueue.Items, Converter={StaticResource IEnumerableEmptyVisibilityConverter}}" Margin="8,16,0,32" />

                    <ItemsControl Name="DownloadQueueItemList" ItemsSource="{Binding DownloadQueue.Items}" Visibility="{Binding DownloadQueue.Items, Converter={StaticResource IEnumerableVisibilityConverter}}" BorderThickness="0" Margin="10,10,10,0">
                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="0,0,0,20">
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="100" />
                                        <ColumnDefinition Width="*" />
                                        <ColumnDefinition Width="40" />
                                    </Grid.ColumnDefinitions>
                                    <Image Grid.Column="0" Source="{Binding CoverPath}" Height="100" />
                                    <Grid Grid.Column="1">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="1*" />
                                            <ColumnDefinition Width="1*" />
                                        </Grid.ColumnDefinitions>

                                        <StackPanel Orientation="Vertical" Grid.Column="0" VerticalAlignment="Center">
                                            <TextBlock Text="{Binding Title}" FontSize="20" Style="{StaticResource BaseTextBlockStyle}" />
                                            <TextBlock Text="{Binding Version}" Margin="0,6,0,0" FontSize="14" Style="{StaticResource BaseTextBlockStyle}" />
                                        </StackPanel>
                                    </Grid>
                                    <TextBlock Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Right">
                                        <Hyperlink Click="RemoveItem">
                                            <TextBlock Text="&#xec4f;" FontFamily="{DynamicResource FontIcoFont}" FontSize="16" ToolTip="{DynamicResource LOCLANCommanderDownloadQueueRemoveItemTooltip}" />
                                        </Hyperlink>
                                    </TextBlock>
                                </Grid>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>

                    <StackPanel Name="DownloadQueueCompletedSection" Orientation="Vertical">
                        <StackPanel.Style>
                            <Style TargetType="StackPanel">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding Path=DownloadQueue.Completed.Count}" Value="0">
                                        <Setter Property="Visibility" Value="Collapsed" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </StackPanel.Style>

                        <StackPanel.Resources>
                            <CollectionViewSource x:Key="CompletedItems" Source="{Binding DownloadQueue.Completed}">
                                <CollectionViewSource.SortDescriptions>
                                    <scm:SortDescription PropertyName="CompletedOn" Direction="Descending" />
                                </CollectionViewSource.SortDescriptions>
                            </CollectionViewSource>
                        </StackPanel.Resources>

                        <Border BorderThickness="0,0,0,2" BorderBrush="{DynamicResource PopupBorderBrush}">
                            <TextBlock Text="{DynamicResource LOCLANCommanderDownloadQueueCompletedTitle}" FontSize="24" Style="{StaticResource BaseTextBlockStyle}" Margin="0,0,0,10" />
                        </Border>

                        <ItemsControl Name="DownloadQueueCompletedList" ItemsSource="{Binding Source={StaticResource CompletedItems}}" BorderThickness="0" Margin="10,10,10,0" >
                            <ItemsControl.ItemTemplate>
                                <DataTemplate>
                                    <Grid Margin="0,0,0,20">
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="100" />
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="32" />
                                        </Grid.ColumnDefinitions>
                                        <Image Grid.Column="0" Source="{Binding CoverPath}" Height="100" />
                                        <Grid Grid.Column="1">
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="1*" />
                                                <ColumnDefinition Width="1*" />
                                            </Grid.ColumnDefinitions>

                                            <StackPanel Orientation="Vertical" Grid.Column="0" VerticalAlignment="Center">
                                                <TextBlock Text="{Binding Title}" FontSize="20" Style="{StaticResource BaseTextBlockStyle}" />
                                                <TextBlock Text="{Binding Version}" Margin="0,6,0,0" FontSize="14" Style="{StaticResource BaseTextBlockStyle}" />
                                                <TextBlock Text="{Binding Size, Converter={StaticResource ByteSizeConverter}}" Margin="0,4,0,0" FontSize="14" Style="{StaticResource BaseTextBlockStyle}" />
                                            </StackPanel>
                                            <StackPanel Orientation="Horizontal" Grid.Column="1" HorizontalAlignment="Right">
                                                <TextBlock Text="{Binding CompletedOn, Converter={StaticResource RelativeDateConverter}, StringFormat='Completed: \{0\}'}" Style="{StaticResource BaseTextBlockStyle}" VerticalAlignment="Center" Margin="0,0,32,0" />
                                                <Button Width="150" Height="40" Style="{DynamicResource PlayButton}" Content="{DynamicResource LOCLANCommanderDownloadQueueCompletedPlayButtonTooltip}" VerticalAlignment="Center" Click="Play" />
                                                <Button Width="40" Height="40" Content="&#xef65;" FontFamily="{DynamicResource FontIcoFont}" VerticalAlignment="Center" Margin="10,0,0,0" ToolTip="{DynamicResource LOCLANCommanderDownloadQueueCompletedLibraryButtonTooltip}" Click="ViewInLibrary" />
                                            </StackPanel>
                                        </Grid>
                                    </Grid>
                                </DataTemplate>
                            </ItemsControl.ItemTemplate>
                        </ItemsControl>
                    </StackPanel>

                </StackPanel>
            </ScrollViewer>
        </DockPanel>
    </DockPanel>
</UserControl>