QuickLook/QuickLook.Plugin/QuickLook.Plugin.VideoViewer/ViewerPanel.xaml

<UserControl x:Class="QuickLook.Plugin.VideoViewer.ViewerPanel"
             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:ffme="clr-namespace:Unosquare.FFME;assembly=ffme"
             xmlns:local="clr-namespace:QuickLook.Plugin.VideoViewer"
             xmlns:glassLayer="clr-namespace:QuickLook.Controls.GlassLayer;assembly=QuickLook"
             mc:Ignorable="d"
             x:Name="viewerPanel"
             d:DesignHeight="300" d:DesignWidth="500">
    <UserControl.Resources>
        <ResourceDictionary>
            <BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
            <local:TimeSpanToShortStringConverter x:Key="TimeSpanToShortStringConverter" />
            <local:TimeSpanToSecondsConverter x:Key="TimeSpanToSecondsConverter" />
            <local:VolumeToIconConverter x:Key="VolumeToIconConverter" />
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="Styles.xaml" />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </UserControl.Resources>
    <Grid>
        <ffme:MediaElement x:Name="mediaElement" Background="{DynamicResource MainWindowBackgroundNoTransparent}" />
        <Grid x:Name="coverArtPersenter" ClipToBounds="True"
              Background="{DynamicResource MainWindowBackgroundNoTransparent}">
            <Grid.Style>
                <Style TargetType="Grid">
                    <Setter Property="Visibility" Value="Collapsed" />
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ShowVideo, ElementName=viewerPanel}" Value="False">
                            <Setter Property="Visibility" Value="Visible" />
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Grid.Style>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="4*" />
                <ColumnDefinition Width="6*" />
            </Grid.ColumnDefinitions>
            <Rectangle Margin="-50" Grid.Column="0" Grid.ColumnSpan="2">
                <Rectangle.Effect>
                    <BlurEffect Radius="100" />
                </Rectangle.Effect>
                <Rectangle.Fill>
                    <ImageBrush ImageSource="{Binding ElementName=viewerPanel, Path=CoverArt}" Stretch="UniformToFill"
                                Opacity="0.9" />
                </Rectangle.Fill>
            </Rectangle>
            <Image Grid.Column="0" x:Name="imageCoverArt" Margin="20,40,20,40">
                <Image.Effect>
                    <DropShadowEffect Direction="0" BlurRadius="6" Color="#FF898989" ShadowDepth="0" />
                </Image.Effect>
                <Image.Style>
                    <Style TargetType="Image">
                        <Setter Property="Source" Value="{Binding CoverArt, ElementName=viewerPanel}" />
                        <Style.Triggers>
                            <DataTrigger
                                Binding="{Binding CoverArt, ElementName=viewerPanel, FallbackValue=0, TargetNullValue=0}"
                                Value="0">
                                <Setter Property="Source" Value="Resources/empty.png" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Image.Style>
            </Image>
            <Grid Grid.Column="1">
                <Grid.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="2" Opacity="0.7" Color="#B2FFFFFF" />
                </Grid.Effect>
                <Grid.RowDefinitions>
                    <RowDefinition Height="4*" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="15" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="6*" />
                </Grid.RowDefinitions>
                <TextBlock x:Name="metaTitle" Grid.Row="1" FontSize="22" Padding="3"
                           TextWrapping="Wrap"
                           LineHeight="28" MaxHeight="80" TextTrimming="CharacterEllipsis">
                    ときめきポポロン♪
                </TextBlock>
                <TextBlock x:Name="metaArtists" Grid.Row="3" FontSize="14" Padding="3" TextTrimming="CharacterEllipsis"
                           Foreground="{DynamicResource WindowTextForeground}">
                    チマメ隊
                </TextBlock>
                <TextBlock x:Name="metaAlbum" Grid.Row="4" FontSize="14" Padding="3" TextTrimming="CharacterEllipsis"
                           Foreground="{DynamicResource WindowTextForeground}">
                    ときめきポポロン♪
                </TextBlock>
                <TextBlock x:Name="metaLength" Grid.Row="5" FontSize="14" Padding="3" TextTrimming="CharacterEllipsis"
                           Foreground="{DynamicResource WindowTextForeground}"
                           Text="{Binding ElementName=mediaElement, Path=NaturalDuration, Converter={StaticResource TimeSpanToShortStringConverter}}" />
            </Grid>
        </Grid>

        <Grid x:Name="videoControlContainer" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Height="32">
            <Grid.Resources>
                <Storyboard x:Key="ShowControlStoryboard" Completed="AutoHideViedoControlContainer">
                    <DoubleAnimation
                        Storyboard.Target="{Binding Source={x:Reference videoControlContainer}}"
                        Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.05" />
                </Storyboard>
                <Storyboard x:Key="HideControlStoryboard">
                    <DoubleAnimationUsingKeyFrames
                        Storyboard.Target="{Binding Source={x:Reference videoControlContainer}}"
                        Storyboard.TargetProperty="Opacity">
                        <DoubleAnimationUsingKeyFrames.KeyFrames>
                            <LinearDoubleKeyFrame Value="1" KeyTime="0:0:0" />
                            <LinearDoubleKeyFrame Value="1" KeyTime="0:0:1" />
                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:1.05" />
                        </DoubleAnimationUsingKeyFrames.KeyFrames>
                    </DoubleAnimationUsingKeyFrames>
                </Storyboard>
            </Grid.Resources>
            <glassLayer:GlassLayer OverlayColor="{DynamicResource CaptionBackground}"
                                   GlassVisibility="{Binding ElementName=viewerPanel, Path=ShowVideo,Converter={StaticResource BooleanToVisibilityConverter}}"
                                   ColorOverlayVisibility="{Binding ElementName=viewerPanel, Path=ShowVideo,Converter={StaticResource BooleanToVisibilityConverter}}">
                <glassLayer:GlassLayer.Style>
                    <Style TargetType="glassLayer:GlassLayer">
                        <Setter Property="BlurredElement" Value="{Binding ElementName=mediaElement}" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=viewerPanel,Path=ShowVideo}" Value="True">
                                <Setter Property="BlurredElement" Value="{Binding ElementName=mediaElement}" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </glassLayer:GlassLayer.Style>
            </glassLayer:GlassLayer>
            <DockPanel>
                <Button x:Name="buttonPlayPause" DockPanel.Dock="Left">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource ControlButtonStyle}">
                            <Setter Property="Content" Value="&#xE769;" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsPlaying, ElementName=mediaElement}"
                                             Value="False">
                                    <Setter Property="Content" Value="&#xE768;" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
                <Button x:Name="buttonMute" DockPanel.Dock="Right">
                    <Button.Style>
                        <Style TargetType="Button" BasedOn="{StaticResource ControlButtonStyle}">
                            <Setter Property="Content"
                                    Value="{Binding ElementName=mediaElement, Path=Volume, Converter={StaticResource VolumeToIconConverter}}" />
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding IsMuted, ElementName=mediaElement}"
                                             Value="True">
                                    <Setter Property="Content" Value="&#xE74F;" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
                <Button x:Name="buttonTime" Width="37" Style="{StaticResource ControlButtonStyle}"
                        DockPanel.Dock="Right" Tag="Time">
                    <TextBlock VerticalAlignment="Center" FontSize="11"
                               FontFamily="{Binding ElementName=viewerPanel, Path=FontFamily}"
                               Foreground="{DynamicResource CaptionButtonIconForeground}">
                        <TextBlock.Style>
                            <Style TargetType="TextBlock">
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding ElementName=buttonTime, Path=Tag}" Value="Time">
                                        <Setter Property="Text"
                                                Value="{Binding ElementName=mediaElement, Path=Position, Converter={StaticResource TimeSpanToShortStringConverter}}" />
                                    </DataTrigger>
                                    <DataTrigger Binding="{Binding ElementName=buttonTime, Path=Tag}" Value="Length">
                                        <Setter Property="Text"
                                                Value="{Binding ElementName=mediaElement, Path=NaturalDuration, Converter={StaticResource TimeSpanToShortStringConverter}}" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </TextBlock.Style>
                    </TextBlock>
                </Button>
                <Slider x:Name="sliderProgress" Style="{StaticResource PositionSliderStyle}"
                        SmallChange="{Binding FrameStepDuration, ElementName=mediaElement, Converter={StaticResource TimeSpanToSecondsConverter}}"
                        LargeChange="{Binding FrameStepDuration, ElementName=mediaElement, Converter={StaticResource TimeSpanToSecondsConverter}}"
                        Maximum="{Binding NaturalDuration, ElementName=mediaElement, Converter={StaticResource TimeSpanToSecondsConverter}}"
                        Value="{Binding Position, ElementName=mediaElement, Converter={StaticResource TimeSpanToSecondsConverter}}" />
            </DockPanel>
        </Grid>
        <Grid x:Name="volumeSliderLayer" Background="Transparent" Visibility="Collapsed">
            <Grid Height="32" Width="130" HorizontalAlignment="Right" VerticalAlignment="Bottom"
                  Background="{DynamicResource CaptionButtonHoverBackground}" Margin="0,0,0,32">
                <Slider Style="{StaticResource CustomSliderStyle}" Width="110" Maximum="1"
                        Value="{Binding ElementName=mediaElement, Path=Volume}" />
            </Grid>
        </Grid>
    </Grid>
</UserControl>