#116: indicate current zoom level for images

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/ImagePanel.xaml

@@ -9,7 +9,7 @@
              x:Name="imagePanel"
              d:DesignHeight="300" d:DesignWidth="300">
     <Grid>
-        <Rectangle Visibility="{Binding BackgroundVisibility, ElementName=imagePanel}">
+        <Rectangle Visibility="{Binding BackgroundVisibility, ElementName=imagePanel}" RenderOptions.BitmapScalingMode="NearestNeighbor">
             <Rectangle.Fill>
                 <ImageBrush x:Name="backgroundBrush" ImageSource="Resources/background-b.png" AlignmentY="Top"
                             Viewport="0,0,32,32"
@@ -22,5 +22,19 @@
                                          RenderOptions.BitmapScalingMode="{Binding RenderMode, ElementName=imagePanel}"
                                          AnimationUri="{Binding ImageUriSource, ElementName=imagePanel}" />
         </ScrollViewer>
+        <Border x:Name="zoomLevelInfo" CornerRadius="5" IsHitTestVisible="False" Opacity="0" Background="Gray" Padding="15,4,15,4" HorizontalAlignment="Center" VerticalAlignment="Center">
+            <TextBlock Foreground="White" FontSize="18" Text="{Binding ElementName=imagePanel, Path=ZoomFactor, StringFormat={}{0:P0}}" />
+            <Border.Resources>
+                <Storyboard x:Key="StoryboardShowZoomLevelInfo">
+                    <DoubleAnimationUsingKeyFrames Storyboard.Target="{Binding Source={x:Reference zoomLevelInfo}}" Storyboard.TargetProperty="Opacity">
+                        <DoubleAnimationUsingKeyFrames.KeyFrames>
+                            <LinearDoubleKeyFrame Value="0.9" KeyTime="0:0:0.1" />
+                            <LinearDoubleKeyFrame Value="0.9" KeyTime="0:0:0.6" />
+                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0.8" />
+                        </DoubleAnimationUsingKeyFrames.KeyFrames>
+                    </DoubleAnimationUsingKeyFrames>
+                </Storyboard>
+            </Border.Resources>
+        </Border>
     </Grid>
 </UserControl>

QuickLook.Plugin/QuickLook.Plugin.ImageViewer/ImagePanel.xaml.cs

@@ -25,6 +25,7 @@ using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Input;
 using System.Windows.Media;
+using System.Windows.Media.Animation;
 using System.Windows.Media.Imaging;
 using System.Windows.Threading;
 using QuickLook.Annotations;
@@ -41,11 +42,13 @@ namespace QuickLook.Plugin.ImageViewer
         private Visibility _backgroundVisibility = Visibility.Visible;
         private Point? _dragInitPos;
         private Uri _imageSource;
+        private bool _isZoomFactorFirstSet = true;
         private DateTime _lastZoomTime = DateTime.MinValue;
         private double _maxZoomFactor = 3d;
         private Meta _meta;
         private double _minZoomFactor = 0.1d;
         private BitmapScalingMode _renderMode = BitmapScalingMode.HighQuality;
+        private bool _showZoomLevelInfo = true;
         private BitmapSource _source;
         private double _zoomFactor = 1d;
 
@@ -77,6 +80,17 @@ namespace QuickLook.Plugin.ImageViewer
             Meta = meta;
         }
 
+        public bool ShowZoomLevelInfo
+        {
+            get => _showZoomLevelInfo;
+            set
+            {
+                if (value == _showZoomLevelInfo) return;
+                _showZoomLevelInfo = value;
+                OnPropertyChanged();
+            }
+        }
+
         public BitmapScalingMode RenderMode
         {
             get => _renderMode;
@@ -144,6 +158,14 @@ namespace QuickLook.Plugin.ImageViewer
             {
                 _zoomFactor = value;
                 OnPropertyChanged();
+
+                if (_isZoomFactorFirstSet)
+                {
+                    _isZoomFactorFirstSet = false;
+                    return;
+                }
+                if (ShowZoomLevelInfo)
+                    ((Storyboard) zoomLevelInfo.FindResource("StoryboardShowZoomLevelInfo")).Begin();
             }
         }
 
@@ -194,6 +216,8 @@ namespace QuickLook.Plugin.ImageViewer
 
         private void ImagePanel_SizeChanged(object sender, SizeChangedEventArgs e)
         {
+            UpdateZoomToFitFactor();
+
             if (ZoomToFit)
                 DoZoomToFit();
         }
@@ -295,20 +319,29 @@ namespace QuickLook.Plugin.ImageViewer
         }
 
         public void DoZoomToFit()
+        {
+            UpdateZoomToFitFactor();
+
+            Zoom(ZoomToFitFactor, false, true);
+        }
+
+        private void UpdateZoomToFitFactor()
         {
             if (viewPanelImage.Source == null)
+            {
+                ZoomToFitFactor = 1d;
                 return;
+            }
 
             var factor = Math.Min(viewPanel.ActualWidth / viewPanelImage.Source.Width,
                 viewPanel.ActualHeight / viewPanelImage.Source.Height);
 
             ZoomToFitFactor = factor;
-
-            Zoom(factor, false, true);
         }
 
         public void ResetZoom()
         {
+            ZoomToFitFactor = 1;
             Zoom(1d, true);
         }
 
@@ -317,12 +350,19 @@ namespace QuickLook.Plugin.ImageViewer
             if (viewPanelImage.Source == null)
                 return;
 
+            // pause when fit width
             if (ZoomFactor < ZoomToFitFactor && factor > ZoomToFitFactor
                 || ZoomFactor > ZoomToFitFactor && factor < ZoomToFitFactor)
             {
                 factor = ZoomToFitFactor;
                 ZoomToFit = true;
             }
+            // pause when 100%
+            else if (ZoomFactor < 1 && factor > 1 || ZoomFactor > 1 && factor < 1)
+            {
+                factor = 1;
+                ZoomToFit = false;
+            }
             else
             {
                 if (!isToFit)

QuickLook.Plugin/QuickLook.Plugin.PDFViewer/PdfViewerControl.xaml

@@ -70,7 +70,7 @@
             </ListBox.ItemTemplate>
         </ListBox>
         <Grid Grid.Column="1" Background="#00EFEFEF">
-            <imageViewer:ImagePanel x:Name="pagePanel" RenderMode="NearestNeighbor" BackgroundVisibility="Collapsed" />
+            <imageViewer:ImagePanel x:Name="pagePanel" RenderMode="NearestNeighbor" ShowZoomLevelInfo="False" BackgroundVisibility="Collapsed" />
         </Grid>
     </Grid>
 </UserControl>