The first time you add a Silverlight 3 control which is supposed to have transparent portions to let your site design shine through you might notice that those sections are black and not the anticipated transparency.
Silverlight controls by default have a window that surrounds them and is set to black. Transparency of course takes a lot of resources to accomplish and as you would guess it is turned off by default. In order to get the desired effect you need to alter an existing parameter and add an additional one.
Existing Parameter: <param name="background" value="white” />
Changed To: <param name="background" value="transparent” />
Additional Parameter: <param name="windowless" value="true” />

In a Silverlight 3 application there is by default a limitation to Page and UserControl inheritance. As ASP.net developers we are used to creating BaseControls from which multiple other controls can inherit common functionality. This of course gives us the ability to control/reduce the amount of functionality/code duplication that takes place in our application which also results in making our applications more readable and maintainable.

In order to work around this limitation I have spent hours writing and re-writing code trying to get the inheritance to work as it should within a Silverlight 3 application with no luck. It wasn’t until I saw the ‘Silverlight Class Library’ project and decided that it would be a good idea to move my controls to a separate assembly for reuse in other projects. It was while I was investigating Silverlight class libraries online that I found out we have the ability to not only use the control library to separate out our controls for reuse but we also have the ability to add to the control libraries assembly info definitions for our own Silverlight XML Namespace definitions for the controls we create in the library.

What does this mean to us when it comes to inheritance? It allows us to define our own base classes within the library which inherit from both system provided base classes Page and UserControl. Then once we add the XML Namespace to the assembly info file we can then use any of those base classes as the base classes for all other controls we create inside the library or inside our Silverlight 3 application which references the library  instead of using the system defaults. This of course allows us to place common functionality within these base classes which will then be inherited by all of our derived controls/pages.

To accomplish this you first create a ‘Silverlight Class Library’ project and add to it a new ‘Class’ file (NOT a UserControl or Page) then specify that this new class derives from either ‘UserControl’ or ‘Page’.

namespace SiteBeatControls.BasePages

{

    public class BasePage : Page

    {

    }

}

Once you have create the class you then have to do the most important step of all, this is what allows you to use the base class for inheritance. You need to add to the AssemblyInfo.cs file the following line of course updating the Namespace portion (the second string) to the namespace where your base page lives within the assembly.

[assembly: XmlnsDefinition("http://schemas.microsoft.com/client/2007", "SiteBeatControls.BasePages")]

Once you have done this you can build the assembly reference it in your project and from that point each time you add a UserControl or a Page to your Silverlight 3 project you can then modify it to use your custom base classes and now you have inheritance!

When you create a Silverlight 2.0 application the App.xaml.cs class’ OnStartup method sets the RootVisual to the page originally created at the time the solution was created. Unfortunately, the RootVisual can only be set once durring the life of the applciation.

If you leave the default application startup the way it is you will need to keep in mind that it can only be set once and are planning on separating out your UI into individual controls you will be stuck placing all your new controls in the default page and then hiding and displaying them as you need them. If you want to design you application with seperation of concerns as we all like to d0, and you want to place each of those controls in their own XAML Page you will need to alter the way in which the default application load happens.

In order to override the default look, feel and state effects of the built in Silverlight Button control you will first need to either edit the default template for the button or else create a brand new template. The quickest way to accomplish this is to use Expression Blend, which is a Microsoft Applicaiton included in the Expression Studio software suite but which can also be purchased separately.

(Creating a new Silverlight Application Project is not covered here)

Once you have added the button, to which you want to apply a custom look and feel, to the page move to the ‘Objects and Timeline’ window to the left of your screen. Select the new button by double clicking it in the object list. Right click it, go to ‘Edit Control Parts (Template)’ << see image 'Button Template Edit Menu‘>> , in the flyout menu there will be various options for editing the button’s template.  The options are as follows:

1. Edit Template –  allows you to edit the template that is currently associated with the button. Opens the template for editing in the main window.
2. Edit a Copy – allows you to edit a copy of the template currently associated with the button. Opens the ‘Create Resource’ dialog allowing you to choose where the new template resource will be located*.
3. Create Empty – allows you to create a completely empty template for the button. Opens the ‘Create Resource’ dialog allowing you to choose where the new template resource will be located*.
4. Apply Resource – allows you to apply an already existing template to the button. Opens a drop down list displaying all the existing template which can be applied to the button.

*The ‘Create Resource’ dialog <<see image 'Template Resource Location‘>> allows you to give the new template resource a unique name by which it can be referenced. It also allows you to decide if the template is local to the current page you are working in or if it should be global to the entire applicaiton. If you select local the template is created in the XAML of the page you are working in and can only be applied to buttons on that page. If you select Appliation (global) the template is then created in the App.xaml file and it is now available to all pages in the applicaiton and can be applied to any number of buttons.

Once you have decided what type of template you are going to use (existing, copy of existing, empty) and decided where it will be located in the applicaiton the workspace opens up to the template XAML and you can begin adding your custom images or vectors to the button and its various states. As you can see in the ‘Objects and Timeline’ window the buttons default states are already there and waiting with the ‘base’ (this is the state the button is in before any user interaction) already selected.

A simple button with just 2 states, base and MouseOver would contain just 2 images. With the base state selected go ahead and add two image controls and point each of them to their associated state images, making sure that the MouseOver image is the top most. once they are aligned and sized to display correctly go ahead and set the opacity value to 0% for the MouseOver image. <<see image 'Button Template Edit States‘>>

To make the MouseOver effect select the MouseOver state in the State window, it should appear white highlighted <<see image 'Button Template State Recording‘>>. You will now see the red box appear around the workspace notifying you that the state recording is on. Select the MouseOver image and set its opacity to 100% to make it visible. Save your changes and then click back to the page you were working on. Run the project (f5) and move your mouse on and off the button to see the results.