Your SlideShare is downloading. ×
Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User ...
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User ...


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Microsoft Visual C# 2005 (Part 2 of 4): ASP.NET 2.0 User Interface Elements Fritz Onion Cofounder Pluralsight LLC
  • 2. Introduction to ASP.NET 2.0 A four-part webcast series for developers new to Microsoft® ASP.NET (two deliveries: Microsoft® Visual C# and Microsoft® Visual Basic .NET) Lectures with accompanying labs Date Topic Mon, Feb. 19, 10 A.M. ASP.NET 2.0 Fundamentals (C#) Tue, Feb. 20, 10 A.M. User Interface Elements (C#) Wed, Feb. 21, 10 A.M. DataBinding and AJAX (C#) Thu, Feb. 22, 10 A.M. Configuration and Deployment (C#) Mon, Feb. 19, 1 P.M. ASP.NET 2.0 Fundamentals (VB) Tue, Feb. 20, 1 P.M. User Interface Elements (VB) Wed, Feb. 21, 1 P.M. DataBinding and AJAX (VB) Thu, Feb. 22, 1 P.M. Configuration and Deployment (VB)
  • 3. Agenda Master pages Creating templated sites Implementation Uses Themes and skins Defined Components of Uses Navigation controls TreeView Menu SiteMapPath
  • 4. Master Pages Application-wide templates now easy to define Create one 'master' page with place holders for content <!-- MasterPage.master --> <%@ master language="C#" %> <html> <body> <form runat="server"> <h1>My common header</h1> <asp:contentplaceholder id="MainContentPlaceHolder" runat="server" /> ... <!-- Page1.aspx --> <%@ page language="C#" master="~/MasterPage.master" %> <asp:content id="Content1" contentplaceholderid="MainContentPlaceHolder" runat="server"> <asp:button id="Button1" runat="server" text="Button" /> </asp:content>
  • 5. Master Pages: Designer Support Master page portion is visible but read-only Content placeholders are editable
  • 6. Master Page Implementation The MasterPage base class inherits from UserControl At run time, the master page is injected as the first control in each content page Content controls on content pages are then injected into content placeholder elements Similar to technique used by many templating systems in ASP.NET version 1.1 today
  • 7. Accessing the Master Page Since the master 'page' ends up being just another control on each page, you can interact with it like any other composite control void Page_Load(object sender, EventArgs e) { HtmlForm f = (HtmlForm)Master.FindControl("_theForm"); if (f != null) { // use f here... } }
  • 8. Strongly Typed Master Page Access Can strongly type master page access Useful when accessing properties in master Make sure same master page is always set <%@ Page Language="C#" <% MasterPageFile="~/MasterPage.master" Title="Page2" %> <%@ MasterType VirtualPath="~/MasterPage.master" %> <%
  • 9. Changing the Master Page You can set the master page programmatically, but only before the Init event fires: protected override void OnPreInit(EventArgs e) { this.MasterPageFile = "othertemplate.master"; base.OnPreInit(e); }
  • 10. Themes Support for 'skinnable' sites using themes <%@ Page Language="C#" Theme="BasicBlue" %> <%@ Page Language="C#" Theme="SmokeAndGlass" %>
  • 11. What Is a Theme? A directory under App_Themes Contains one or more .skin files .skin file contains control declarations with default attributes Contains zero or more .css files Contains zero or more subdirectories with resources <!-- --> <asp:button runat="server" borderstyle="Solid" borderwidth="2px" bordercolor="Gold" backcolor="DarkRed" /> ...
  • 12. Changing Themes You can programmatically change a theme Must be done in PreInit event handler of page protected override void OnPreInit(EventArgs e) { Page.Theme = "autumn"; base.OnPreInit(e); } You can enable themes globally in web.config <configuration> <system.web> <pages theme="autumn" /> ... You can disable themes locally <asp:TextBox EnableTheming="false" ...
  • 13. Theme Application By default, .skin properties override local properties Use @Page 'StyleSheetTheme' for the inverse Exempt controls locally from themes with EnableTheming='false' Exempt an entire page with @Page 'EnableTheming='false'
  • 14. SkinIDs Can define multiple controls of the same type in .skin Uniquely identify each control with 'SkinID' Select which control skin to apply in target control with 'SkinID' <!-- --> <asp:TextBox runat="server" backcolor="DarkRed" /> <asp:TextBox runat="server" backcolor="DarkRed" Font-StrikeOut="true" SkinID="strikeOut" />
  • 15. Navigation Controls Three new controls targeted at site navigation TreeView Hierarchical rendering with images and text Menu Both dynamic and static rendering supported SiteMapPath 'Breadcrumbs' control All three controls can use SiteMapProvider Default data source draws from web.sitemap Standard XML format for page navigation
  • 16. SiteMapProvider SiteMapDataSource uses the default SiteMapProvider Defaults to XmlSiteMapProvider implementation which reads XML data from web.sitemap file SiteMapProvider XmlSiteMapProvider web.sitemap <siteMap xmlns="" > <siteMapNode title="Home" url="~/Default.aspx" description="Go To Home"> <siteMapNode title="Departments" url="~/departments/default.aspx" description="Go To Departments page"> ...
  • 17. SiteMapPath Control Provides 'breadcrumbs' implementation Data retrieved directly from SiteMapProvider (no need to explicitly connect to data source) <asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Names="Verdana" Font-Size="0.8em" PathSeparator=" : "> <PathSeparatorStyle Font-Bold="True" ForeColor="#990000" /> <CurrentNodeStyle ForeColor="#333333" /> <NodeStyle Font-Bold="True" ForeColor="#990000" /> <RootNodeStyle Font-Bold="True" ForeColor="#FF8000" /> </asp:SiteMapPath> <siteMap xmlns="" > <siteMapNode title="Home" url="~/Default.aspx" description="Go To Home"> <siteMapNode title="Departments" url="~/departments/default.aspx" description="Go To Departments page"> ...
  • 18. TreeView Control Truly hierarchical tree control Can be bound to any XML data source (more later) Convenient to bind to SiteMapDataSource to provide tree- navigation for a site <asp:TreeView ID="TreeView1" runat="server" DataSourceID="siteMapDataSource" ImageSet="Simple" NodeIndent="10"> <ParentNodeStyle Font-Bold="False" /> <SelectedNodeStyle Font-Underline="True"... /> <NodeStyle Font-Names="Verdana" ... /> <HoverNodeStyle Font-Underline="True" .../> </asp:TreeView> <asp:SiteMapDataSource ID="siteMapDataSource" runat="server" />
  • 19. Menu Control Dynamic or static menu rendering Can be driven from any XML data source Most common to map onto SiteMapDataSource <asp:Menu ID="Menu1" runat="server" BackColor="#FFFBD6" DataSourceID="siteMapDataSource" MaximumDynamicDisplayLevels="10" StaticSubMenuIndent="10px" /> <asp:SiteMapDataSource ID="siteMapDataSource" runat="server" />
  • 20. Summary Master pages Standard implementation of templated pages Designer/runtime support Themes and skins Collection of pluggable UI elements Unify images, .css, and control declarations New navigation controls Standard implementations of Menu, Tree, and SiteMapPath Flexible, provider driven (or data source driven) UI is extremely customizable
  • 21. Lab Work Lab 2 builds a site using the UI elements presented in this module Create a new site with a master page Define a theme with a style sheet and a skin Create navigation with a sitemap, menu, and sitemappath
  • 22. Questions and Answers Submit text questions using the “Ask” button. Don’t forget to fill out the survey. For upcoming and previously live webcasts: Got webcast content ideas? Contact us at: Today's webcast was presented using Microsoft® Office Live Meeting. Get a free 14-day trial by visiting: