Refine basic design (#44)

* Refine basic design * Update generic / video preview UI * Update audio preview UI * Update image size calc
shibayan · Aug 2, 2020 · 8bba2a7 · 8bba2a7
1 parent 19999d7
commit 8bba2a7
Show file tree

Hide file tree

Showing 15 changed files with 139 additions and 66 deletions.
diff --git a/WinQuickLook/Controls/AudioFileViewer.xaml b/WinQuickLook/Controls/AudioFileViewer.xaml
@@ -4,21 +4,36 @@
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  mc:Ignorable="d" 
- d:DesignHeight="250" d:DesignWidth="250" x:Name="userControl" Loaded="UserControl_Loaded">
+ d:DesignHeight="300" d:DesignWidth="600" x:Name="userControl" Loaded="UserControl_Loaded">
  <UserControl.Resources>
  <Style x:Key="PlayerButtonStyle" TargetType="Button">
  <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
- <Setter Property="FontSize" Value="16" />
- <Setter Property="FontWeight" Value="Bold" />
+ <Setter Property="FontSize" Value="20" />
  <Setter Property="BorderThickness" Value="0" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="Background" Value="Transparent" />
+ <Setter Property="VerticalAlignment" Value="Center" />
+ </Style>
+ <Style x:Key="DurationTextBlockStyle" TargetType="TextBlock">
+ <Setter Property="FontSize" Value="14" />
+ <Setter Property="Foreground" Value="White" />
+ <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  </UserControl.Resources>
  <Grid>
- <Image Source="{Binding Thumbnail, ElementName=userControl}" Stretch="None" />
- <MediaElement x:Name="mediaElement" Source="{Binding Source, ElementName=userControl}" LoadedBehavior="Manual" MediaOpened="MediaElement_MediaOpened" />
- <Border Background="#80000000" VerticalAlignment="Bottom" Padding="10">
+ <Grid.ColumnDefinitions>
+ <ColumnDefinition Width="0.5*" />
+ <ColumnDefinition Width="0.5*" />
+ </Grid.ColumnDefinitions>
+ <Image Source="{Binding Thumbnail, ElementName=userControl}" Stretch="Uniform" Grid.Column="0" Width="256" Height="256" />
+ <MediaElement x:Name="mediaElement" Source="{Binding Source, ElementName=userControl}" LoadedBehavior="Manual"
+ MediaOpened="MediaElement_MediaOpened" Grid.Column="0" />
+ <StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,0,10,10" VerticalAlignment="Center">
+ <TextBlock Text="{Binding Metadata.Title, ElementName=userControl}" FontSize="22" TextWrapping="Wrap" TextAlignment="Center" />
+ <TextBlock Text="{Binding Metadata.FirstPerformer, ElementName=userControl}" FontSize="18" TextWrapping="Wrap" Margin="0,10,0,0" TextAlignment="Center" />
+ <TextBlock Text="{Binding Metadata.Album, ElementName=userControl}" FontSize="18" TextWrapping="Wrap" Margin="0,10,0,0" TextAlignment="Center" />
+ </StackPanel>
+ <Border Background="#70000000" VerticalAlignment="Bottom" Padding="10" Grid.ColumnSpan="2">
  <Grid>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" />
@@ -27,11 +42,12 @@
  </Grid.ColumnDefinitions>
  <Button x:Name="playButton" Content="&#xE768;" Style="{StaticResource PlayerButtonStyle}" Margin="0,0,10,0" Visibility="Collapsed" Grid.Column="0" Click="PlayButton_Click" />
  <Button x:Name="pauseButton" Content="&#xE769;" Style="{StaticResource PlayerButtonStyle}" Margin="0,0,10,0" Grid.Column="0" Click="PauseButton_Click" />
- <Slider x:Name="slider" Value="0" Minimum="0" SmallChange="1" LargeChange="1" Grid.Column="1" IsMoveToPointEnabled="True" ValueChanged="Slider_ValueChanged" Thumb.DragStarted="Slider_DragStarted" Thumb.DragCompleted="Slider_DragCompleted" />
+ <Slider x:Name="slider" Value="0" Minimum="0" SmallChange="1" LargeChange="1" Grid.Column="1" IsMoveToPointEnabled="True" VerticalAlignment="Center"
+ ValueChanged="Slider_ValueChanged" Thumb.DragStarted="Slider_DragStarted" Thumb.DragCompleted="Slider_DragCompleted" />
  <StackPanel Orientation="Horizontal" Margin="5,0,0,0" Grid.Column="2">
- <TextBlock x:Name="position" Foreground="White" Text="00:00" />
- <TextBlock Foreground="White" Text="/" Margin="2,0,2,0" />
- <TextBlock x:Name="duration" Foreground="White" Text="00:00" />
+ <TextBlock x:Name="position" Text="00:00" Style="{StaticResource DurationTextBlockStyle}" />
+ <TextBlock Text="/" Margin="2,0,2,0" Style="{StaticResource DurationTextBlockStyle}" />
+ <TextBlock x:Name="duration" Text="00:00" Style="{StaticResource DurationTextBlockStyle}" />
  </StackPanel>
  </Grid>
  </Border>

diff --git a/WinQuickLook/Controls/AudioFileViewer.xaml.cs b/WinQuickLook/Controls/AudioFileViewer.xaml.cs
@@ -35,6 +35,15 @@ public BitmapSource Thumbnail
  public static readonly DependencyProperty ThumbnailProperty =
  DependencyProperty.Register("Thumbnail", typeof(BitmapSource), typeof(AudioFileViewer), new PropertyMetadata(null));
 
+ public TagLib.Tag Metadata
+ {
+ get { return (TagLib.Tag)GetValue(MetadataProperty); }
+ set { SetValue(MetadataProperty, value); }
+ }
+
+ public static readonly DependencyProperty MetadataProperty =
+ DependencyProperty.Register("Metadata", typeof(TagLib.Tag), typeof(AudioFileViewer), new PropertyMetadata(null));
+
  private void MediaElement_MediaOpened(object sender, RoutedEventArgs e)
  {
  if (!mediaElement.NaturalDuration.HasTimeSpan)

diff --git a/WinQuickLook/Controls/GenericFileViewer.xaml b/WinQuickLook/Controls/GenericFileViewer.xaml
@@ -7,7 +7,7 @@
  xmlns:properties="clr-namespace:WinQuickLook.Strings"
  xmlns:gl="clr-namespace:System.Globalization;assembly=System.Runtime"
  mc:Ignorable="d"
- d:DesignHeight="280" d:DesignWidth="500" x:Name="userControl">
+ d:DesignHeight="290" d:DesignWidth="572" x:Name="userControl">
  <UserControl.Resources>
  <converters:FileInfoToFileSizeConverter x:Key="FileInfoToFileSizeConverter" />
  <converters:FileNameToTypeNameConverter x:Key="FileNameToTypeNameConverter" />
@@ -17,8 +17,8 @@
  <ColumnDefinition Width="0.5*" />
  <ColumnDefinition Width="0.5*" />
  </Grid.ColumnDefinitions>
- <Image Source="{Binding Thumbnail, ElementName=userControl}" Margin="15" Stretch="Uniform" Grid.Column="0" />
- <StackPanel Orientation="Vertical" Margin="0,25,15,15" Grid.Column="1">
+ <Image Source="{Binding Thumbnail, ElementName=userControl}" Margin="15" Stretch="Uniform" Grid.Column="0" Width="256" Height="256" />
+ <StackPanel Orientation="Vertical" Margin="15" Grid.Column="1">
  <TextBlock Text="{Binding FileInfo.Name, ElementName=userControl}" FontSize="22" TextWrapping="Wrap" />
  <TextBlock Text="{Binding FileInfo.FullName, ElementName=userControl, Converter={StaticResource FileNameToTypeNameConverter}}" FontSize="16" Margin="0,20,0,0" TextWrapping="Wrap" />
  <TextBlock Text="{Binding FileInfo, ElementName=userControl, Converter={StaticResource FileInfoToFileSizeConverter}}" FontSize="16" Margin="0,15,0,0" />

diff --git a/WinQuickLook/Controls/VideoFileViewer.xaml b/WinQuickLook/Controls/VideoFileViewer.xaml
@@ -4,33 +4,43 @@
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
  mc:Ignorable="d" 
- d:DesignHeight="300" d:DesignWidth="400" x:Name="userControl" Loaded="UserControl_Loaded">
+ d:DesignHeight="400" d:DesignWidth="600" x:Name="userControl" Loaded="UserControl_Loaded">
  <UserControl.Resources>
  <Style x:Key="PlayerButtonStyle" TargetType="Button">
  <Setter Property="FontFamily" Value="Segoe MDL2 Assets" />
- <Setter Property="FontSize" Value="16" />
- <Setter Property="FontWeight" Value="Bold" />
+ <Setter Property="FontSize" Value="20" />
  <Setter Property="BorderThickness" Value="0" />
  <Setter Property="Foreground" Value="White" />
  <Setter Property="Background" Value="Transparent" />
+ <Setter Property="VerticalAlignment" Value="Center" />
+ </Style>
+ <Style x:Key="DurationTextBlockStyle" TargetType="TextBlock">
+ <Setter Property="FontSize" Value="14" />
+ <Setter Property="Foreground" Value="White" />
+ <Setter Property="VerticalAlignment" Value="Center" />
  </Style>
  </UserControl.Resources>
  <Grid>
  <MediaElement x:Name="mediaElement" Source="{Binding Source, ElementName=userControl}" ScrubbingEnabled="True" LoadedBehavior="Manual" MediaOpened="MediaElement_MediaOpened" />
- <Border Background="#80000000" VerticalAlignment="Bottom" Padding="10">
+ <Border Background="#70000000" VerticalAlignment="Bottom" Padding="10">
  <Grid>
  <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto" />
  <ColumnDefinition Width="*" />
  <ColumnDefinition Width="Auto" />
  </Grid.ColumnDefinitions>
- <Button x:Name="playButton" Content="&#xE768;" Style="{StaticResource PlayerButtonStyle}" Margin="0,0,10,0" Visibility="Collapsed" Grid.Column="0" Click="PlayButton_Click" />
- <Button x:Name="pauseButton" Content="&#xE769;" Style="{StaticResource PlayerButtonStyle}" Margin="0,0,10,0" Grid.Column="0" Click="PauseButton_Click" />
- <Slider x:Name="slider" Value="0" Minimum="0" SmallChange="1" LargeChange="1" Grid.Column="1" IsMoveToPointEnabled="True" ValueChanged="Slider_ValueChanged" Thumb.DragStarted="Slider_DragStarted" Thumb.DragCompleted="Slider_DragCompleted" />
+ <StackPanel Orientation="Horizontal" Grid.Column="0" Margin="0,0,10,0">
+ <Button x:Name="playButton" Content="&#xE768;" Style="{StaticResource PlayerButtonStyle}" Visibility="Collapsed" Click="PlayButton_Click" />
+ <Button x:Name="pauseButton" Content="&#xE769;" Style="{StaticResource PlayerButtonStyle}" Click="PauseButton_Click" />
+ <Button Content="&#xED3C;" Margin="10,0,0,0" Style="{StaticResource PlayerButtonStyle}" Click="SkipBackButton_Click" />
+ <Button Content="&#xED3D;" Margin="10,0,0,0" Style="{StaticResource PlayerButtonStyle}" Click="SkipForwardButton_Click" />
+ </StackPanel>
+ <Slider x:Name="slider" Value="0" Minimum="0" SmallChange="1" LargeChange="1" Grid.Column="1" IsMoveToPointEnabled="True" VerticalAlignment="Center"
+ ValueChanged="Slider_ValueChanged" Thumb.DragStarted="Slider_DragStarted" Thumb.DragCompleted="Slider_DragCompleted" />
  <StackPanel Orientation="Horizontal" Margin="5,0,0,0" Grid.Column="2">
- <TextBlock x:Name="position" Foreground="White" Text="00:00" />
- <TextBlock Foreground="White" Text="/" Margin="2,0,2,0" />
- <TextBlock x:Name="duration" Foreground="White" Text="00:00" />
+ <TextBlock x:Name="position" Text="00:00" Style="{StaticResource DurationTextBlockStyle}" />
+ <TextBlock Text="/" Margin="2,0,2,0" Style="{StaticResource DurationTextBlockStyle}" />
+ <TextBlock x:Name="duration" Text="00:00" Style="{StaticResource DurationTextBlockStyle}" />
  </StackPanel>
  </Grid>
  </Border>

diff --git a/WinQuickLook/Controls/VideoFileViewer.xaml.cs b/WinQuickLook/Controls/VideoFileViewer.xaml.cs
@@ -63,6 +63,20 @@ private void PauseButton_Click(object sender, RoutedEventArgs e)
  pauseButton.Visibility = Visibility.Collapsed;
  }
 
+ private void SkipBackButton_Click(object sender, RoutedEventArgs e)
+ {
+ var newPosition = mediaElement.Position.Add(TimeSpan.FromSeconds(-10));
+
+ mediaElement.Position = newPosition;
+ }
+
+ private void SkipForwardButton_Click(object sender, RoutedEventArgs e)
+ {
+ var newPosition = mediaElement.Position.Add(TimeSpan.FromSeconds(30));
+
+ mediaElement.Position = newPosition;
+ }
+
  private void Timer_Tick(object sender, EventArgs e)
  {
  if (!_isSeeking)

diff --git a/WinQuickLook/Handlers/AnimatedGifPreviewHandler.cs b/WinQuickLook/Handlers/AnimatedGifPreviewHandler.cs
@@ -27,12 +27,12 @@ public bool CanOpen(string fileName)
 
  public async Task<(FrameworkElement, Size, string)> GetViewerAsync(string fileName)
  {
- var bitmap = BitmapDecoder.Create(new Uri(fileName), BitmapCreateOptions.DelayCreation, BitmapCacheOption.OnDemand);
+ using var tag = TagLib.File.Create(fileName);
 
  var requestSize = new Size
  {
- Width = bitmap.Frames[0].PixelWidth,
- Height = bitmap.Frames[0].PixelHeight
+ Width = tag.Properties.PhotoWidth,
+ Height = tag.Properties.PhotoHeight
  };
 
  var mediaElement = new MediaElement();
@@ -49,7 +49,7 @@ public bool CanOpen(string fileName)
  };
  mediaElement.EndInit();
 
- return (mediaElement, requestSize, $"{bitmap.Frames[0].PixelWidth}x{bitmap.Frames[0].PixelHeight} - {WinExplorerHelper.GetFileSize(fileName)}");
+ return (mediaElement, requestSize, $"{tag.Properties.PhotoWidth}x{tag.Properties.PhotoHeight} - {WinExplorerHelper.GetFileSize(fileName)}");
  }
  }
 }
diff --git a/WinQuickLook/Handlers/AudioPreviewHandler.cs b/WinQuickLook/Handlers/AudioPreviewHandler.cs
@@ -20,13 +20,16 @@ public bool CanOpen(string fileName)
 
  public async Task<(FrameworkElement, Size, string)> GetViewerAsync(string fileName)
  {
- var requestSize = new Size(400, 400);
+ var requestSize = new Size(600, 300);
+
+ using var tag = TagLib.File.Create(fileName);
 
  var audioViewer = new AudioFileViewer();
 
  audioViewer.BeginInit();
  audioViewer.Source = new Uri(fileName, UriKind.Absolute);
  audioViewer.Thumbnail = ImagingHelper.GetThumbnail(fileName);
+ audioViewer.Metadata = tag.Tag;
  audioViewer.EndInit();
 
  return (audioViewer, requestSize, $"{WinExplorerHelper.GetFileSize(fileName)}");

diff --git a/WinQuickLook/Handlers/GenericPreviewHandler.cs b/WinQuickLook/Handlers/GenericPreviewHandler.cs
@@ -16,7 +16,7 @@ public bool CanOpen(string fileName)
 
  public async Task<(FrameworkElement, Size, string)> GetViewerAsync(string fileName)
  {
- var requestSize = new Size(500, 280);
+ var requestSize = new Size(572, 290);
 
  var fileViewer = new GeneficFileViewer();
 

diff --git a/WinQuickLook/Handlers/ImagePreviewHandler.cs b/WinQuickLook/Handlers/ImagePreviewHandler.cs
@@ -77,10 +77,10 @@ private static (Size, Size) GetScaledImageSize(string fileName, int maxSize)
  {
  using var stream = File.OpenRead(fileName);
 
- var decoder = BitmapDecoder.Create(stream, BitmapCreateOptions.DelayCreation, BitmapCacheOption.None);
+ using var tag = TagLib.File.Create(fileName);
 
- var width = decoder.Frames[0].PixelWidth;
- var height = decoder.Frames[0].PixelHeight;
+ var width = tag.Properties.PhotoWidth;
+ var height = tag.Properties.PhotoHeight;
 
  var originalSize = new Size(width, height);
 

diff --git a/WinQuickLook/Handlers/VideoPreviewHandler.cs b/WinQuickLook/Handlers/VideoPreviewHandler.cs
@@ -20,10 +20,12 @@ public bool CanOpen(string fileName)
 
  public async Task<(FrameworkElement, Size, string)> GetViewerAsync(string fileName)
  {
+ using var tag = TagLib.File.Create(fileName);
+
  var requestSize = new Size
  {
- Width = 1200,
- Height = 900
+ Width = tag.Properties.VideoWidth,
+ Height = tag.Properties.VideoHeight
  };
 
  var videoViewer = new VideoFileViewer();
@@ -32,7 +34,7 @@ public bool CanOpen(string fileName)
  videoViewer.Source = new Uri(fileName, UriKind.Absolute);
  videoViewer.EndInit();
 
- return (videoViewer, requestSize, $"{WinExplorerHelper.GetFileSize(fileName)}");
+ return (videoViewer, requestSize, $"{tag.Properties.VideoWidth}x{tag.Properties.VideoHeight} - {WinExplorerHelper.GetFileSize(fileName)}");
  }
 
  private static readonly IList<string> _supportFormats = new[]

diff --git a/WinQuickLook/MessageHook.cs b/WinQuickLook/MessageHook.cs
@@ -33,7 +33,10 @@ public MessageHook(Dispatcher dispatcher)
  public void Start()
  {
  StartKeyboardHook();
+
+#if !DEBUG
  StartMouseHook();
+#endif
  }
 
  public void Stop()

diff --git a/WinQuickLook/QuickLookWindow.xaml b/WinQuickLook/QuickLookWindow.xaml
@@ -4,32 +4,40 @@
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
- x:Name="window" d:DesignWidth="500" d:DesignHeight="300" MinWidth="300" MinHeight="250" Background="Transparent" WindowStyle="None"
+ x:Name="window" d:DesignWidth="600" d:DesignHeight="400" MinWidth="300" MinHeight="250" Background="Transparent" WindowStyle="None"
  ShowActivated="False" ShowInTaskbar="False" SnapsToDevicePixels="True" UseLayoutRounding="True" FocusVisualStyle="{x:Null}"
  Unloaded="Window_Unloaded" SizeChanged="Window_SizeChanged">
  <Window.Resources>
  <ResourceDictionary Source="Styles.xaml" />
  </Window.Resources>
  <WindowChrome.WindowChrome>
- <WindowChrome CaptionHeight="40"
+ <WindowChrome CaptionHeight="44"
  GlassFrameThickness="-1"
  ResizeBorderThickness="{x:Static SystemParameters.WindowResizeBorderThickness}"
  UseAeroCaptionButtons="False" />
  </WindowChrome.WindowChrome>
  <Grid>
  <Grid.RowDefinitions>
- <RowDefinition Height="40" />
+ <RowDefinition Height="44" />
  <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <TextBlock Text="{Binding Title, ElementName=window}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Row="0" FontSize="14" />
- <Button x:Name="open" Visibility="Visible" HorizontalAlignment="Left" VerticalAlignment="Center" WindowChrome.IsHitTestVisibleInChrome="True"
- Margin="5,0,0,0" Padding="4" Grid.Row="0" Click="OpenButton_Click" Style="{StaticResource OpenButtonStyle}">
- <TextBlock Text="&#xE78B;" FontSize="20" FontFamily="Segoe MDL2 Assets"/>
- </Button>
- <Button Visibility="Visible" HorizontalAlignment="Right" VerticalAlignment="Center" WindowChrome.IsHitTestVisibleInChrome="True"
- Margin="0,0,5,0" Padding="6" Grid.Row="0" Click="CloseButton_Click" Style="{StaticResource CloseButtonStyle}">
- <TextBlock Text="&#xE711;" FontSize="14" FontFamily="Segoe MDL2 Assets"/>
- </Button>
+ <StackPanel HorizontalAlignment="Left" VerticalAlignment="Center" Orientation="Horizontal" Grid.Row="0">
+ <Button x:Name="openWithListButton" WindowChrome.IsHitTestVisibleInChrome="True" Margin="8,0,0,0"
+ Click="OpenWithListButton_Click" Style="{StaticResource OpenButtonStyle}">
+ <TextBlock Text="&#xE78B;" FontSize="20" FontFamily="Segoe MDL2 Assets"/>
+ </Button>
+ <Button x:Name="openWithButton" WindowChrome.IsHitTestVisibleInChrome="True" Margin="8,0,0,0"
+ Click="OpenWithButton_Click" Style="{StaticResource OpenButtonStyle}">
+ <TextBlock Text="Open with Notepad" FontWeight="Bold" />
+ </Button>
+ </StackPanel>
+ <StackPanel HorizontalAlignment="Right" VerticalAlignment="Center" Orientation="Horizontal" Grid.Row="0">
+ <Button WindowChrome.IsHitTestVisibleInChrome="True" Margin="0,0,11,0"
+ Click="CloseButton_Click" Style="{StaticResource CloseButtonStyle}">
+ <TextBlock Text="&#xE711;" FontSize="10" FontWeight="Bold" FontFamily="Segoe MDL2 Assets"/>
+ </Button>
+ </StackPanel>
  <ContentPresenter Content="{Binding PreviewHost, ElementName=window}" Grid.Row="1" Margin="5,0,5,5" />
  </Grid>
 </Window>