Silverlight Styles, Skinning, and Visual State Manager

Monday, July 07, 2008 1:01:44 AM (GMT Daylight Time, UTC+01:00)

For those of you that attended by recent talk at the SoCal Code Camp in San Diego, here is the code sample that I used including my one page text file that I used instead of Power Point

image

It's called Code Camp, not Power Point Camp for a reason right? (No hard feelings against anybody planning to attend or previously attended a power point related event)

 

In this sample I start off taking a basic look at some of the controls available in Silverlight 2 (Beta 2 at this point) and then move into Control Styling.  In the SilverlightCotrolStyling project you can see that basic use of "Property Bag Styling", or defining a style to set the available properties of a control.

         <StackPanel Orientation="Horizontal" Margin="20,20">
            <Button  Content="Default" Height="55" Width="160"/>
            <Canvas Width="80" ><!-- Just used to take up some space --></Canvas>
            
            <!-- This second button is styled using the "FancyButtonStyle" Static resource from app.xaml-->
            <Button Content="Fancy" Height="55" Width="160" Style="{StaticResource FancyButtonStyle}"/>
         </StackPanel>

The result gives us a styled button, that can be used consistently throughout the application.

image 

In the next example, SilverlightControlSkinning I take a look at defining my own template to completely replace the visuals of a control, in this case a button.

        <StackPanel Orientation="Horizontal" Margin="50">
            <Button  Content="Button" Height="55" Width="160"/>
            <Canvas Width="80"></Canvas>
            <!-- This button uses the template "SubmitButtonTemplate" from app.xaml -->
            <Button Template="{StaticResource SubmitButtonTemplate}" Content="Submit"/>          
        </StackPanel>

This gives us complete control over the visuals of the control, while maintaining the existing logic.

 

image

 

In the Silverlight CustomControl project, I put a number of these concepts (Including a UserControl and Custom Layout Panel) together to create a new visual appearance for a list box containing planets and their associated info.

 

image

I will be posting some more details on specifics of the projects, but wanted to get it posted for those that attended. Please feel free to contact by with any comments or questions. I'll dive into the Visual State Manager project tomorrow.

 

 

Posted in  | Comments [0]