バージョン

パンとズームの構成

このトピックは、xamOrgChart コントロールのパンとズーム設定を構成する方法を説明します。

パンとズームの許可

パンとズームは、xamOrgChart コントロールの ナビゲーション設定の以下の Boolean プロパティによって制御されます。

  • AllowPan - True の時、マウスによるパンニングが有効です。

  • AllowZoom - True の時、マウスによるズームが有効です。

Note

注:

AllowPan と AllowZoom を False に設定した場合、パンとズームは、コード ビハインドまたは xamOverviewPlusDetailPane コントロールを使用して実行できます。

以下のコードはパンとズームの両方を許可する方法を示します。

XAML の場合:

<ig:XamOrgChart>
    <ig:XamOrgChart.NavigationSettings>
        <ig:NavigationSettings AllowPan="True" AllowZoom="True" />
    </ig:XamOrgChart.NavigationSettings>
</ig:XamOrgChart>

Visual Basic の場合:

Dim orgChart As New XamOrgChart()
Dim navigationSettings As New NavigationSettings()
navigationSettings.AllowPan = True
navigationSettings.AllowZoom = True
orgChart.NavigationSettings = navigationSettings

C# の場合:

XamOrgChart orgChart = new XamOrgChart();
NavigationSettings navigationSettings = new NavigationSettings();
navigationSettings.AllowPan = true;
navigationSettings.AllowZoom = true;
orgChart.NavigationSettings = navigationSettings;

ズーム レベルの構成

ズーム レベルは、xamOrgChart コントロールのズーム レベル プロパティによって制御されます。これらすべてのプロパティで、有効な値は少数を含むゼロよりも大きい数字です。ズームレベル値に 100 を掛けると、ズーム スケールはパーセンテージで表されます。つまり、

ズーム レベル *100 = ズーム %。

たとえば、値 1 はノードを 100% にスケールします。

xamOrgChart コントロールのズーム レベルプロパティは以下のとおりです。

以下のコードは、ズーム設定を次のように構成します。

  • 最大ズーム レベル - 300%

  • 最小ズーム レベル - 50%

  • 現在のズーム レベル - 100%

XAML の場合:

<ig:XamOrgChart
    MaximumZoomLevel="3"
    MinimumZoomLevel="0.5"
    ZoomLevel="1">
</ig:XamOrgChart>

Visual Basic の場合:

Dim orgChart As New XamOrgChart()
orgChart.MaximumZoomLevel = 3
orgChart.MinimumZoomLevel = 0.5
orgChart.ZoomLevel = 1

C# の場合:

XamOrgChart orgChart = new XamOrgChart();
orgChart.MaximumZoomLevel = 3;
orgChart.MinimumZoomLevel = 0.5;
orgChart.ZoomLevel = 1;

コード例

以下のコードは、 Scale-to-Fit および Zoom-to-100% 機能を実装する方法を示します。Scale to Fit 機能は、xamOrgChart のコンテンツをスケールして、表示可能領域に合わせます。Zoom to 100% は組織図のコンテンツを 100% (ZoomLevel=1 に等しい) にスケールします。

xamOrgChart Configuring Panning and Zooming 01.png

図 1: Scale-to-Fit 機能

xamOrgChart Configuring Panning and Zooming 02.png

図 2: Zoom-to-100% 機能

Visual Basic の場合:

Dim orgChart As New XamOrgChart()
orgChart.ScaleToFit()
orgChart.ZoomTo100()
‘10% ズーム インを実行します in.
orgChart.ZoomIn()
‘10% ズーム アウトを実行します
orgChart.ZoomOut()

C# の場合:

XamOrgChart orgChart = new XamOrgChart();
orgChart.ScaleToFit();
orgChart.ZoomTo100();
//10% ズーム インを実行します
orgChart.ZoomIn();
//10% ズーム アウトを実行します
orgChart.ZoomOut();

関連トピック

xamOrgChart の使用