Programming/.NET

 1. Menu

 

Menu 컨트롤은 계층화된 데이터구조를 표현하는데 사용되는 컨트롤입니다. 때문에 TreeView 의 데이터소스로는 XmlDataSource 나 SiteMapDataSource 컨트롤(IHierarchicalDataSource 인터페이스를 상속받는)만이 사용될 수 있습니다.

 

 2. SiteMap 연동

 

프로젝트에 존재하는 sitemap 파일을 menu와 연동하려면 먼저 sitemap데이터를 연결짓는 SiteMapDataSource 컨트롤을 배치하고 menu의 DataSourceID에 해당 Data컨트롤의 ID를 지정하면 됩니다.

 

<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:Menu ID="Menu1" runat="server" DataSourceID="SiteMapDataSource1"></asp:Menu>

 

참고로 SiteMapDataSource 는 해당 프로젝트에 Web.sitemap 과 같은 사이트맵 파일이 존재해야 합니다.

 

 

 

위 예제는 SiteMapDataSource 컨트롤과 Menu컨트롤을 매핑한 결과입니다.

 

 3. XML 연동

 

XML은 XML파일을 바인딩하는 XmlDataSource 컨트롤을 통해서 연동이 가능합니다. 우선 다음글에서와 같은 내용의 books.xml파일을 생성하고

 

2016/01/18 - [Programming/ASP.NET] - [ASP.NET] XML - 1

 

XmlDataSource 컨트롤로 해당 XML파일을 연결해 보겠습니다.

 

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/books.xml">

</asp:XmlDataSource>

 

그리고 Menu의 DataSourceID를 XmlDataSource의 ID값으로 설정하면 XML내용이 완벽히 바인딩됩니다.

 

 

하지만 경우에 따라 바인딩되는 요소를 제어하고 싶은 경우가 있는데 그럴때는 Menu의 하위 요소인 DataBindings 요소를 사용하면 됩니다.

 

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/books.xml"></asp:XmlDataSource>
<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1">
    <DataBindings>
        <asp:MenuItemBinding DataMember="catalog" Text="서적관리" />
        <asp:MenuItemBinding DataMember="book" TextField="id" />
        <asp:MenuItemBinding DataMember="author" TextField="#InnerText" />
    </DataBindings>
</asp:Menu>

 

MenuItemBinding 요소는 XML의 요소와 1:1로 매핑되며 DataMember 속성으로 실제 매핑될 XML요소를 지정합니다. Text 속성은 XML요소의 내용과는 상관없이 원하는 문자열을 표시하지만 TextField속성을 사용하여 XML요소의 속성을 지정하면 해당 속성값이 문자열로 표시됩니다. 예제에서의 두번째 TextField에는 #InnerText 가 지정되었는데 이것은 속성이 아닌 XML내부의 문자열을 가져오겠다는 의미입니다.

 

 4. 내장 스타일

 

Visual Studio의 디자인 모드에서 스마트태그를 선택하면 다음과 같이 자체지원하는 스타일을 적용할 수 있습니다.

 

 

특정 스타일을 적용한뒤 aspx의 디자인페이지 소스를 보면 다음과 같은 내용이 들어가 있음을 알 수 있습니다.

 

<asp:Menu ID="Menu1" runat="server" DataSourceID="XmlDataSource1" BackColor="#FFFBD6" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#990000" StaticSubMenuIndent="10px">
    <DynamicHoverStyle BackColor="#990000" ForeColor="White" />
    <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
    <DynamicMenuStyle BackColor="#FFFBD6" />
    <DynamicSelectedStyle BackColor="#FFCC66" />
    <StaticHoverStyle BackColor="#990000" ForeColor="White" />
    <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
    <StaticSelectedStyle BackColor="#FFCC66" />
</asp:Menu>

 

여기서는 주목해야할 부분이 Menu내부의 요소들인데 Dynamic은 동적항목으로서 특정 메뉴에 마우스를 올려 나타나는 메뉴부분을 의미하며 Static은 정적항목으로 처음부터 존재하는 메뉴를 의미합니다. 예제에서는 catalog가 Static, 그 하위에 나타나는 것을 Dynamic으로 분류할 수 있습니다.

 

뒤이어 나오는 HoverStyle은 마우스를 올린경우의 스타일을, MenuItemStyle은 마우스를 올리지 않은 경우, MenuStyle은 전체적인 메뉴 스타일을 지정하며 SelectedStyle은 해당 메뉴항목을 선택했을때의 스타일을 의미합니다.

 

이 밖에 Menu항목에 화살표문자대신 이미지를 대신 보여주기 위한 동적항목 DynamicPopOoutImageUrl과 정적항목 StaticPopOutImageUrl 속성이 있고 -SeparatorImageUrl 속성으로 각 메뉴에 대한 구분이미지를 지정할 수도 있습니다. -SeparatorImageUrl에서 -부분에는 DynamicBottom과 같은 단어로 시작할 수 있는데 Dynamic은 동적항목을 Static은 정적항목을 의미하고 Bottom이나 Top을 구별해 위치에 맞는 이미지를 지정하도록 합니다.

 

또한 메뉴레이아웃 변경을 위한 Orientation도 자주 사용되는 속성중의 하나입니다.

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] 공급자 모델 - 2  (0) 2016.03.22
[ASP.NET] 공급자 모델 - 1  (0) 2016.03.17
[ASP.NET] Menu  (0) 2016.03.10
[ASP.NET] Calender  (0) 2016.03.07
[ASP.NET] DataList  (0) 2016.03.03
[ASP.NET] XML - 6  (0) 2016.02.23
0 0