This is the second part in a series of tutorials aimed at guiding novice developers though building a "Hello World" Windows Home Server Add-In, using only freely-available tools (including Visual Studio Express).

In Part 2, we'll create the GUI for our Add-In and actually see it running in the Windows Home Server Console.

For this tutorial, we're building a Windows Home Server Add-In that detects changes to Shared Folder permissions. You can access the other parts of the tutorial, or download the code I'm using in the screenshots, using the links below.

  • Part 1: Installing and configuring your development environment
  • Part 2: Designing a GUI and initial deployment test
  • Part 3: Responding to Windows Home Server Notifications (code)
  • Part 4: Using FancyListView and comparing permissions (code)
  • Part 5: Building an installer package using WiX (code)


Step 1: Creating the project

Open Visual Studio Express, and close that annoying start page. From the File menu, choose New Project and pick our Home Server Add-In template from the list. Give your project an appropriately imaginative name (I've used My First Add-In here).

040-Open-VS 041-Create-project

Once the project has loaded, click the Save All button in the toolbar. Visual Studio will prompt you for a location; accept the defaults and click Save.

We need to change a couple of things in the project file to get the Windows Home Server Console to see our Add-In correctly. Right-click the project and choose Properties.

042-Save-project 043-Edit-project

Change the Target Framework option to .NET Framework 2.0. You'll be prompted to close and reopen the project; say yes to this.

044-Edit-project 045-Edit-project

Let's unpin the empty Toolbox toolbar to give ourselves a bit more room. Click the pin icon at the top of the Toolbox.

Open the project properties again by right-clicking the project and choosing Properties (as we did above).

Our Assembly Name needs to be HomeServerConsoleTab.<Add-In Name> (which happens to be the last two sections of the Default Namespace). All Add-Ins need to follow this naming convention, otherwise the WHS Console won't load them.

Change our Assembly Name to HomeServerConsoleTab.My_First_Add_In.

Click Assembly Information and change the version numbers to; this is most definitely not a v1.0 Add-In yet!

046-Edit-project 047-Edit-project

While you're here, check out the Resources tab. You'll see a single bitmap; that's going to be the icon displayed for our Add-In. Save and then close the properties window.



Step 2: Adding Graphical User Interface elements

Open MainTabUserControl.cs in the designer by double-clicking it in the Solution Explorer pane. Unpin Solution Explorer so we have more room, and then repin the Toolbox (hover over the Toolbox tab to open it, then click the pin icon again).

You'll see all the lovely WHS controls we added yesterday. Right-click the Windows Home Server header and choose Sort Items Alphabetically.

049-Edit-Controls 050-Edit-Controls

The view we're looking at is the design surface for the main tab of our Add-In. Drag a ConsoleToolBar from the Toolbox and drop it on to this design surface.

Click drop-down menu at the beginning of the new ConsoleToolBar and choose ConsoleToolBarButton to add a new button to the toolbar.

051-Edit-Controls 052-Edit-Controls

Right-click the new button, and change the DisplayStyle of the button to ImageAndText. Right-click the button again, and this time open Properties.

053-Edit-Controls 054-Edit-Controls

You'll get a new pane opening where Solution Explorer used to be. These settings are the properties for the currently selected item in the designer (in this case, our ConsoleToolBarButton).

Scroll down in the list of properties until you find Text, and change the value to My First Button. We also want to change the Image property, so click the picture next to Image, and then click the browse button that shows up.

Select the exclamation point image from our project's resources. Click OK, and your button's image will update.

055-Edit-Controls 056-Edit-Controls

Unpin the Properties window to clear our working area a bit.


Let's change the background colour of our tab. Click the main area of the tab to select it, then expand the Properties pane again. Scroll down to BackColor and change the colour to Transparent.

We do this so that the background colour of the WHS Console shows through later.

058-Edit-Controls 059-Edit-Controls

Time to add some other components. Drag and drop a SplitContainer into the main area of the tab. Notice how it expands to fill the available area automatically; this is called docking. Now drop a FancyListView into the area labelled Panel2.

060-Edit-Controls 061-Edit-Controls

There's a little arrow at the top of the currently selected FancyListView; click the arrow and choose Dock in Parent Container. Now click Edit Columns.

062-Edit-Controls 063-Edit-Controls

Add a few columns and click OK. Resize the columns a bit; this will be the default width of the columns when the Add-In is first opened.

064-Edit-Controls 065-Edit-Controls

Drop a ListBox into Panel1. Expand the properties pane again, and change the Dock property of the ListBox to Fill by clicking the middle button.

066-Edit-Controls 067-Edit-Controls

Save your masterpiece.



Step 3: Building and deployment

Unpin Toolbox to get it out of the way, and pin Solution Explorer open. Right-click the project and choose Build. Visual Studio runs off and compiles your Add-In into an assembly (a library, or .DLL file).

069-Build-assembly 070-Build-assembly

Visual Studio saves the compiled Add-In to a subfolder of the project.

By default, this subfolder will be My Documents\Visual Studio 2008\Projects\My First Add-In\My First Add-In\bin\Release. There are a number of files in here, but the only one we care about is HomeServerConsoleTab.My_First_Add_In.dll; this is our compiled Add-In.

Open a Remote Desktop session to your server (we did this last time; Start, Run, mstsc -console, remember?). On your server, open C:\Program Files\Windows Home Server\.

Copy and paste your compiled Add-In from your PC to the folder on your server, through your remote desktop session.

If copy/paste won't work, you forgot to check Drives under Local Resources for the Remote Desktop connection. See Step 4 of Part 1.

071-Build-assembly 072-Build-assembly

Now, open the console.

Through the magic of television, your new Add-In is loaded by the Windows Home Server Console. Click your Add-In's icon to change to your tab, and marvel at how awesome it looks.

Of course, the buttons don't do anything yet, but that's ok; you should be celebrating just getting this far!


Next time, we'll look at wiring up that button to do something interesting.

posted on Saturday, December 06, 2008 11:52 PM | Filed Under [ Windows Home Server Development ]


Site Sections

Recent Posts


Post Categories

WHS Add-In Tutorial

WHS Blogs

WHS Development