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

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

Fritz OnionCofounder Pluralsight LLChttp://pluralsight.com/fritz/

http://pluralsight.com/fritz/

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)

Agenda

Master pages

Creating templated sites

Implementation

Uses

Themes and skins

Defined

Components of

Uses

Navigation controls

TreeView

Menu

SiteMapPath

Master Pages

Application-wide templates now easy to define

Create one 'master' page with place holders for content

<%@ master language="C#" %><html><body><form runat="server"><h1>My common header</h1><asp:contentplaceholder id="MainContentPlaceHolder"

runat="server" />...

<%@ page language="C#" master="~/MasterPage.master" %><asp:content id="Content1"

contentplaceholderid="MainContentPlaceHolder"runat="server">

<asp:button id="Button1" runat="server" text="Button" /></asp:content>

Master Pages: Designer Support

Master page

portion is visible

but read-only

Content

placeholders

are editable

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

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...}

}

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" %>

<%

<% %>

%>

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);}

Themes

Support for 'skinnable' sites using themes

<%@ Page Language="C#" Theme="SmokeAndGlass" %>

<%@ Page Language="C#" Theme="BasicBlue" %>

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" />

...

Changing Themes

You can programmatically change a themeMust 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" ...

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'

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" />

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

SiteMapProvider

SiteMapDataSource uses the default SiteMapProvider

Defaults to XmlSiteMapProvider implementation which reads XML data from web.sitemap file

<siteMap

xmlns="http://schemas.microsoft.com/..." >

<siteMapNode title="Home" url="~/Default.aspx" description="Go To Home">

<siteMapNode title="Departments" url="~/departments/default.aspx"

description="Go To Departments page"> ...

SiteMapProvider

XmlSiteMapProviderweb.sitemap

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="http://schemas.microsoft.com/..." >

<siteMapNode title="Home" url="~/Default.aspx" description="Go To Home">

<siteMapNode title="Departments" url="~/departments/default.aspx"

description="Go To Departments page"> ...

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" />

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" />

Summary

Master pagesStandard implementation of templated pages

Designer/runtime support

Themes and skinsCollection of pluggable UI elements

Unify images, .css, and control declarations

New navigation controlsStandard implementations of Menu, Tree, and SiteMapPath

Flexible, provider driven (or data source driven)

UI is extremely customizable

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

Questions and Answers

Submit text questions using the “Ask” button.

Don’t forget to fill out the survey.

For upcoming and previously live webcasts: www.microsoft.com/webcasts

Got webcast content ideas? Contact us at: http://go.microsoft.com/fwlink/?LinkId=41781

Today's webcast was presented using Microsoft®

Office Live Meeting. Get a free 14-day trial by

visiting: www.microsoft.com/presentlive

http://www.microsoft.com/webcasts

http://go.microsoft.com/fwlink/?LinkId=41781

http://www.microsoft.com/presentlive

Documents

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