Creating a new XBap project
First we start off with a generic XBap project, as so:
Adding a RichTextBox
Modify the contents of Page1.xaml to contain a RichTextBox rather than a <Grid> as so:
<Page x:Class="NetNotes.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Page1"
>
<RichTextBox
Name="NotesBox"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DockPanel.Dock="Top"
Background="Beige"
VerticalScrollBarVisibility="Auto"
FontFamily="Arial" FontSize="12"
/>
</Page>
We have a functional, if extremely primitive, XBap application that can take notes. Hit F5 to try it out, you'll see an Internet Explorer window open up with a blank beige background. You can type in the window and take notes.
Clearing the ClickOnce Cache
One of the fun things about developing XBap or ClickOnce applications that you'll run into is cache versioning conflicts. Behind the scenes an XBap is simply a fancy ClickOnce application. One of the nice features ClickOnce brings is automatic installation of the application to an application cache, similar in concept to how Internet Explorer will auto-install an ActiveX control to its cache. When you're developing ClickOnce or XBap applications and generating a new version with each build, you can fill up this cache rather quickly. I've also seen times when the versioning gets out of hand and you start to see launch errors as the cache gets confused. To help with both these issues, I clear the cache before building the application using the "mage.exe" tool which is part of the ClickOnce tool set.
The full command line I add to my pre-build step (on my Vista x64 development computer) is:
"C:\Program Files (x86)\Microsoft Visual Studio 8\SDK\v2.0\Bin\mage.exe" -cc
You'll need to adjust this to suit your environment. For example, on an x86 computer using default installation locations, the command would be:
"C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin\mage.exe" -cc
Adding the Sidebar Gadget Glue
Next we need to take out XBap and wrap it in the right files to make Vista Sidebar recognize it as a gadget. This involves two steps -- first we need to create an HTML page that will host the XBap (because gadgets know how to show .HTML but not .XBAP) and second we need to create the gadget.xml manifest file. First create a file called main.html in the VS project with the contents:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {width:130; height:200; background:black; margin:0;}
</style>
</head>
<body>
<iframe width="128" height="200" src="NetNotes.xbap" />
</body>
</html>
The amount of space the XBap will have to display is controlled by this file. The width is pretty well set by the Sidebar itself, so you cannot get yourself extra space there but the height is up to you. Note that I used a slightly smaller amount of width on my iframe than on my body. This was on purpose -- it exposes the gadget controls. If I set the widths to the exact same value, the close button, settings button, etc. did not pop out from the gadget for me.
The second file we need is gadget.xml. A very simple form of this looks like:
<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Net Notes</name>
<namespace>Beavers.Jay.NetNotes</namespace>
<version>0.1.0.0</version>
<hosts>
<host name="sidebar">
<base type="HTML" apiVersion="1.0.0" src="Main.html" />
<permissions>Full</permissions>
<platform minPlatformVersion="1.0" />
</host>
</hosts>
</gadget>
Both of these files should be added to the project with Build Action: Content and Copy to Output Directory: Copy always.
Installing the Gadget
The final part is getting the Gadget running in the sidebar. This takes two steps: installing the files and adding the gadget. Normally you'd install the files in the way the Sidebar SDK tells you: package everything from the bin/release directory into a zip file, rename it .gadget, and launch the .gadget file from the Explorer or IE. This adds an additional step that slows down the development/debugging process if you're trying to rapidly turn around code, so I install the gadget via a post build step in the project, like so:
The full command line is:
xcopy /y "$(TargetDir)*.*" "$(UserProfile)\AppData\Local\Microsoft\Windows Sidebar\Gadgets\$(ProjectName).gadget\"
Adding the Gadget
Finally, we're to:
OK, that's all for today. In summary, we've:
-
Created an XBap and modified it to contain a RichTextBox that can take notes
-
Added "Gadget Glue" to the XBap to expose it to the Vista Sidebar
-
Set up build steps to auto-clean and auto-install the Gadget
