I thought creating a custom pre-loader was common knowledge, but I guess I was wrong. So, what is a custom pre-loader really? Well, it is a small and lightweight Silverlight application that runs while your main Silverlight application is being downloaded to the client. Creating your own is really easy and only involves a few basic steps.

The first thing we need to do is add a Silverlight JavaScript  page to the Web project of your Silverlight application. So just right click your Web project and click add new item, then select Silverlight JScript Page.

You can name it whatever you want. I named my SplashScreen.xaml. When you click “Add” you will notice two files were created for you; a XAML file and a JavaScript file.

The XAML file is where you will create your pre-loader UI. So lets create a simple UI.

<Canvas        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"        x:Name="parentCanvas"        Width="850"        Height="600"        Background="OldLace"        >  <Canvas Canvas.Top="228.834" Canvas.Left="246.329" Width="357" Height="31.379">    <Rectangle Width="27.545" Height="1" x:Name="uxProgress" Canvas.Top="29.545" Canvas.Left="1.4">      <Rectangle.RenderTransform>        <TransformGroup>          <ScaleTransform x:Name="uxProgressBar" ScaleX="1" ScaleY="0"/>          <SkewTransform AngleX="0" AngleY="0"/>          <RotateTransform Angle="270"/>          <TranslateTransform X="0" Y="0"/>        </TransformGroup>      </Rectangle.RenderTransform>      <Rectangle.Fill>        <LinearGradientBrush EndPoint="1,0.5" StartPoint="0,0.5">          <GradientStop Color="#FFFFFFFF" Offset="1"/>          <GradientStop Color="#FFFFFFFF" Offset="0"/>          <GradientStop Color="#FF2975D0" Offset="0.28"/>          <GradientStop Color="#FF2975D0" Offset="0.72"/>        </LinearGradientBrush>      </Rectangle.Fill>    </Rectangle>

    <TextBlock x:Name="uxStatus" Height="25" Canvas.Left="125" Text="Loading..." TextWrapping="Wrap" Canvas.Top="4.16"/>

    <Path Width="356.85" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>    <Path Width="1.662" Height="29.03" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="0.48" Canvas.Left="0.2" Data="M360,168 L360,0" Opacity="0.35" />

    <Path Width="357.84" Height="1" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Top="29" Data="M0,170.5 L356.84209,170.5" Opacity="0.35"/>    <Path Width="358.85" Height="1" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Top="30" Data="M0,170.5 L356.84209,170.5" Opacity="0.25"/>    <Path Width="1.662" Height="30" Fill="#FF3A3A3A" Stretch="Fill" Stroke="#FF000000" Canvas.Left="356.01" Data="M360,168 L360,0" Opacity="0.35" Canvas.Top="-0.498"/>    <Path Width="1" Height="31" Fill="#FFA2A2A2" Stretch="Fill" Stroke="#FF000000" Canvas.Left="357.333" Data="M360,168 L360,0" Opacity="0.245" Canvas.Top="-0.498" />  </Canvas></Canvas>

I actually copied this XAML from MSDN because I was to lazy to write my own.

The JavaScript file is where you will interact with you pre-loader.  To do this there are three properties that are exposed by the Silverlight plug-in:

1. splashscreensource: The URI of a XAML page that displays while the primary package (source) is being downloaded.
2. onsourcedownloadprogresschanged: References a JavaScript event handler that will be invoked continuously while the source is being downloaded.
3. onsourcedownloadcomplete: References a JavaScript event handler that will be invoked once, when the source download is complete.

Enter Params:

You will need to add two Object Params to your page hosting the Silverlight application.

<param name="splashscreensource" value="SplashScreen.xaml"/><param name="onSourceDownloadProgressChanged" value="onSourceDownloadProgressChanged" />

The first one tells the host where to find the custom XAML file you created. The second one tells it which JavaScript function to execute when the sourceDownloadProgressChanged event fires.

So go ahead and open up your JavaScript file and delete all the code that is in there and replace it with this:

function onSourceDownloadProgressChanged(sender, eventArgs) {    sender.findName("uxStatus").Text = "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";    sender.findName("uxProgressBar").ScaleY = eventArgs.progress * 356;}

The next step is very important. Make sure you add your JavaScript file into the head tag of your hosting page.

<script type="text/javascript" src="splashscreen.js"></script>

Now in order to test this thing, you need to add something very big to your main Silverlight application, set its Build Action to Content, and set Copy to Output Directory to Copy if newer.  I added a video file that was about 100MB in size. Now run your application.

And there is our custom pre-loader.

For more information on creating custom pre-loaders visit http://msdn.microsoft.com/en-us/library/cc838130(VS.95).aspx

Download the Source

A couple of things to note; this feature requires your application to run as an Out Of Browser (OOB) with elevated permissions. Also, there is no IntelliSense for your COM objects. So make sure you have the documentation to the API you are trying to use. So lets get started.

Creating an OOB Application

First thing you need to do is crack open VS 2010 Beta 2 and create a new Silverlight project. Make sure you are targeting the .NET Framework 4 it is a Silverlight 4 application.

For this test project we don’t need to host this in a website.

The next thing you need to do is right-click on the project and choose “Properties”.  Check the “Enable Running Application out of browser”

Now click the Out of Browser Settings button and set “Require Elevated Trust when running outside the browser.”

Next add a button to the application to install our OOB application.

<Button x:Name="btnInstall" Content="Install Me" Click="btnInstall_Click" />

if (Application.Current.InstallState == InstallState.NotInstalled)

               Application.Current.Install();

Now run the application and install it by clicking the install button you just created.  When you start the installation, you will be prompted to install the app, and whether or not you want to create some shortcuts. Just say yes, we trust ourselves, sort of.

The next thing we want to do is enable debugging our OOB application.  So right click your project and chose properties –> Debug –> Installed out of browser application –> YourApplication

The final step is to add a reference to Microsoft.CSharp.dll so we can use the dynamic keyword.  Look for it in C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Libraries\Client\.  Now on to fun stuff.

Send an Email with Outlook

First create a form that will take your user input for the “To” and “Message” data, and a button to send the message.

<StackPanel>

    <StackPanel Margin="5">

        <TextBlock Text="To:" />

        <TextBox x:Name="txtTo" />

    </StackPanel>

    <StackPanel Margin="5">

        <TextBlock Text="Message" />

        <TextBox x:Name="txtMessage" Height="200" />

    </StackPanel>

    <Button x:Name="btnSend" Content="Send Message" Click="btnSend_Click" />

</StackPanel>

Then handle the button click event as follows.

private void btnSend_Click(object sender, RoutedEventArgs e)

{

    using (dynamic outlook = ComAutomationFactory.CreateObject("Outlook.Application"))

    {

        dynamic mail = outlook.CreateItem(0);

        mail.To = txtTo.Text;

        mail.Subject = "Hello, from Silverlight";

        mail.HTMLBody = txtMessage.Text;

        mail.Display();

    }

}

And you done.  Of course this will only display the message, but just call mail.Send() to actually send it; one thing to mention is to make sure you have Outlook open when you hit send or bad things will happen.

Send Data to Excel, edit it, and update Silverlight

Now this little trick is cool. We will have a data source, send it to excel for display and editing, then send the updated data back to our Silverlight application and update the UI.  Now this is a poor mans implementation for demo reasons.

First lets create our UI and populate it with data.  This is what mine looks like.

Lets code up the Launch Excel button.

bool firstTime = true;

private void LaunchExcel(object sender, RoutedEventArgs e)

{

   // create an instance of excel

   dynamic excel = ComAutomationFactory.CreateObject("Excel.Application");

   excel.Visible = true;  // make it visible to the user.

   // add a workbook to the instance 

   dynamic workbook = excel.workbooks;

   workbook.Add();

   dynamic sheet = excel.ActiveSheet; // get the active sheet

   dynamic cell = null;

   int i = 1;

   // iterate through our data source and populate the excel spreadsheet

   foreach (Entity item in CustomerList.ItemsSource)

   {

       cell = sheet.Cells[i, 1]; // row, column

       cell.Value = item.CustomerName;

       cell.ColumnWidth = 25;

       cell = sheet.Cells[i, 2];

       cell.Value = item.UnitSales;

       i++;

   }

   // add a chart

   dynamic sheetShapes = sheet.Shapes;

   sheetShapes.AddChart(-4100, 200, 2, 400, 300);

   // wire up an event handler to the Excel SheetChanged event

   if (firstTime)

   {

       excel.SheetChange += new SheetChangedDelegate(SheetChangedEventHandler);

       string sheetName = sheet.Name;

       firstTime = false;

   }

   ExcelButton.IsEnabled = true;

}

As you can see we are hooking into the Sheet changed event so we can respond to when the data is update in excel. So here is the code for that.

delegate void SheetChangedDelegate(dynamic excelSheet, dynamic rangeArgs);

// event handler for the sheet changed event

// looks at the data and creates a new items source to rebind to the datagrid

private void SheetChangedEventHandler(dynamic excelSheet, dynamic rangeArgs)

{

    dynamic sheet = excelSheet;

    string sheetName = sheet.Name;

    dynamic range = rangeArgs;

    dynamic rowValue = range.Row;

    Entity[] entities = CustomerList.ItemsSource as Entity[];

    Entity[] newEntities = new Entity[10];

    dynamic col2range = sheet.Range("B1:B10");

    for (int i = 0; i < 10; i++)

    {

        Entity newEntity = new Entity();

        newEntity.CustomerName = entities[i].CustomerName;

        newEntity.PhoneNumber = entities[i].PhoneNumber;

        dynamic item = col2range.Item(i + 1);

        newEntity.UnitSales = Convert.ToInt32(item.Value);

        newEntities[i] = newEntity;

    }

    CustomerList.ItemsSource = newEntities;

    CustomerList.SelectedIndex = Convert.ToInt32(rowValue) - 1;

    UpdateNotification.Text = "Data updated from Excel spreadsheet";

}

Now, I will click the Launch Excel button, and edit my data.

Now if I look back in my Silverlight application, I will now see that all of my data in the grid has been updated.

Lets Open a Program

Using the WScript.Shell API we can execute any command and open any program.  In this example lets open Notepad and write some text to it.  So first I am going to create a simple UI to allow a user to enter some text, then click a button to send it to Notepad.

<StackPanel>

   <TextBlock Text="Enter text to send to NotePad." />

   <TextBox x:Name="txtTextToSend" />

   <Button x:Name="txtOpenProgram" Content="Open NotePad" Click="txtOpenProgram_Click"  />

</StackPanel>

private void txtOpenProgram_Click(object sender, RoutedEventArgs e)

{

    using (dynamic shell = ComAutomationFactory.CreateObject("WScript.Shell"))

    {

        shell.Run(@"C:\windows\notepad.exe"); //you can open anything

        shell.SendKeys(txtTextToSend.Text);

    }

}

Now lets enter some text and click that button.

Now that's pretty cool. I am sure your mind is thinking of all the cool stuff you can do with this.

Well, this stuff is cool and all, but where is the really cool stuff? Wait no more!

Text to Speech

That’s right, I said it.  I am going to use the SAPI.SpVoice API to tap into the power of text to speech. So lets build a UI that will allow a user to enter some text. Heck lets let them control the rate and pitch of the speech.

<StackPanel>

    <TextBlock Text="Enter text to say: " />

    <TextBox x:Name="txtTextToSay" Margin="0,0,0,20" />

    <TextBlock Text="Pitch" />

    <Slider x:Name="sldrPitch" Minimum="-10" Maximum="10" Value="0" />

    <TextBlock Text="Rate" />

    <Slider x:Name="sldrRate" Minimum="-10" Maximum="10" Value="0" />

    <Button x:Name="btnSpeak" Content="Speak" Click="btnSpeak_Click" Margin="20" />

</StackPanel>

This should look something like this.

Lets hook up our button’s click event and make some noise.

private void btnSpeak_Click(object sender, RoutedEventArgs e)

{

   using (dynamic ISpeechVoice = ComAutomationFactory.CreateObject("SAPI.SpVoice"))

   {

       ISpeechVoice.Volume = 100;

       ISpeechVoice.Speak(string.Format("<rate speed=\"{0}\"><pitch middle=\"{1}\">{2}", Math.Round(sldrRate.Value), Math.Round(sldrPitch.Value), txtTextToSay.Text));

   }

}

If you wanted to you could create a volume control for it as well.

What? This still isn’t cool enough for you? Well I think I can satisfy your need for coolness. Enter:

Acquire an Image from your Scanner/Camera

That’s right I said it.  You can access your scanner, scan an image, and then save it to your hard drive.  Here we are using the WIA (Windows Image Acquisition). “WIA is a full-featured image manipulation component that provides end-to-end image processing capabilities.  The WIA Automation Layer makes it easy to acquire images on digital cameras, scanners, or Web cameras, and to rotate, scale, and annotate your image files.” So, enough with the talking, lets get coding.

First all I need to do it create a button that will initiate the process.

<Button x:Name="btnAquireImage" Content="Aquire Image from Scanner/Camera" Click="btnAquireImage_Click" />

Now we need to handle the button’s click event and do all the complicated code.

private void btnAquireImage_Click(object sender, RoutedEventArgs e)

{

   using (dynamic CommonDialog = ComAutomationFactory.CreateObject("WIA.CommonDialog"))

   {

       dynamic imageFile = CommonDialog.ShowAcquireImage();

       if (imageFile != null)

       {

           string filePath = string.Format("D:\\{0}.jpg", Guid.NewGuid());

           imageFile.SaveFile(filePath);

           MessageBox.Show(string.Format("Saved {0}", filePath));

       }

   }

}

So what does this actually do?  Well lets push the button and find out:

Well the first thing it does is asks me which device I want to get my images from.  Lets pick my scanner.

Well, holly crap, that’s my scanner. And I can preview and crop my image before I even get the image. Yes, that is my baby picture, it was the only thing I could find OKAY!  All my current pictures are digital.  Anyways, so once I like my settings I click scan, the scanner will do its thing and my image will be saved.

And there it is right where I told it to save.  How fun is that? I did you a favor and already coded all this up and packed it up in a nice little zip file.  So download the code, play with it, and write some kick ass applications!

I almost forgot to mention, when you open the source code, go into Properties –> Debug –> and select “Dynamically create the page”, then run the application, install it, and go back and change the option back to “Installed out of browser application ”.

Recap:

The Silverlight and WPF platforms are very similar, but they do not have binary compatibility; this means that an assembly compiled for one platform cannot execute on the other platform (Although, the story is a little different in Silverlight 4). You may want to target some or all of your application on WPF and Silverlight for a number of reasons.

Due to the fact that Silverlight and WPF are so closely related, the bulk of your application code can be shared between the two platforms. This encourages heavy use of pattern based development to isolate the logic from the presentation and maximize the separation between UI code and non-UI code.

Elements you can share:

• Presenters
• Controllers
• Models
• Services
• Unit tests
• Simple views, if the XAML used is supported by both Silverlight and WPF.

Elements that are harder to share:

• Complex views (XAML)
• Controls
• Styling
• Animation

Like always, if anyone has any questions feel free ask.

Recap:

The Silverlight and WPF platforms are very similar, but they do not have binary compatibility; this means that an assembly compiled for one platform cannot execute on the other platform (Although, the story is a little different in Silverlight 4). You may want to target some or all of your application on WPF and Silverlight for a number of reasons.

Due to the fact that Silverlight and WPF are so closely related, the bulk of your application code can be shared between the two platforms. This encourages heavy use of pattern based development to isolate the logic from the presentation and maximize the separation between UI code and non-UI code.

Elements you can share:

• Presenters
• Controllers
• Models
• Services
• Unit tests
• Simple views, if the XAML used is supported by both Silverlight and WPF.

Elements that are harder to share:

• Complex views (XAML)
• Controls
• Styling
• Animation

Like always, if anyone has any questions feel free ask.

Here is what it looks like.

Here is the source: Download the Loading Animation Source

I hope it is useful to someone besides me.

Lets say I have the following code snippet:

<StatusBar>

   <StatusBarItem>

       <TextBlock Text="{Binding Message}" />

   </StatusBarItem>

</StatusBar>

As you can see my property Message is totally misspelled.  If I were to run this application nothing would ever appear in my status bar, and I would not know why.  I didn’t get any compile errors, and my view renders perfectly in my designer, so what the hell is going on.  You might spend hours looking at your object’s property, stepping through the property changed events, or just saying XAML is a piece of crap and I give up.  Well never fear, I am about to reveal the secret to debugging your XAML.

Look in your Output Window!

Yes, the nearly always forgotten Output Window.  As you can see, if you click on the image above, it tells me that I have a binding expression path error and gives the line number where the error occurred.  So don’t spend hours stepping through code looking for a ghost.  Just check your Output Window.

To get it just follow these steps:

1. Go to http://msdn.microsoft.com/officeui
2. Click on “License the Office UI”
3. Login using you Windows Live ID. If you don’t have one you can create one for free.
4. Read and accept the Office UI License
5. Click on the WPF Ribbon download button
6. Accept the WPF Ribbon CTP License and follow the instructions to save the ribbon binaries to your computer.

Now that you have the Ribbon, you will notice there isn’t a lot of documentation.  So how do you use this thing? Well lets start with the basics.

Adding the WPF Ribbon Control:

The first thing you need to do is add a reference to the RibbonControlsLibrary to your project. Next add the namespace declaration to your XAML.

<xmlns:r="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary“ />

Now that you have that done you can add the Ribbon control like so.

<DockPanel LastChildFill="True">

     <r:Ribbon DockPanel.Dock="Top">

     </r:Ribbon>

</DockPanel> 

I personally like to place it DockPanel and dock it to the top. So this is what you should have so far. I know it is not much to look at right now, but we will fix that.

Adding the Application Menu:

Now that we have a Ribbon control we can start setting up our Application Menu. In Microsoft Word, this is the big round button in the top left corner of the application.

<r:Ribbon.ApplicationMenu>

     <r:RibbonApplicationMenu>

          <r:RibbonApplicationMenuItem />

     </r:RibbonApplicationMenu>

</r:Ribbon.ApplicationMenu>

The above XAML will produce this:

I know what your thinking. What the hell is that? How do I set my text? How do I set my icon? All I see is an empty box. Enter the RibbonCommand. RibbonCommands allow you to define a ribbon element’s UI and reuse it at will. So how do you set one up? Let me show you.

<r:Ribbon.Resources>

     <r:RibbonCommand x:Key="cmdAddNew"

                      Executed="OnAddNew_Executed"

                      LabelTitle="New Project"

                      LabelDescription="Creates an empty project." 

                      LargeImageSource="Images/Large/New32.png"

                      SmallImageSource="Images/Small/New16.png"/>

</r:Ribbon.Resources>

Now we set the Command attribute on our element.

<r:Ribbon.ApplicationMenu>

     <r:RibbonApplicationMenu>

          <r:RibbonApplicationMenuItem Command="{StaticResource cmdAddNew}"/>

     </r:RibbonApplicationMenu>

</r:Ribbon.ApplicationMenu>

And BAM! You now have your icons and text. One thing to mention is that if you do not specify an Executed event, your button will be disabled until you do so.

Adding the Quick Access Toolbar:

The Quick Access Toolbar, also known as the QAT, is the mini menu that is normally at the top of the application just to the right of the application menu and  includes a Customize Menu which end-users can use to add and remove buttons from the QAT. So how do we add one? Like so….

<r:Ribbon.QuickAccessToolBar>

     <r:RibbonQuickAccessToolBar>

          <r:RibbonButton Command="{StaticResource cmdAddNew}“ r:RibbonQuickAccessToolBar.Placement="InCustomizeMenuAndToolBar" />

     </r:RibbonQuickAccessToolBar>

</r:Ribbon.QuickAccessToolBar>

Remember that RibbonCommand we created earlier, well here it is again. Now you should have something like this:

See our new little icon at the top of the screen? Pretty isn’t it? Okay, not really, but it will be when we get finished with it.

Adding Tabs:

Okay this is really easy.

<r:RibbonTab Label="Home">

</r:RibbonTab>

Thats it! Now you should have this:

Adding Groups:

These are just as easy.

<r:RibbonGroup>

    <r:RibbonGroup.Command>

        <r:RibbonCommand LabelTitle="File" />

    </r:RibbonGroup.Command>

    <r:RibbonButton Command="{StaticResource cmdAddNew}"/>

</r:RibbonGroup>

Make sure this code snippet goes inside the Tab you created.

Also, a little caveat, or word of caution, you cannot have an empty group. If you do, then you will get a compile error. So make sure you have at least one control inside of your group definition.

Styling the WPF Ribbon:

Okay, I admit, our ribbon is still butt ugly. So lets go ahead and fix this. There are a couple of different ways we can style our ribbon. We could custom write a resource dictionary and manually set all the style attributes to get the look we want. Or we can just use a supplied Office 2007 theme by using the PopularApplicationSkins class that is included with the RibbonControlsLibrary.dll.

In code behind you would do something like this:

Resources.MergedDictionaries.Add(Microsoft.Windows.Controls.Ribbon.PopularApplicationSkins.Office2007Blue);

In XAML it would look like this:

<Window.Resources>

    <ResourceDictionary>

        <ResourceDictionary.MergedDictionaries>

            <ResourceDictionary Source="/RibbonControlsLibrary;component/Themes/Office2007Blue.xaml" />

        </ResourceDictionary.MergedDictionaries>

</ResourceDictionary>

</Window.Resources>

Either way our application is now looking good and ready to roll.

I hope this gets you going in the right direction. I plan on posting more advanced topics dealing with the ribbon in the future such as using the RibbonWindow, populating the “Most Recent Items List”, and using a Dialog Launcher. If you have any requests please feel free to ask.

Download Source