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:
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> |
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> |