Magnifier

WPF magnifier control is similar to the one provided by ImageGear.Windows.Forms Namespace, but it can be easily configured using the following XAML templates, as described in the following sections:

ImGearMagnifierCtl
ImGearMagnifierPopUpCtl

ImGearMagnifierCtl

The following template defines ImGearThumbnailMagnifierCtl Class control. Since ImGearMagnifierCtl Class is an invisible control, its template consists of placeholder and resource section that contains a visual template for ellipse magnifier. Note that this style is turning on in code-behind, so it must be in resource section to find it there.

XAML	Copy Code
<Style TargetType="{x:Type local:ImGearMagnifierCtl} <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Visibility" Value="Collapsed"/> <Setter Property="Template <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImGearMagnifierCtl} <!a-Resources--> <ControlTemplate.Resources> <!a-Style for ellipse popup magnifier--> <Style TargetType="{x:Type local:ImGearMagnifierPopUpCtl}" x:Key="EllipseMagnifier <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Template <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImGearMagnifierPopUpCtl} <Grid> <Path x:Name="Path" Width="{Binding ParentCtl.PopupWidth}" Height="{Binding ParentCtl.PopupHeight}" Stretch="Fill" StrokeLineJoin="Round" Stroke="#55000000" Fill="#55000000" > <Path.Data> <EllipseGeometry x:Name="EllipseGeom" Center="100,100" RadiusX="{Binding ParentCtl.PopupWidth}" RadiusY="{Binding ParentCtl.PopupHeight}"/> </Path.Data> </Path> <StackPanel ClipToBounds="True <Image HorizontalAlignment="Center" Source="{Binding ParentCtl.MagnifiedImage} <Image.Clip> <EllipseGeometry Center="{Binding Center}" RadiusX="{Binding ImageRadius.Width}" RadiusY="{Binding ImageRadius.Height}"/> </Image.Clip> </Image> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </ControlTemplate.Resources> <!--Placeholder--> <Border Background="Indigo" CornerRadius="3 <Label>ImGearMagnifierCtl Control</Label> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

XAML

Copy Code

<Style TargetType="{x:Type local:ImGearMagnifierCtl}
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
    <Setter Property="Visibility" Value="Collapsed"/>
    <Setter Property="Template
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:ImGearMagnifierCtl}
  <!a-Resources-->
          <ControlTemplate.Resources>
  <!a-Style for ellipse popup magnifier-->
            <Style TargetType="{x:Type local:ImGearMagnifierPopUpCtl}"
x:Key="EllipseMagnifier
              <Setter Property="HorizontalAlignment" Value="Left"/>
              <Setter Property="VerticalAlignment" Value="Top"/>
              <Setter Property="Template
                <Setter.Value>
                  <ControlTemplate
TargetType="{x:Type local:ImGearMagnifierPopUpCtl}
                    <Grid>
                      <Path x:Name="Path"
Width="{Binding ParentCtl.PopupWidth}"
Height="{Binding ParentCtl.PopupHeight}"
Stretch="Fill" StrokeLineJoin="Round"
Stroke="#55000000" Fill="#55000000" >
                        <Path.Data>
                          <EllipseGeometry x:Name="EllipseGeom"
     Center="100,100"
RadiusX="{Binding ParentCtl.PopupWidth}" RadiusY="{Binding ParentCtl.PopupHeight}"/>
                        </Path.Data>
                      </Path>
                      <StackPanel ClipToBounds="True
                        <Image HorizontalAlignment="Center" 
Source="{Binding ParentCtl.MagnifiedImage}
                          <Image.Clip>
                            <EllipseGeometry
Center="{Binding Center}"
RadiusX="{Binding ImageRadius.Width}" RadiusY="{Binding ImageRadius.Height}"/>
                          </Image.Clip>
                        </Image>
                      </StackPanel>
                    </Grid>
                  </ControlTemplate>
                </Setter.Value>
              </Setter>
            </Style>
          </ControlTemplate.Resources>
<!--Placeholder-->
          <Border Background="Indigo" CornerRadius="3
            <Label>ImGearMagnifierCtl Control</Label>
          </Border>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

ImGearMagnifierPopUpCtl

The following template defines style for popup rectangle magnifier window. Consists of border and image that is bound to MagnifiedImage Property of ImGearMagnifierCtl Class.

XAML	Copy Code
<Style TargetType="{x:Type local:ImGearMagnifierPopUpCtl} <Setter Property="HorizontalAlignment" Value="Left"/> <Setter Property="VerticalAlignment" Value="Top"/> <Setter Property="Template <Setter.Value> <ControlTemplate TargetType="{x:Type local:ImGearMagnifierPopUpCtl} <Border BorderBrush="#55000000" CornerRadius="3" BorderThickness="3" Background="#55000000" Width ="{Binding ParentCtl.PopupWidth}" Height="{Binding ParentCtl.PopupHeight} <Image Source="{Binding ParentCtl.MagnifiedImage}"/> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style>

XAML

Copy Code

<Style TargetType="{x:Type local:ImGearMagnifierPopUpCtl}
    <Setter Property="HorizontalAlignment" Value="Left"/>
    <Setter Property="VerticalAlignment" Value="Top"/>
        <Setter Property="Template
          <Setter.Value>
            <ControlTemplate TargetType="{x:Type local:ImGearMagnifierPopUpCtl}
              <Border
                BorderBrush="#55000000"
                CornerRadius="3"
                BorderThickness="3"
                Background="#55000000"
                Width ="{Binding ParentCtl.PopupWidth}"
                Height="{Binding ParentCtl.PopupHeight}
                <Image Source="{Binding ParentCtl.MagnifiedImage}"/>
              </Border>
            </ControlTemplate>
          </Setter.Value>
        </Setter>
  </Style>