Eco/VideoBrowser/Views/DownloadQueueView.xaml

<UserControl
    x:Class="VideoBrowser.Views.DownloadQueueView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    xmlns:converters="clr-namespace:VideoBrowser.Controls.CefSharpBrowser.Converters"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:viewmodels="clr-namespace:VideoBrowser.ViewModels"
    d:DataContext="{d:DesignInstance viewmodels:DownloadQueueViewModel}"
    d:DesignHeight="450"
    d:DesignWidth="800"
    mc:Ignorable="d">
    <UserControl.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="../Resources/IconsResource.xaml" />
            </ResourceDictionary.MergedDictionaries>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Label
            Grid.Row="0"
            Height="50"
            Padding="16,5,5,5"
            VerticalContentAlignment="Center"
            Background="RoyalBlue"
            Content="Downloads"
            FontSize="16"
            FontWeight="SemiBold"
            Foreground="White" />
        <ListBox
            Grid.Row="1"
            ItemsSource="{Binding OperationCollectionView}"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel Background="WhiteSmoke" />
                </ItemsPanelTemplate>
            </ListBox.ItemsPanel>
            <ListBox.ItemContainerStyle>
                <Style BasedOn="{StaticResource {x:Type ListBoxItem}}" TargetType="ListBoxItem">
                    <Setter Property="Width" Value="600" />
                    <Setter Property="Margin" Value="8" />
                    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Border
                            BorderBrush="Black"
                            BorderThickness="1"
                            Opacity="0.7">
                            <Border.Effect>
                                <DropShadowEffect BlurRadius="10" ShadowDepth="3" />
                            </Border.Effect>
                        </Border>
                        <Grid x:Name="OperationModelGrid" Background="White">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition />
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition />
                                <RowDefinition Height="Auto" />
                            </Grid.RowDefinitions>
                            <Grid Grid.Row="0" Grid.Column="0">
                                <Image Source="{Binding Thumbnail, Converter={x:Static converters:StringToImageConverter.Instance}}" Stretch="Uniform">
                                    <Image.Style>
                                        <Style TargetType="Image">
                                            <Setter Property="Margin" Value="0" />
                                            <Setter Property="Width" Value="150" />
                                            <Style.Triggers>
                                                <DataTrigger Binding="{Binding IsApplicationThumbnail}" Value="True">
                                                    <Setter Property="Margin" Value="24" />
                                                    <Setter Property="Width" Value="32" />
                                                </DataTrigger>
                                            </Style.Triggers>
                                        </Style>
                                    </Image.Style>
                                </Image>
                            </Grid>
                            <StackPanel
                                Grid.Row="0"
                                Grid.Column="1"
                                Margin="4">
                                <TextBlock
                                    FontSize="14"
                                    FontWeight="Bold"
                                    Foreground="RoyalBlue"
                                    Text="{Binding Title}"
                                    ToolTip="{Binding Title}" />
                                <TextBlock Foreground="Gray" Text="{Binding Url}" />
                                <TextBlock Foreground="Gray" Text="{Binding FileSize}" />
                                <TextBlock Foreground="Gray" Text="{Binding Status}" />
                                <StackPanel
                                    Margin="0,8,0,0"
                                    Orientation="Horizontal"
                                    Visibility="{Binding IsQueuedControlsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <Button
                                        Width="50"
                                        Command="{Binding PauseDownloadCommand}"
                                        Content="{Binding PauseText}"
                                        ToolTip="Pause or resume download" />
                                    <Button
                                        Width="50"
                                        Margin="8,0,0,0"
                                        Command="{Binding CancelDownloadCommand}"
                                        Content="Cancel"
                                        ToolTip="Cancel downloading this file" />
                                </StackPanel>
                                <StackPanel
                                    Margin="0,8,0,0"
                                    Orientation="Horizontal"
                                    Visibility="{Binding IsCompletedControlsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
                                    <StackPanel.Resources>
                                        <Style BasedOn="{StaticResource {x:Static ToolBar.ButtonStyleKey}}" TargetType="Button">
                                            <Setter Property="BorderThickness" Value="0" />
                                            <Setter Property="Margin" Value="2" />
                                        </Style>
                                    </StackPanel.Resources>
                                    <Button Command="{Binding ShowDownloadedFolderCommand}" ToolTip="Open folder of this file">
                                        <Path Style="{StaticResource VideoFolder}" />
                                    </Button>
                                    <Button
                                        Margin="8,0,0,0"
                                        Command="{Binding ExecuteDownloadedCommand}"
                                        ToolTip="Open this file with associated application"
                                        Visibility="{Binding IsCompletedControlsVisible, Converter={StaticResource BooleanToVisibilityConverter}}">
                                        <Path Style="{StaticResource Play}" />
                                    </Button>
                                </StackPanel>
                            </StackPanel>
                            <Grid
                                Grid.Row="1"
                                Grid.Column="0"
                                Grid.ColumnSpan="2"
                                Background="AliceBlue">
                                <Controls:MetroProgressBar
                                    Maximum="100"
                                    Minimum="0"
                                    Value="{Binding Progress, Mode=OneWay}" />
                            </Grid>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</UserControl>