Version

Getting Started with xamZoombar

Before You Begin

The xamZoombar™ control consists of a thumb, two buttons, and a preview area. The thumb controls the visible area as well as the zoom range. You can change the size of the thumb to increase or decrease the zoom scale. To change the zoom range, slide the thumb back and forth.

xamZoombar Getting Started with xamZoombar 01.png

The following table explains in detail the most important properties of the xamZoombar control:

Property Name Property Type Description

double

Determines the minimum possible value of the Range element in the xamZoombar control.

double

Determines the maximum possible value of the Range element in the xamZoombar control.

Determines the current range (thumb location and size) in the xamZoombar control.

What You Will Accomplish

This section will show you how to setup your project for the xamZoombar control in Microsoft® Visual Studio® and Expression Blend®.

Display xamZoombar in Visual Studio

  1. Create a Microsoft® WPF® project in Visual Studio.

  2. Add the following NuGet package reference to the application:

    • Infragistics.WPF.DataVisualization

    For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  1. Add the following namespace declarations for xamZoombar control.

In XAML:

<xmlns:ig=http://schemas.infragistics.com/xaml/>

In Visual Basic:

Imports Infragistics.Controls

In C#:

using Infragistics.Controls;
  1. Add an instance of the xamZoombar control with the following attributes:

    • Create a new xamZoombar object

    • Set the Minimum property to 0

    • Set the Maximum property to 1

    • Create a new Range object

    • Set the Minimum property on the range object to 0.25

    • Set the Maximum property on the range object to 0.75

In XAML:

<ig:XamZoombar x:Name="zoombar" Minimum="0" Maximum="1">
        <ig:XamZoombar.Range>
                <ig:Range Minimum="0.25" Maximum="0.75" />
        </ig:XamZoombar.Range>
</ig:XamZoombar>

In Visual Basic:

Dim zoombar As New XamZoombar()
zoombar.Minimum = 0
zoombar.Maximum = 1
zoombar.Range = New Range() With { Key .Minimum = 0.25, Key .Maximum = 0.75 }

In C#:

XamZoombar zoombar = new XamZoombar();
zoombar.Minimum = 0;
zoombar.Maximum = 1;
zoombar.Range = new Range {Minimum = 0.25, Maximum = 0.75};
  1. Save and run the project. The xamZoombar control will load and display a thumbnail in the middle of the control as shown in the following image.

xamZoombar Getting Started with xamZoombar 02.png

Display xamZoombar in Expression Blend

  1. Create a Microsoft® WPF® project in Expression Blend.

  2. Add the following NuGet package reference to the application:

    • Infragistics.WPF.DataVisualization

    For more information on setting up the NuGet feed and adding NuGet packages, you can take a look at the following documentation: NuGet Feeds.

  1. Select the xamZoombar control form the toolbox and drag it to the design surface.

  2. In the xamZoombar control properties tab, scroll down to the xamZoombar properties.

    • Set the Minimum property to 0

    • Set the Maximum property to 1

    • Create a new Range object

    • Set the Minimum property on the range object to 0.25

    • Set the Maximum property on the range object to 0.75

xamZoombar Getting Started with xamZoombar 03.png
  1. Save and run the project. The xamZoombar control will load and display a thumbnail in the middle of the control as shown in the following image.

xamZoombar Getting Started with xamZoombar 04.png