Beginning ASP.NET 2.0 With CSharp (2006) [eng]

Chapter 5

<HoverNodeStyle ForeColor=”SteelBlue” /> </asp:TreeView>

<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Century Gothic” FontSize=”10pt” ForeColor=”MidnightBlue”></asp:Label>

<asp:ImageButton SkinId=”homeImage” runat=”server” ImageUrl=”~/platypus.gif” />

This file contains definitions for four types of elements. The ASP.NET TreeView control and the ASP.NET Calendar control in this file define how each of the calendars and tree view controls on a site will appear. Notice that these controls have no ID tag — this is a feature of all skin files. Each element within a skin file appears without an ID. At run time, if you have a page that has this theme specified as the default theme, and contains a Calendar control, the calendar on the page will automatically inherit the styles defined in this file.

The other two controls in this skin file, the Label and the Image Button controls, have associated SkinIds. These attributes enable you to create sites with many different types of Label controls or Image Button controls on them, and style selected instances of those controls using the skin data provided — the link to the skin file is controlled by the SkinId property. If you want to include two Label controls on a web page and style one of them using a theme, you can use the following syntax:

<asp:Label ID=”Label1” SkinID=”textLabel” runat=”server” Text=”Label”> Styled label</asp:Label>

<asp:Label ID=”Label2” runat=”server” Text=”Label”>Unstyled label</asp:Label>

The SkinID property in this example specifies the style to apply to this control, as long as it has been defined in the theme used on that page.

In the following Try It Out, you create a simple theme in VWD and see how to define style formatting. You’ll use this theme, and one other, in the examples later in this chapter.

Try It Out

Creating Themes

1.In VWD, open up the Chapter05 web site. Right-click the C:\...\Chapter05\ folder at the top of the Solution Explorer and select Add ASP.NET Folder Theme. You will see the screen shown in Figure 5-12.

2.This creates a new folder within the application called App_Themes, and a new empty folder within App_Themes that you will have to name. Name the new folder Blue.

3.Right-click the App_Themes folder and add a new Theme folder named Red. You now have two themes available to your site, although you don’t yet have any skin files containing style definitions. This is the next part.

4.Right-click the Blue folder and select Add New Item. Select Skin File and call it BlueBits.skin, as shown in Figure 5-13.

5.Click Add. Take a look at the resulting file (see Figure 5-14) and you’ll see some default comments that overview some of the basics of skin files.

148

Styling with Themes

Figure 5-12

Figure 5-13

6.Repeat this step to add a skin file for the Red theme, called RedBits.skin.

7.For these examples, you’ll find it really handy to create a simple ASP.NET page for trying out new styles before you add controls to a skin file. Create a new web page by right-clicking the C:\...\Chapter05 root in the Solution Explorer and selecting Add New Item, selecting a Web Form, calling it SkinSource.aspx, and clicking OK.

149

Chapter 5

Figure 5-14

8.Drag two Calendar controls onto the page. These controls need some styling, and the first step is to manually add some styles to each of these controls so that the first one can be used in a blue theme, and the second can be used in a red theme. In just a moment, you’ll see the styles to use for these controls — first, Figure 5-15 shows how they will look when they are styled.

Figure 5-15

Notice that the Properties pane contains many different style options for the Calendar control. Set the properties as shown in the following tables.

150

			Styling with Themes
	Blue Skin
	Attribute	Style	Code
	Font-Names	Century Gothic	<asp:Calendar ID=”Calendar1”
			runat=”server”
	Font-Size	Small	Font-Names=”Century Gothic”
			Font-Size=”Small”>
	OtherMonthDayStyle -	Lavender	<OtherMonthDayStyle
	BackColor		BackColor=”Lavender” />
			<DayStyle
	DayStyle - ForeColor	MidnightBlue	ForeColor=”MidnightBlue” />
			<TitleStyle
		LightSteelBlue	BackColor=”LightSteelBlue” />
	TitleStyle - BackColor		</asp:Calendar>
	Red Skin
	Attribute	Style	Code
	Font-Names	Garamond	<asp:Calendar ID=”Calendar2”
	Font-Size	Medium	runat=”server”
			Font-Names=”Garamond”
	BorderColor	Chocolate	Font-Size=”Medium”
	BorderStyle	Ridge	BorderColor=”Chocolate”
			BorderStyle=”Ridge”
	BorderWidth	8px	BorderWidth=”8px”
	DayNameFormat	FirstLetter	DayNameFormat=”FirstLetter”>
			<OtherMonthDayStyle
	OtherMonthDayStyle -	BlanchedAlmond	BackColor=”BlanchedAlmond” />
	BackColor		<DayStyle ForeColor=”Maroon” />
			<TitleStyle BackColor=”Maroon”
	DayStyle - ForeColor	Maroon
			Font-Bold=”True”
	TitleStyle - BackColor	Maroon	ForeColor=”#FFFFC0” />
		True	</asp:Calendar>
	TitleStyle - Font-Bold
	TitleStyle - ForeColor	# FFFFC0

151

Chapter 5

9.Now drag a Label control onto the page and style it with a bit of color and font styling. The following code creates two labels and defines styles that should match with your blue and red themes:

<asp:Label ID=”Label1” runat=”server” Text=”Blue Styled Label” Font-Names=”century gothic” Font-Size=”10pt” ForeColor=”MidnightBlue”></asp:Label>

<asp:Label ID=”Label2” runat=”server” Font-Names=”garamond” Font-Size=”11pt” ForeColor=”DarkRed” Text=”Red Styled Label”></asp:Label>

After you finish defining styles, you are ready for the next phase.

10.Open the BlueBits.skin file in VWD and copy and paste the HTML for your blue Calendar and Label controls in the SkinSource.aspx page into the skin file. Remove the ID tags for each of them.

11.Remove the Text attribute and add a SkinID attribute to the Label control to give it a unique style reference that you can use later (see the bold text in the following listing):

<asp:Calendar runat=”server” Font-Names=”Century Gothic” Font-Size=”Small”> <OtherMonthDayStyle BackColor=”Lavender” />

<DayStyle ForeColor=”MidnightBlue” />

<TitleStyle BackColor=”LightSteelBlue” /> </asp:Calendar>

<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Century Gothic”

Font-Size=”10pt” ForeColor=”MidnightBlue”></asp:Label>

12.Repeat steps 8 and 9 for the red controls, placing them in the RedBits.skin definition file:

<asp:Calendar runat=”server” Font-Names=”Garamond” Font-Size=”Medium” BorderColor=”Chocolate” BorderStyle=”Ridge” BorderWidth=”8px” DayNameFormat=”FirstLetter”>

<OtherMonthDayStyle BackColor=”BlanchedAlmond” /> <DayStyle ForeColor=”Maroon” />

<TitleStyle BackColor=”Maroon” Font-Bold=”True” ForeColor=”#FFFFC0” /> </asp:Calendar>

<asp:Label SkinId=”textLabel” runat=”server” Font-Names=”Garamond” Font-Size=”11pt” ForeColor=”DarkRed” />

152

Styling with Themes

It’s simply a case of repeating the process for any other controls you might want to add to your skin file. In the next Try It Out, you’ll be adding a Calendar control and a Label control to pages and seeing how these themes change their appearance. You’ll also add a TreeView control and an ImageButton control, so you will need to have some more information in your skin file to render these.

13.Add the following code to the blue skin (BlueBits.skin) file to specify styling for the

TreeView and ImageButton controls:

<asp:TreeView runat=”server” ExpandDepth=”1” Font-Names=”Century Gothic” BorderColor=”LightSteelBlue” BorderStyle=”Solid” >

<SelectedNodeStyle Font-Bold=”True” ForeColor=”SteelBlue” /> <RootNodeStyle Font-Bold=”True” />

<NodeStyle ForeColor=”MidnightBlue” />

<LeafNodeStyle Font-Size=”Smaller” /> <HoverNodeStyle ForeColor=”SteelBlue” />

</asp:TreeView>

<asp:ImageButton SkinId=”homeImage” runat=”server” ImageUrl=”~/platypus.gif” />

14.Add similar code to the red skin (RedBits.skin) file to specify how to style a TreeView control:

<asp:TreeView runat=”server” ExpandDepth=”1” Font-Names=”Garamond” BorderColor=”Chocolate” BorderStyle=”Ridge”>

<SelectedNodeStyle Font-Bold=”True” ForeColor=”Chocolate” /> <RootNodeStyle Font-Bold=”True” />

<NodeStyle ForeColor=”DarkRed” />

<LeafNodeStyle Font-Size=”Smaller” /> <HoverNodeStyle ForeColor=”Chocolate” />

</asp:TreeView>

<asp:ImageButton SkinId=”homeImage” runat=”server” ImageUrl=”~/platypus.gif” />

That’s all there is to it as far as creating a theme is concerned. You should now have two themes available to your Chapter05 pages: blue and red.

153

Chapter 5

How It Works

The presence of a .skin file within an App_Themes in your web application is all that’s needed to make the themes within the folder available to your application. If you are hosting your web sites on a web server running IIS, you can alternatively place your themes within your <drive>:\Inetpub\ wwwroot\aspnet_client\<version> folder, which makes them available to all of the applications hosted on your server.

You can create more than one .skin file for each theme you work on. All you need to do is create another

.skin file within the theme’s directory and create more control definitions within this file. This may help you to split up your .skin file definitions into smaller pieces. For example, if you created a site that had two different fonts in use on it (for example, one for text and one for code snippets), you could have styles defined in two .skin files: one containing the body text styles and one containing code snippet styles.

You can also include CSS style sheets in themes and use styles generated by your friendly designer on your web site. You’ll see how this works later on. First, you need to have a go at putting these red and blue themes into action!

The .skin files that formed the themes in the previous example define some standard control styles that can be applied to any instance of a Calendar control on a page, or any instance of a Label control with the appropriate SkinID on a page. In this Try It Out, you apply these themes to some simple pages in a site. Note that the entire code for this chapter is available to download from www.wrox.com.

Try It Out

Applying Themes to Pages

1.Start by creating a Master page for the site. This is going to be a very small and simple site, but having a Master page will help you to navigate consistently around the site. Call the Master page ThemedMaster.master. Into the Master page, add a TreeView control on the left-hand side of the page, and place the ContentPlaceholder to the right by using the following HTML. Notice the style attributes on the two bold <div> elements that will help to lay out the contents of the page in two columns:

<body>

<form id=”form1” runat=”server”>

<div style=”float:left;padding-right:15px”>

<asp:TreeView ID=”TreeView1” runat=”server”> </asp:TreeView>

</div>

<div style=”float:left”>

<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> </asp:contentplaceholder>

</div>

</form>

</body>

154

Styling with Themes

2.You’ll need to create a simple web.sitemap for this example to act as the data source for the TreeView control. Right-click the Chapter05 folder and select Add New Item. Add a web.sitemap with the following code:

<?xml version=”1.0” encoding=”utf-8” ?>

<siteMap xmlns=”http://schemas.microsoft.com/AspNet/SiteMap-File-1.0” > <siteMapNode url=”ThemeDefault.aspx” title=”Default” description=”Default Page”>

<siteMapNode url=”ThemePage1.aspx” title=”Page1” description=”Themed Page 1” /> <siteMapNode url=”ThemePage2.aspx” title=”Page2” description=”Themed Page 2” /> <siteMapNode url=”Default.aspx” title=”SubPage” description=”Sub Page”>

<siteMapNode url=”StyledPage1.aspx” title=”Page1” description=”Page 1” /> <siteMapNode url=”StyledPage2.aspx” title=”Page2” description=”Page 2” />

</siteMapNode>

</siteMapNode>

</siteMap>

3.Add a SitemapDataSource to the Master page and set the DataSource for the TreeView control — just like you did in Chapter 3. You should now have the following code:

<body>

<form id=”form1” runat=”server”>

<div style=”float:left;padding-right:15px”>

<asp:TreeView ID=”TreeView1” runat=”server” DataSourceID=”SiteMapDataSource1”> </asp:TreeView>

<asp:SiteMapDataSource ID=”SiteMapDataSource1” runat=”server” /> </div>

<div style=”float:left”>

<asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> </asp:contentplaceholder>

</div>

</form>

</body>

Figure 5-16 shows what you should see in Design View.

Figure 5-16

155

Chapter 5

4.Time to build some content pages. In this example, you create three very simple pages. The first one is called ThemeDefault.aspx. Start by right-clicking the Chapter05 folder and select Add New Item. Make sure you check the box to specify a Master page for the new page and select the Master page you just created when prompted (see Figure 5-17).

Figure 5-17

5.In the Content placeholder on this new page, type in some plain text: “Default page!”, and then drag two Label controls onto the page. Set the first Label control’s text property to “Styled label”and the second Label control’s text property to “Unstyled label”. Finally, set the first Label control’s SkinID property to textLabel. This will link up the Label control to use the skinned label’s styling. Your page should look like Figure 5-18.

Figure 5-18

156

Styling with Themes

6.Specify which theme to use for this page. Let’s use the blue theme. If you are in Design View, click the gray area and view the properties for the Document. In this properties list, you should set the Theme property to Blue. Save the page and that’s the first one out of the way.

If you prefer to use Source View and work with HTML directly, your code should be similar to the following — notice the MasterPageFile and Theme attributes (in bold) on the @Page directive at the top of the page that control the layout and style for this page:

<%@ Page Language=”C#” MasterPageFile=”~/ThemedMaster.master” Title=”Untitled Page”

Theme=”Blue” %>

<asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”>

Default page!<br />

<asp:Label ID=”Label1” SkinID=”textLabel” runat=”server” Text=”Label”> Styled label</asp:Label>

<asp:Label ID=”Label2” runat=”server” Text=”Label”> Unstyled label</asp:Label>

</asp:Content>

7.Add two more pages in the same way. Call them ThemePage1.aspx and ThemePage2.aspx. Make sure that you specify the same Master page for these content pages.

8.In ThemePage1.aspx, enter the text Page 1 and add a Calendar control onto the Content area of the page. Set the page’s Theme property to Blue. The source code for this page should look like this:

<%@ Page Language=”C#” MasterPageFile=”~/ThemedMaster.master” Title=”Untitled Page” Theme=”Blue” %>

<asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”>

Page 1<br />

<asp:Calendar ID=”Calendar1” runat=”server”></asp:Calendar> </asp:Content>

9.In ThemePage2.aspx, enter the text Page 2 and add an ImageButton control to the page. Set its

SkinID property to homeImage and the PostBackUrl property to ThemeDefault.aspx. This means that if a user clicks the image, they will be taken back to the ThemeDefault.aspx page. Finally, set the page’s Theme property to Red. The source code for this page should look like this:

<%@ Page Language=”C#” MasterPageFile=”~/ThemedMaster.master” Title=”Untitled Page” Theme=”Red” %>

<asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”>

Page 2<br />

<asp:ImageButton ID=”ImageButton1” SkinID=”homeImage” runat=”server” PostBackUrl=”ThemeDefault.aspx” />

</asp:Content>

10.You’ve finished the groundwork, so it’s time to see the results of your hard work. Click the ThemeDefault.aspx in the Solution Explorer and press Ctrl+F5 to run the page (see Figure 5-19).

157