Article: Creating a New Silverlight 2 Control for SharePoint 2007
This article is exerpted from chapter 5 "Custom Web Parts" of the Wrox book Professional Microsoft SharePoint 2007 Development Using Microsoft Silverlight 2 by Steve Fox and Paul Stubbs and is reused by permission of the publisher. This may not be reused without publisher permission
Creating a Silverlight Control
The first thing you need to do is create a simple Silverlight control. In this case, you will create a very simple control that has a textbox and a button. You could also use one of the controls you created in one of the previous chapters or download one of the samples from http://silverlight.net/. The example uses the most basic control possible so that you can focus on the interactions with SharePoint. In this case, we will not get into the XAML very much but focus on using the visual designers or Visual Studio and Expression Blend to do most of the work.
Creating a New Silverlight Project
Start by opening Visual Studio 2008 Professional with WssVSe. SharePoint development requires that you develop directly on the server. Windows Server 2008 has UAC security on by default. This means that in order to deploy your solution to the SharePoint site, you will need to run Visual Studio as an Administrator.
1. From the Start menu, right-click on the Microsoft Visual Studio 2008 program icon, choose “Run as Administrator,” and click Continue at the Confirmation prompt.
2. You want to build a blank solution so that we can add additional projects throughout this chapter. Choose FileØNew Project to open the New Project dialog.
3. Select the Blank Solution template from the Other Project Types–Visual Studio Solutions node.
4. Name the solution CustomWebParts, and set the location to be C:\Book. You can choose another location and name if you wish, but you will need to change these through the code examples as well. Now that you have a blank solution, you can add the Silverlight project.
5. From the solutions Context menu, choose AddØNew Project. Select the Silverlight Application template from the Silverlight node. Set the project name to SilverlightControl, and leave the location set at its default, C:\Book\CustomWebParts.
6. When you create a new Silverlight application, the template will prompt you to choose the type of host to run the application in. There are two choices: Add a new web site project, or dynamically create an HTML test page. In this case, we want to keep things simple, so choose the second option, “Automatically generate a test page to host Silverlight at build time.”When you build and run the application, the project system will generate an HTML page called TestPage.html in the build output location, in this case, bin\debug, that will be used to host the Silverlight control. You are going to use SharePoint Web Parts to host your control, so this option is good.
Editing the New Control
Now you have created a new Silverlight project and are ready to edit the control. You will use the Expression Blend tool to edit the design of the page. For very simple cases, you could edit the XAML directly in the tool, but as designs get larger and more complex, this is not practical, and using a tool like Expression Blend is the way to go. So even though this is a very simple example that could be created by hand, it is best to learn the tool and get in the habit of letting the tools do the hard work. Open the Page.xaml file in Expression Blend by choosing “Open in Expression Blend” from the Page.xaml Context menu. At this point, if you have been following along exactly, you will be prompted to save the project first: Choose OK to save. Expression Blend opens and loads the SilverlightControl project and displays the page.xaml in the design surface. Now follow these steps:
1. The first thing you want to do is set the size of the control. Select the UserControl node on the left in the Objects and Timeline panel.
2. Now select the Properties tab on the right. In the Layout panel, set the Width property equal to 300 and the Height property equal to 200.
3. Even though this is a very simple control, Blend makes it very easy to add a little style. For example, you can set the background to a nice gradient color. To do so:
3a. Select the LayoutRoot node on the left in the Objects and Timeline panel, select the Properties tab on the right, and click the Gradient brush tab under the Brushes panel. It is the third one after No Brush and Solid Color Brush, located just under the OpacityMask property.
3b. You can play around with these settings to create some cool effects. In this case, the default is a black-to-white gradient. Near the bottom of the Brushes panel is a gradient bar that shows you a sample of the gradient. There are two stop tags under the bar. You can drag these around and change the colors as well. We actually just dragged the left one to the right and the right one to the left to swap the gradient to be a white-to-black one.
3c. You can also change the direction of the gradient. By default, it is horizontal; you can change this to be diagonal. Click on the Brush Transform tool on the left side in the toolbox. This tool allows you to change the direction and other aspects of the gradient.
After selecting the Brush Transform, you will see a faint blue arrow on the design surface. Drag the ends of the arrow around to create a diagonal gradient. Feel free at this point to explore other aspects of Expression Blend.
4. As mentioned before, you are ready to add the Text Box and Button to the control. Just like with Windows Forms development, there are controls in the toolbox for each of these. Select the TextBox control in the toolbox on the left—it is near the bottom. Now click and drag on the design surface to “draw” the toolbox. Repeat the same process for the Button. When you are finished you should have something that resembles Figure 5-1.
5. Save the control by pressing Ctrl-S or FileØSave from the main menu.
6. You are done with Blend for now, so close Blend by clicking on the x in the upper-right corner.
7. Switch focus back to Visual Studio. The first thing you see is that Visual Studio is prompting you to reload the Page.xaml file. It has detected that you changed the file using Blend, so it wants to make sure that this is what you intended to do. Click Yes to reload. Even though you said yes to reload, the Visual Studio XAML Designer is not showing you the updated design. You need to click on the yellow warning bar at the top of the Design window to refresh the visual designer. Although the recommended way is to use the visual designers, there may be times when it is faster to just edit the XAML directly. For example, change the text displayed in the textbox. In the XAML Editor of Visual Studio, find the TextBox node near the bottom of the code, and set the Text property equal to “Simple Silverlight Control.” Listing 5-1 is the complete XAML if you simply want to quickly re-create the Silverlight control.Listing 5-1: The XAML for the simple Silverlight control.
<LinearGradientBrush EndPoint="1,1" StartPoint="0,0">
<GradientStop Color="#FF070707" Offset="1"/>
<TextBox Height="54" Margin="8,8,8,0"
Text="NEW Simple Silverlight Control"
<Button Height="63" HorizontalAlignment="Stretch"
You will see that the Designer updates as you type, and you should see something similar to Figure 5-2 when you are finished.
8. You can now build and run the Silverlight control. Press [F5] to launch the test page to verify that the control is working. Close Internet Explorer when you are finished testing your control.
If you examine the build output location, in this case bin\debug, you will see the SilverlightControl.xap package file.
Last edited by jminatel; February 11th, 2009 at 10:21 PM.