Merge pull request #120 from HandyOrg/add-Magnifier

Add magnifier

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/Data/MessageToken.cs

@@ -102,6 +102,8 @@
 	
         public static readonly string CardDemoCtl = nameof(CardDemoCtl);
 	
+        public static readonly string MagnifierDemoCtl = nameof(MagnifierDemoCtl);
+	
         public static readonly string ButtonDemoCtl = nameof(ButtonDemoCtl);
 
         public static readonly string RepeatButtonDemoCtl = nameof(RepeatButtonDemoCtl);

src/Shared/HandyControlDemo_Shared/Data/MessageToken.tt

@@ -53,7 +53,8 @@ var controlList = new List<string>
 	"GridDemoCtl",
 	"RangeSliderDemoCtl",
 	"ButtonGroupDemoCtl",
-	"CardDemoCtl"
+	"CardDemoCtl",
+	"MagnifierDemoCtl"
 };
 var styleList = new List<string>
 {

src/Shared/HandyControlDemo_Shared/HandyControlDemo_Shared.projitems

@@ -54,6 +54,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\CardDemoCtl.xaml.cs">
       <DependentUpon>CardDemoCtl.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\MagnifierDemoCtl.xaml.cs">
+      <DependentUpon>MagnifierDemoCtl.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)UserControl\Controls\RangeSliderDemoCtl.xaml.cs">
       <DependentUpon>RangeSliderDemoCtl.xaml</DependentUpon>
     </Compile>
@@ -420,6 +423,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)UserControl\Controls\MagnifierDemoCtl.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)UserControl\Controls\RelativePanelDemoCtl.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.Designer.cs

@@ -771,6 +771,15 @@ namespace HandyControlDemo.Properties.Langs {
             }
         }
         
+        /// <summary>
+        ///   查找类似 放大镜 的本地化字符串。
+        /// </summary>
+        public static string Magnifier {
+            get {
+                return ResourceManager.GetString("Magnifier", resourceCulture);
+            }
+        }
+        
         /// <summary>
         ///   查找类似 菜单 的本地化字符串。
         /// </summary>

src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.en.resx

@@ -627,4 +627,7 @@
   <data name="TextDialogWithTimer" xml:space="preserve">
     <value>TextDialog with timer</value>
   </data>
+  <data name="Magnifier" xml:space="preserve">
+    <value>Magnifier</value>
+  </data>
 </root>

src/Shared/HandyControlDemo_Shared/Properties/Langs/Lang.resx

@@ -627,4 +627,7 @@
   <data name="TextDialogWithTimer" xml:space="preserve">
     <value>文本对话框，带计时器</value>
   </data>
+  <data name="Magnifier" xml:space="preserve">
+    <value>放大镜</value>
+  </data>
 </root>

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

@@ -0,0 +1,17 @@
+<UserControl x:Class="HandyControlDemo.UserControl.MagnifierDemoCtl"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             Background="{DynamicResource RegionBrush}"
+             xmlns:hc="https://handyorg.github.io/handycontrol">
+    <hc:TransitioningContentControl>
+        <WrapPanel Margin="16">
+            <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="6" HorizontalOffset="-16" VerticalOffset="-16"/>
+                </hc:Magnifier.Instance>
+            </Image>
+        </WrapPanel>
+    </hc:TransitioningContentControl>
+</UserControl>

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

@@ -0,0 +1,10 @@
+namespace HandyControlDemo.UserControl
+{
+    public partial class MagnifierDemoCtl
+    {
+        public MagnifierDemoCtl()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Shared/HandyControlDemo_Shared/UserControl/Main/LeftMainContent.xaml

@@ -195,6 +195,11 @@
                         </hc:StatusSwitchElement.CheckedElement>
                     </ToggleButton>
                     <ListBox Name="ListBoxControl" Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" BorderThickness="0" SelectionMode="Single"  Style="{StaticResource ListBoxTransparent}">
+                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.MagnifierDemoCtl}" Content="{x:Static langs:Lang.Magnifier}">
+                            <hc:EdgeElement.LeftContent>
+                                <Image Source="../../Resources/Img/LeftMainContent/Search_16x.png"/>
+                            </hc:EdgeElement.LeftContent>
+                        </ListBoxItem>
                         <ListBoxItem Tag="{x:Static data:MessageToken.GravatarDemoCtl}" Content="{x:Static langs:Lang.Gravatar}">
                             <hc:EdgeElement.LeftContent>
                                 <Image Source="../../Resources/Img/LeftMainContent/User_16x.png"/>
@@ -415,7 +420,7 @@
                                 <Image Source="../../Resources/Img/LeftMainContent/TabPage_16x.png"/>
                             </hc:EdgeElement.LeftContent>
                         </ListBoxItem>
-                        <ListBoxItem Style="{StaticResource ListBoxItemNew}" Tag="{x:Static data:MessageToken.SideMenuDemoCtl}" Content="{x:Static langs:Lang.SideMenu}">
+                        <ListBoxItem Tag="{x:Static data:MessageToken.SideMenuDemoCtl}" Content="{x:Static langs:Lang.SideMenu}">
                             <hc:EdgeElement.LeftContent>
                                 <Image Source="../../Resources/Img/LeftMainContent/MainMenuControl_16x.png"/>
                             </hc:EdgeElement.LeftContent>

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

@@ -0,0 +1,174 @@
+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
+{
+    [TemplatePart(Name = ElementVisualBrush, Type = typeof(VisualBrush))]
+    public class Magnifier : Control
+    {
+        private Size _viewboxSize;
+
+        private AdornerContainer _adorner;
+
+        private UIElement _elementTarget;
+
+        private const string ElementVisualBrush = "PART_VisualBrush";
+
+        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));
+
+        private static void OnMagnifierChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            if (!(d is UIElement target)) return;
+            var magnifier = (Magnifier)e.NewValue;
+            magnifier.Target = target;
+        }
+
+        public static void SetInstance(DependencyObject element, Magnifier value)
+            => element.SetValue(InstanceProperty, value);
+
+        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));
+
+        private static void OnTargetChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+        {
+            var ctl = (Magnifier) d;
+            ctl.UpdateTarget(ctl._elementTarget, false);
+            ctl.UpdateTarget((UIElement)e.NewValue, true);
+        }
+
+        internal UIElement Target
+        {
+            get => (UIElement)GetValue(TargetProperty);
+            set => SetValue(TargetProperty, value);
+        }
+
+        public static readonly DependencyProperty ScaleProperty = DependencyProperty.Register(
+            "Scale", typeof(double), typeof(Magnifier), new PropertyMetadata(5.0, OnScaleChanged), ValidateHelper.IsInRangeOfPosDouble);
+
+        private static void OnScaleChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) => ((Magnifier)d).UpdateViewboxSize();
+
+        public double Scale
+        {
+            get => (double)GetValue(ScaleProperty);
+            set => SetValue(ScaleProperty, value);
+        }
+
+        public Magnifier()
+        {
+            _translateTransform = new TranslateTransform();
+            RenderTransform = _translateTransform;
+        }
+
+        public override void OnApplyTemplate()
+        {
+            base.OnApplyTemplate();
+
+            var visualBrush = GetTemplateChild(ElementVisualBrush) as VisualBrush ?? new VisualBrush();
+            visualBrush.Viewbox = _visualBrush.Viewbox;
+            _visualBrush = visualBrush;
+        }
+
+        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
+        {
+            base.OnRenderSizeChanged(sizeInfo);
+            UpdateViewboxSize();
+        }
+
+        private void UpdateViewboxSize() => _viewboxSize = new Size(ActualWidth / Scale, ActualHeight / Scale);
+
+        private void UpdateTarget(UIElement element , bool isNew)
+        {
+            if (element == null) return;
+
+            if (!isNew)
+            {
+                element.MouseEnter -= Element_MouseEnter;
+                element.MouseLeave -= Element_MouseLeave;
+                element.MouseMove -= Element_MouseMove;
+                _elementTarget = null;
+            }
+            else
+            {
+                element.MouseEnter += Element_MouseEnter;
+                element.MouseLeave += Element_MouseLeave;
+                element.MouseMove += Element_MouseMove;
+                _elementTarget = element;
+            }
+        }
+
+        private void UpdateLocation()
+        {
+            var targetPoint = Mouse.GetPosition(Target);
+            var subX = targetPoint.X - _visualBrush.Viewbox.Width / 2;
+            var subY = targetPoint.Y - _visualBrush.Viewbox.Height / 2;
+
+            var targetVector = VisualTreeHelper.GetOffset(Target);
+            _visualBrush.Viewbox = new Rect(new Point(subX + targetVector.X, subY + targetVector.Y), _viewboxSize);
+
+            var adornerPoint = Mouse.GetPosition(_adorner);
+            _translateTransform.X = adornerPoint.X + HorizontalOffset;
+            _translateTransform.Y = adornerPoint.Y + VerticalOffset;
+        }
+
+        private void Element_MouseMove(object sender, MouseEventArgs e) => UpdateLocation();
+
+        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)
+        {
+            if (_adorner == null)
+            {
+                var layer = AdornerLayer.GetAdornerLayer(Target);
+                if (layer == null) return;
+                _adorner = new AdornerContainer(layer)
+                {
+                    Child = this
+                };
+                layer.Add(_adorner);
+            }
+            this.Show();
+        }
+    }
+}

src/Shared/HandyControl_Shared/HandyControl_Shared.projitems

@@ -19,6 +19,7 @@
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\PanelElement.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\PasswordBoxAttach.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Attach\RectangleAttach.cs" />
+    <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Magnifier.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\ButtonGroup.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Other\Card.cs" />
     <Compile Include="$(MSBuildThisFileDirectory)Controls\Slider\RangeSlider\RangeTrack.cs" />
@@ -354,6 +355,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\MagnifierBaseStyle.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Base\SliderBaseStyle.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
@@ -646,6 +651,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\Magnifier.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Themes\Styles\NumericUpDown.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -0,0 +1,33 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="../Border.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <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"/>
+        <Setter Property="Background" Value="{DynamicResource BackgroundBrush}"/>
+        <Setter Property="BorderBrush" Value="{DynamicResource BorderBrush}"/>
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="controls:Magnifier">
+                    <Border Style="{StaticResource BorderCircular}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
+                        <Ellipse>
+                            <Ellipse.Fill>
+                                <VisualBrush Visual="{Binding Target,RelativeSource={RelativeSource TemplatedParent}}" ViewboxUnits="Absolute" x:Name="PART_VisualBrush"/>
+                            </Ellipse.Fill>
+                        </Ellipse>
+                    </Border>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
+</ResourceDictionary>

src/Shared/HandyControl_Shared/Themes/Styles/Magnifier.xaml

@@ -0,0 +1,10 @@
+<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+                    xmlns:controls="clr-namespace:HandyControl.Controls">
+
+    <ResourceDictionary.MergedDictionaries>
+        <ResourceDictionary Source="Base/MagnifierBaseStyle.xaml"/>
+    </ResourceDictionary.MergedDictionaries>
+
+    <Style BasedOn="{StaticResource MagnifierBaseStyle}" TargetType="controls:Magnifier"/>
+
+</ResourceDictionary>

src/Shared/HandyControl_Shared/Themes/Styles/Style.xaml

@@ -67,6 +67,7 @@
         <ResourceDictionary Source="Col.xaml"/>
         <ResourceDictionary Source="Card.xaml"/>
         <ResourceDictionary Source="Rectangle.xaml"/>
+        <ResourceDictionary Source="Magnifier.xaml"/>
     </ResourceDictionary.MergedDictionaries>
 
 </ResourceDictionary>