ImageGear .NET - Updated
Magnifier
User Guide > How to Work with... > Common Operations > Viewing > Viewing with WPF > XAML GUI Controls and Templates > 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

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>
 

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>