SiteMap for ASP.NET Web Forms
クイックスタート：SiteMap の作成とカスタマイズ
全て展開
すべて折りたたむ
トピックの内容

ここでは、次の手順を実行して、SiteMap コントロールを使用する簡単なアプリケーションを作成する方法を学びます。

以下の手順は、Visual Studio 2012 で作成されたアプリケーション用です。使用する Visual Studio のバージョンによっては、手順が多少異なる場合があります。

手順１/３：Web フォームへの SiteMap の追加

  1. Visual Studio で、新しい ASP.Net Web アプリケーションを作成し、新しい Web フォームを追加します。
  2. ツールボックスで SiteMap コントロールを見つけ、Web フォームにドラッグします。ツールボックスでコントロールが見つからない場合は、右クリックして［項目の選択］を選択し、［ツールボックス項目の選択］ダイアログボックスで SiteMap を見つけます。
  3. さらに、サイトマップ内でリンクする Web ページごとに１つ、合計３つの Web フォームを追加します。

手順２/３：SiteMap へのノードの追加

  1. SiteMap コントロールを選択し、スマートタグ をクリックして［SiteMap のタスク］メニューを開きます。
  2. ［ノードの編集］をクリックします。これにより、C1SiteMap デザイナフォームが開きます。
  3. ［子項目の追加］ボタンを３回クリックして、３つの子ノードを追加します。

  4. C1SiteMapNode2 をクリックし、［項目を右に移動］ボタンをクリックします。

  5. C1SiteMapNode1 を選択します。プロパティウィンドウの右側で、NavigateUrl プロパティを Webform2.aspx に設定します。同様に、C1SiteMapNode2 と C1SiteMapNode3 の NavigateUrl プロパティをそれぞれ Webform3.aspx と Webform4.aspx に設定します。
  6. ［F5］キーを押してプロジェクトを実行します。

ソースビューの場合

次のマークアップを <cc1:C1SiteMap></cc1:C1SiteMap>タグ内に追加して、SiteMap コントロールにいくつかのノードを追加します。

ASP.Net
コードのコピー 
<Nodes>
        <cc1:C1SiteMapNode runat="server" Text="C1SiteMapNode1" NavigateUrl="Web Form2.aspx">
            <Nodes>
                <cc1:C1SiteMapNode runat="server" NavigateUrl="Web Form3.aspx" Text="C1SiteMapNode2">
                </cc1:C1SiteMapNode>
            </Nodes>
        </cc1:C1SiteMapNode>
        <cc1:C1SiteMapNode runat="server" Text="C1SiteMapNode3" NavigateUrl="Web Form4.aspx">
        </cc1:C1SiteMapNode>
</Nodes>

コードの場合

次のコードを Page_Load イベントに追加して、ノードを SiteMap コントロールに追加します。

C# でコードを書く場合

C#
コードのコピー 
C1SiteMap1.Nodes.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode());
C1SiteMap1.Nodes.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode());
C1SiteMap1.Nodes[0].Nodes.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode());
C1SiteMap1.Nodes[0].Text = "C1SiteMapNode1";
C1SiteMap1.Nodes[1].Text = "C1SiteMapNode1";
C1SiteMap1.Nodes[0].Nodes[0].Text = "C1SiteMapNode1Child1";

VB でコードを書く場合

VB
コードのコピー 
C1SiteMap1.Nodes.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode())
C1SiteMap1.Nodes.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode())
C1SiteMap1.Nodes(0).Nodes.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapNode())
C1SiteMap1.Nodes(0).Text = "C1SiteMapNode1"
C1SiteMap1.Nodes(1).Text = "C1SiteMapNode1"
C1SiteMap1.Nodes(0).Nodes(0).Text = "C1SiteMapNode1Child1"

ここまでの成果

プロジェクトを実行すると、C1SiteMapNode が次の図のように表示されます。SiteMapNode1 と SiteMapNode3 はレベル０、SiteMapNode2 はレベル１のノードです。

先頭に戻る

手順３/３：外観とレイアウトのカスタマイズ

デザイナの場合

  1. ［SiteMap のタスク］メニューを開き、［ノードの編集］を選択します。
  2. C1SiteMap デザイナフォームで、C1SiteMap1 を選択し、右側で CssClass と ThemeSwatch を自由に設定します。
  3. Layout プロパティグループを展開し、DefaultLevelSetting プロパティグループを展開し、Layout を List に設定します。
    メモ：プロジェクトに追加した画像を ImageUrl プロパティで選択することで、選択したレベルに画像を追加することもできます。
  4. ListLayout プロパティグループを展開し、RepeatColumns を２に設定します。

さまざまなレベルのノードのレイアウトを変更する方法として、C1SiteMapLevelSetting コレクションエディタを使用することもできます。C1SiteMapLevelSetting コレクションエディタを使用してレイアウトを変更するには、次の手順に従います。

  1. SiteMap コントロールを右クリックし、［プロパティ］を選択します。
  2. プロパティウィンドウで、LevelSettings プロパティの横にある省略符ボタン（...）をクリックします。これで、C1SiteMapLevelSetting コレクションエディタが開きます。
  3. C1SiteMapLevelSetting コレクションエディタで、［追加］ボタンをクリックして、新しいレベル設定を追加します。
  4. 右側で、Level を１、Layout を Flow、SeparatorText を「,」に設定します。

ソースビューの場合

次のマークアップを <cc1:C1SiteMap></cc1:C1SiteMap>タグ内に追加して、レベル０（デフォルトレベル）ノードとレベル１ノードのレイアウトを変更します。

ASP.Net
コードのコピー 
<LevelSettings>
       <cc1:C1SiteMapLevelSetting Level="1" SeparatorText="," Layout="Flow">
       </cc1:C1SiteMapLevelSetting>
   </LevelSettings>
   <DefaultLevelSetting SeparatorText=" ||">
       <ListLayout RepeatColumns="2" />
               
   </DefaultLevelSetting>

コードの場合

Page_Load イベントに次のコードを追加して、DefaultLevel 設定を変更し、新しいレベル設定を追加します。

C# でコードを書く場合

C#
コードのコピー 
// 新しい LevelSetting を追加します
C1SiteMap1.LevelSettings.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting());
           
// LevelSetting をカスタマイズします
C1SiteMap1.LevelSettings[0].Level = 1;
C1SiteMap1.LevelSettings[0].Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow;
C1SiteMap1.LevelSettings[0].SeparatorText = ",";
           
// DefaultLevelSetting をカスタマイズします
C1SiteMap1.DefaultLevelSetting.Level = 0;
C1SiteMap1.DefaultLevelSetting.Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List;
C1SiteMap1.DefaultLevelSetting.ListLayout.RepeatColumns = 2;

Visual Basic でコードを書く場合

VB
コードのコピー 
' 新しい LevelSetting を追加します
C1SiteMap1.LevelSettings.Add(New C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting())
' LevelSetting をカスタマイズします
C1SiteMap1.LevelSettings(0).Level = 1
C1SiteMap1.LevelSettings(0).Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow
C1SiteMap1.LevelSettings(0).SeparatorText = ","
' DefaultLevelSetting をカスタマイズします
C1SiteMap1.DefaultLevelSetting.Level = 0
C1SiteMap1.DefaultLevelSetting.Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List
C1SiteMap1.DefaultLevelSetting.ListLayout.RepeatColumns = 2

ここまでの成果

［F5］を押してプロジェクトを実行し、すべてのレベル１ノードがセパレータを使用したフローレイアウトで表示され、すべてのレベル０ノードが２つの列のリストとして表示されることを確認します。

 

先頭に戻る

 

 

Copyright © GrapeCity, Inc. All rights reserved.