バージョン

パンとズームの構成

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

パンとズームの許可

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

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

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

Note

注:

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

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

XAML の場合:

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

Visual Basic の場合:

Dim networkNode As New XamNetworkNode()
Dim navigationSettings As New NavigationSettings()
navigationSettings.AllowPan = True
navigationSettings.AllowZoom = True
networkNode.NavigationSettings = navigationSettings

C# の場合:

XamNetworkNode networkNode = new XamNetworkNode();
NavigationSettings navigationSettings = new NavigationSettings();
navigationSettings.AllowPan = true;
navigationSettings.AllowZoom = true;
networkNode.NavigationSettings = navigationSettings;

ズーム レベルの構成

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

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

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

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

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

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

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

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

XAML の場合:

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

Visual Basic の場合:

Dim networkNode As New XamNetworkNode()
networkNode.MaximumZoomLevel = 3
networkNode.MinimumZoomLevel = 0.5
networkNode.ZoomLevel = 1

C# の場合:

XamNetworkNode networkNode = new XamNetworkNode();
networkNode.MaximumZoomLevel = 3;
networkNode.MinimumZoomLevel = 0.5;
networkNode.ZoomLevel = 1;

コード例

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

xamNetworkNode Configuring Panning and Zooming 01.png

図 1: スケールに合わせる機能

xamNetworkNode Configuring Panning and Zooming 02.png

図 2: 100% にズーム機能

Visual Basic の場合:

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

C# の場合:

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

関連トピック