This topic demonstrates how to create a basic SiteMap and customize it's LevelSettings and node templates.

Step 1 of 3: Add a SiteMap and Bind it to data 

Complete the following steps to add SiteMap control and bind it to an existing .sitemap file using the C1SiteMapDataSource control.

In the Designer

1. In Visual Studio, create a new ASP.Net WebApplication and add a new Web Form.
2. In the Toolbox, locate the SiteMap control and drag it onto the Web Form. If you cannot find the control in the toolbox, right click and select Choose Items and locate the SiteMap control in the Choose ToolBox Items dialog box.
3. In the Toolbox, locate the C1SiteMapDataSource control and drag it onto the Web Form. If you cannot find the control in the toolbox, right click and select Choose Items and locate the C1SiteMapDataSource control in the Choose ToolBox Items dialog box.
4. Add the .sitemap file to the project.
5. Right click the C1SiteMapDataSource control and select Properties.
6. In the Properties Window, click the ellipsis button (...) next to SiteMapFile property.
7. Select the .sitemap file in the Choose a source SiteMap file dialog box and click OK.
8. Click the SiteMap smart tag to open the SiteMap Tasks Menu.
9. Open the Choose Data Source dropdown and select C1SiteMapDataSource1.

In Source View

Add the following markup within the <form></form> tags, to add a SiteMap control to the form bind it to an existing .sitemap file using a C1SiteMapDataSource control.

<cc1:C1SiteMap ID="C1SiteMap1" runat="server" DataSourceID="C1SiteMapDataSource1">            
</cc1:C1SiteMap>
<cc1:C1SiteMapDataSource ID="C1SiteMapDataSource1" runat="server" SiteMapFile="~/web1.sitemap" />

What You've Accomplished

When you run the project, a basic SiteMap is created, as shown in the image below.

Back to Top

Step 2 of 3: Customize SiteMap Level Settings

Complete the following steps to add new LevelSettings to customize the appearance of the SiteMap.

In the Designer

1. Select the SiteMap control and click the smart tags to open SiteMap Tasks Menu.
2. Select Edit Nodes. This will open the C1SiteMap Designer Form.
3. click the ellipsis button (...) next to LevelSettings property to open the C1SiteMapLevelSettings Collection Editor.
4. Click the Add button twice to add two new level settings.
5. For the first LevelSetting, on the right hand side, set Level to 1, Layout to List.
6. For the second LevelSetting, set Level to 2, Layout to List and SeparatorText to ||.
7. Click OK to close the C1SiteMapLevelSettings Collection Editor and then click OK again to close the C1SiteMap Designer Form.

In Source View

Add the following markup within the <cc1:C1SiteMap></cc1:C1SiteMap> tags to add new LevelSettings to the SiteMap.

<LevelSettings>
  <cc1:C1SiteMapLevelSetting Level="1" SeparatorText="||">
                
        <ListLayout RepeatColumns="2" />

  </cc1:C1SiteMapLevelSetting>
  <cc1:C1SiteMapLevelSetting Layout="Flow" Level="2" SeparatorText="||">
  </cc1:C1SiteMapLevelSetting>
</LevelSettings>

In Code

Add the following code to the Page_Load event, to add new LevelSettings to the SiteMap.

// Add new LevelSettings
                
C1SiteMap1.LevelSettings.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting());
C1SiteMap1.LevelSettings.Add(new C1.Web.Wijmo.Controls.C1SiteMap.C1SiteMapLevelSetting());

// Customize LevelSetting[0]
C1SiteMap1.LevelSettings[0].Level = 1;
C1SiteMap1.LevelSettings[0].Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.List;
                
C1SiteMap1.LevelSettings[0].ListLayout.RepeatColumns = 2;

// Customize LevelSetting[1]
C1SiteMap1.LevelSettings[1].Level = 2;
C1SiteMap1.LevelSettings[1].Layout = C1.Web.Wijmo.Controls.C1SiteMap.SiteMapLayoutType.Flow;
C1SiteMap1.LevelSettings[1].SeparatorText = "||";

What You've Accomplished

When you run the project, the SiteMap now appear as shown in the image below.

Back to Top

Step 3 of 3: Customize Nodes using Node Templates

Complete the following steps to customize nodes by adding node templates.

In Source View

Add the following markup within the <cc1:C1SiteMapLevelSetting></cc1:C1SiteMapLevelSetting> tags, to customize nodes using node templates. This template replaces the name of the nodes at Level1 with an image, that is added to the project, and the node description.

<NodeTemplate>
   <asp:Image ID="Image1" runat="server" Width="28px" Height="26px" ImageUrl="~/Wijmo.png" />
      <a  href="#" >
         <%# Eval("description") %>
      </a>
 </NodeTemplate>

What You've Accomplished

When you run the project, the SiteMap looks as shown in the image below.

Back to Top