バージョン

xamTagCloud をページに追加

始める前に

このトピックではユーザーができるだけ早く操作に慣れることができるよう、プロシージャー コードおよび XAML を使用して、xamTagCloud コントロールをページに追加するために最低限必要な基本手順について説明します。

達成すること

基本的な xamTagCloud をユーザーのページに追加します。

次の手順を実行します

  1. Microsoft® WPF アプリケーションを作成します。

  2. 以下の NuGet パッケージ参照をアプリケーションに追加します。

    • Infragistics.WPF.TagCloud

    NuGet フィードのセットアップと NuGet パッケージの追加の詳細については、NuGet フィード ドキュメントを参照してください。

  1. UserControl の Loaded イベントにイベント ハンドラを接続します。

XAML の場合:

<UserControl Loaded="UserControl_Loaded"
  … >
    …
</UserControl>

  1. コード ビハインドに using/Imports 命令を配置するか xamTagCloud の XML 名前空間宣言を追加します。

XAML の場合:

xmlns:ig="http://schemas.infragistics.com/xaml"

Visual Basic の場合:

Imports Infragistics.Controls.Menus

C# の場合:

using Infragistics.Controls.Menus;

  1. xamTag コントロールのインスタンスを LayoutRoot という名前のデフォルトのグリッド レイアウト パネルに追加します。プロシージャー コードでこれを行う場合、ユーザー コントロールの Loaded イベントを処理し、イベント ハンドラーにこのコードを配置することができます。

<Grid x:Name="LayoutRoot" Background="White">
   <ig:XamTagCloud x:Name="xamTagCloud" Width="250"
                              Height="300"
                              HorizontalContentAlignment="Stretch"
                              VerticalContentAlignment="Stretch"
                              MaxScale="5" MinScale="1">
      <!-- TODO: クラウド アイテムを追加します -->
   </ig:XamTagCloud>
</Grid>

Visual Basic の場合:

Dim myTagCloud As New XamTagCloud()
myTagCloud.HorizontalContentAlignment = HorizontalAlignment.Stretch
myTagCloud.VerticalContentAlignment = VerticalAlignment.Stretch
myTagCloud.Height = 300
myTagCloud.MaxScale = 5
myTagCloud.MinScale = 1

C# の場合:

XamTagCloud myTagCloud = new XamTagCloud();
myTagCloud.HorizontalContentAlignment = HorizontalAlignment.Stretch;
myTagCloud.VerticalContentAlignment = VerticalAlignment.Stretch;
myTagCloud.Height = 300;
myTagCloud.MaxScale = 5;
myTagCloud.MinScale = 1;

  1. クラウド項目を xamTagCloud コントロールに追加します。詳細は、 「クラウド項目を xamTagCloud に追加」を参照してください。

XAML の場合:

<ig:XamTagCloud MaxScale="5" MinScale="1" Name="tagCloud">
<ig:XamTagCloudItem Content = "Silverlight" Weight = "10" />
<ig:XamTagCloudItem Content = "ASP.Net" Weight = "2" />
<ig:XamTagCloudItem Content = "WPF" Weight = "5" />
<ig:XamTagCloudItem Content = "Window Forms" Weight = "5" />
<ig:XamTagCloudItem Content = ".NET" Weight = "7" />
 …

Visual Basic の場合:

Dim cloudItem1 As New XamTagCloudItem With {.Content = "Silverlight",
   .Weight = 10}
myTagCloud.Items.Add(cloudItem1)
Dim cloudItem2 As New XamTagCloudItem With {.Content = "ASP.NET",
   .Weight = 2}
myTagCloud.Items.Add(cloudItem2)
Dim cloudItem3 As New XamTagCloudItem With {.Content = "WPF", .Weight =
   5}
myTagCloud.Items.Add(cloudItem3)
Dim cloudItem4 As New XamTagCloudItem With {.Content = "Windows Forms",
   .Weight = 5}
myTagCloud.Items.Add(cloudItem4)
Dim cloudItem5 As New XamTagCloudItem With {.Content = ".NET", .Weight
   = 7}
myTagCloud.Items.Add(cloudItem5)
…

C# の場合:

XamTagCloudItem cloudItem1 = new XamTagCloudItem { Content =
   "Silverlight", Weight = 10 };
myTagCloud.Items.Add(cloudItem1);
XamTagCloudItem cloudItem2 = new XamTagCloudItem { Content =
   "ASP.NET", Weight = 2 };
myTagCloud.Items.Add(cloudItem2);
XamTagCloudItem cloudItem3 = new XamTagCloudItem { Content = "WPF",
   Weight = 5 };
myTagCloud.Items.Add(cloudItem3);
XamTagCloudItem cloudItem4 = new XamTagCloudItem { Content =
   "Windows Forms", Weight = 5 };
myTagCloud.Items.Add(cloudItem4);
XamTagCloudItem cloudItem5 = new XamTagCloudItem { Content = ".NET",
   Weight = 7 };
myTagCloud.Items.Add(cloudItem5);
…

  1. xamTagCloud のインスタンスを Grid パネルの Children コレクションに追加します。注: 新しいページを初めて作成する時には、デフォルトでグリッド パネルが作成され、パネル名が LayoutRoot に指定されます。

Visual Basic の場合:

Me.LayoutRoot.Children.Add(myTagCloud)

C# の場合:

this.LayoutRoot.Children.Add(myTagCloud);

  1. アプリケーションを保存して実行します。

関連トピック

xamTagCloud をデータにバインド