completed the branch

README.md

@@ -63,6 +63,10 @@ Step 4：enjoy coding
 
 ## Latest examples
 
+### Magnifier
+
+![Magnifier](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Magnifier.png)
+
 ### Card
 
 ![Card](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Card.png)
@@ -79,12 +83,12 @@ Step 4：enjoy coding
 
 ![SideMenu](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/SideMenu.png)
 
+## History publication
+
 ### NotifyIcon
 
 ![NotifyIcon](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/NotifyIcon.png)
 
-## History publication
-
 ### Dialog
 
 ![Dialog](https://raw.githubusercontent.com/NaBian/HandyControl/master/Resources/Dialog.png)

src/Shared/HandyControlDemo_Shared/UserControl/Controls/MagnifierDemoCtl.xaml

@@ -4,12 +4,14 @@
              Background="{DynamicResource RegionBrush}"
              xmlns:hc="https://handyorg.github.io/handycontrol">
     <hc:TransitioningContentControl>
-        <hc:SimplePanel>
+        <WrapPanel Margin="16">
-            <Image Name="ImageDemo" Source="/HandyControlDemo;component/Resources/Img/1.jpg" Stretch="None">
+            <Image Margin="16" hc:Magnifier.Instance="{x:Static hc:Magnifier.Default}" Source="/HandyControlDemo;component/Resources/Img/b1.jpg" Stretch="None"/>
+
+            <Image Margin="16" Source="/HandyControlDemo;component/Resources/Img/b1.jpg" Stretch="None">
                 <hc:Magnifier.Instance>
-                    <hc:Magnifier Scale="5"/>
+                    <hc:Magnifier Scale="6" HorizontalOffset="-16" VerticalOffset="-16"/>
                 </hc:Magnifier.Instance>
             </Image>
-        </hc:SimplePanel>
+        </WrapPanel>
     </hc:TransitioningContentControl>
 </UserControl>

src/Shared/HandyControl_Shared/Controls/Other/Magnifier.cs

@@ -1,10 +1,11 @@
-using System;
+using System.Windows;
-using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Documents;
 using System.Windows.Input;
 using System.Windows.Media;
+using HandyControl.Data;
 using HandyControl.Interactivity;
+using HandyControl.Tools;
 using HandyControl.Tools.Extension;
 
 namespace HandyControl.Controls
@@ -14,7 +15,7 @@ namespace HandyControl.Controls
     {
         private Size _viewboxSize;
 
-        private Adorner _adorner;
+        private AdornerContainer _adorner;
 
         private UIElement _elementTarget;
 
@@ -22,6 +23,26 @@ namespace HandyControl.Controls
 
         private VisualBrush _visualBrush = new VisualBrush();
 
+        private readonly TranslateTransform _translateTransform;
+
+        public static readonly DependencyProperty HorizontalOffsetProperty = DependencyProperty.Register(
+            "HorizontalOffset", typeof(double), typeof(Magnifier), new PropertyMetadata(ValueBoxes.Double0Box));
+
+        public double HorizontalOffset
+        {
+            get => (double) GetValue(HorizontalOffsetProperty);
+            set => SetValue(HorizontalOffsetProperty, value);
+        }
+
+        public static readonly DependencyProperty VerticalOffsetProperty = DependencyProperty.Register(
+            "VerticalOffset", typeof(double), typeof(Magnifier), new PropertyMetadata(ValueBoxes.Double0Box));
+
+        public double VerticalOffset
+        {
+            get => (double) GetValue(VerticalOffsetProperty);
+            set => SetValue(VerticalOffsetProperty, value);
+        }
+
         public static readonly DependencyProperty InstanceProperty = DependencyProperty.RegisterAttached(
             "Instance", typeof(Magnifier), typeof(Magnifier), new PropertyMetadata(default(Magnifier), OnMagnifierChanged));
 
@@ -38,6 +59,8 @@ namespace HandyControl.Controls
         public static Magnifier GetInstance(DependencyObject element)
             => (Magnifier) element.GetValue(InstanceProperty);
 
+        public static Magnifier Default => new Magnifier();
+
         internal static readonly DependencyProperty TargetProperty = DependencyProperty.Register(
             "Target", typeof(UIElement), typeof(Magnifier), new PropertyMetadata(default(UIElement), OnTargetChanged));
 
@@ -55,7 +78,7 @@ namespace HandyControl.Controls
         }
 
         public static readonly DependencyProperty ScaleProperty = DependencyProperty.Register(
-            "Scale", typeof(double), typeof(Magnifier), new PropertyMetadata(5.0, OnScaleChanged));
+            "Scale", typeof(double), typeof(Magnifier), new PropertyMetadata(5.0, OnScaleChanged), ValidateHelper.IsInRangeOfPosDouble);
 
         private static void OnScaleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) => ((Magnifier)d).UpdateViewboxSize();
 
@@ -65,6 +88,12 @@ namespace HandyControl.Controls
             set => SetValue(ScaleProperty, value);
         }
 
+        public Magnifier()
+        {
+            _translateTransform = new TranslateTransform();
+            RenderTransform = _translateTransform;
+        }
+
         public override void OnApplyTemplate()
         {
             base.OnApplyTemplate();
@@ -102,25 +131,30 @@ namespace HandyControl.Controls
             }
         }
 
-        private void UpdateLocation(Point adornerPoint)
+        private void UpdateLocation()
         {
             var targetPoint = Mouse.GetPosition(Target);
-
             var subX = targetPoint.X - _visualBrush.Viewbox.Width / 2;
             var subY = targetPoint.Y - _visualBrush.Viewbox.Height / 2;
 
-            _visualBrush.Viewbox = new Rect(new Point(subX, subY), _viewboxSize);
+            var targetVector = VisualTreeHelper.GetOffset(Target);
+            _visualBrush.Viewbox = new Rect(new Point(subX + targetVector.X, subY + targetVector.Y), _viewboxSize);
 
-            var x = adornerPoint.X - ActualWidth / 2;
+            var adornerPoint = Mouse.GetPosition(_adorner);
-            var y = adornerPoint.Y - ActualHeight / 2;
+            _translateTransform.X = adornerPoint.X + HorizontalOffset;
-            Arrange(new Rect(x, y, ActualWidth, ActualHeight));
+            _translateTransform.Y = adornerPoint.Y + VerticalOffset;
-
-            Console.WriteLine(new Rect(x, y, ActualWidth, ActualHeight));
         }
 
-        private void Element_MouseMove(object sender, MouseEventArgs e) => UpdateLocation(Mouse.GetPosition(_adorner));
+        private void Element_MouseMove(object sender, MouseEventArgs e) => UpdateLocation();
 
-        private void Element_MouseLeave(object sender, MouseEventArgs e) => _adorner?.Collapse();
+        private void Element_MouseLeave(object sender, MouseEventArgs e)
+        {
+            var layer = AdornerLayer.GetAdornerLayer(Target);
+            if (layer == null) return;
+            layer.Remove(_adorner);
+            _adorner.Child = null;
+            _adorner = null;
+        }
 
         private void Element_MouseEnter(object sender, MouseEventArgs e)
         {
@@ -134,9 +168,7 @@ namespace HandyControl.Controls
                 };
                 layer.Add(_adorner);
             }
-
+            this.Show();
-            _adorner.Show();
-            UpdateLocation(Mouse.GetPosition(_adorner));
         }
     }
 }

src/Shared/HandyControl_Shared/Interactivity/AdornerContainer.cs

@@ -17,6 +17,13 @@ namespace HandyControl.Interactivity
             get => _child;
             set
             {
+                if (value == null)
+                {
+                    RemoveVisualChild(_child);
+                    // ReSharper disable once ExpressionIsAlwaysNull
+                    _child = value;
+                    return;
+                }
                 AddVisualChild(value);
                 _child = value;
             }

src/Shared/HandyControl_Shared/Themes/Styles/Base/MagnifierBaseStyle.xaml

@@ -8,6 +8,8 @@
 
     <Style x:Key="MagnifierBaseStyle" TargetType="controls:Magnifier">
         <Setter Property="IsHitTestVisible" Value="False" />
+        <Setter Property="HorizontalAlignment" Value="Left"/>
+        <Setter Property="VerticalAlignment" Value="Top"/>
         <Setter Property="Width" Value="180"/>
         <Setter Property="Height" Value="180"/>
         <Setter Property="BorderThickness" Value="8"/>