Adding Silverlight 2.0 to Community Server Blogs
Silverlight 2.0 is going to change the web so much. I've just completed an experimental blog theme for Community Server that uses a Silverlight masthead. You can view the finished result over at Grace's blog.
The Silverlight masthead was created using Expression Design, Expression Blend 2.5 June CTP and Visual Studio 2008 with the Silverlight 2.0 beta 2 tools. The theme is based on the Paperclip theme with a few minor changes to the CSS and some changes to theme.Master to add the Silverlight control. At the moment the Silverlight content is hard-coded into the theme, it would be nice to make this dynamic so the user can change it from the control panel.
First, in the top of the theme.Master file, we need to register the Silverlight assembly.
<%@ Master Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="CommunityServer.Components" %>
<%@ Import Namespace="CommunityServer.Blogs.Components" %>
<%@ Register TagPrefix="CSUserControl" TagName="UserWelcome" Src="~/utility/usercontrols/UserWelcome.ascx" %>
<%@ Register Assembly="System.Web.Silverlight"
Namespace="System.Web.UI.SilverlightControls"
TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd">
...then in the body section, we need a ScriptManager and the Silverlight control itself. Note that I've used the Windowless mode so that HTML elements can appear on top of the Silverlight control.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<TWC:Modal runat="server" CssClasses="Modal" TitleCssClasses="ModalTitle" CloseCssClasses="ModalClose" ContentCssClasses="ModalContent" FooterCssClasses="ModalFooter" ResizeCssClasses="ModalResize" MaskCssClasses="ModalMask" LoadingUrl="~/utility/loading.htm" ID="Modal1" />
<div id="masthead">
<asp:Silverlight ID="HeaderXaml" runat="server" Source="~/ClientBin/TiGra.Silverlight.LABSBlog.xap"
Version="2.0" Width="1028px" Height="221px" Windowless="true" />
<div id="userArea">
I had to modify the CSS styles for #userArea and #title because the Silverlight control pushed them down the page, so I moved them back to the correct position by giving them relative positioning and a negative top offset. This is done in the file style.css, like so:
#title
{
position: relative;
left: 63px;
top: -192px;
width: 151px;
height: 74px;
overflow: hidden;
text-align: center;
font-size: 11px;
/*border: solid 1px #ff0000;*/
}
#userArea
{
float: right;
margin-top: 16px;
padding-right: 6px;
position: relative;
top: -218px;
}
Community Server currently targets .NET Framework 2.0 but Silverlight 2.0 requires .NET Framework 3.5, so it is necessary to obtain a copy of the Community Server SDK and upgrade it to target .NET 3.5. Upon opening the solution in Visual Studio 2008, it'll prompt to upgrade to .NET 3.5. From there, make a copy of the Paperclip theme (/Themes/Blogs/Paperclip) and edit as above. Copy your ClientBin folder, which contains your Silverlight application packaged in a .XAP file, from your Silverlight project into the Community Server web site (I created my ClientBin folder in the root folder).
Build the solution, then right-click the Web project and publish it to your web server, as shown in the screen shot. If your web application pool was being shared with other applications, you'll need to move your Community Server site to its own App Pool, as ASP.NET cannot run different versions in the same App Pool. I use an AppPool dedicated to Community Server so that avoids any such conflict. Now remember to add the application/x-silverlight XAP mime type to your IIS web server or it'll refuse to serve up Silverlight applications.