C# Cheat sheet for designers

When it comes to designing for Silverlight applications, it's not just about drawing up some pictures and sending it off to be processed into a working application. Now, using Expression Blend by Microsoft, you the designer have full control over every graphical element in the project.

You still need a basic knowledge of C# to really bring your designs to life with animation and states. So I have thrown together a quick "cheat sheet" that you can quickly reference to grab bits and pieces of code to help you along the way!

So let's get into it!

First thing to know is how to add an event to an object. So select your object you wish to add the event to in Blend and in your properties tab on the right hand side panel, you should see a small square with a lightning strike in it Events properties. Pressing this shows all the events you can add to this item. 

Double clicking any of these boxes will take you into Visual Studio to start editing the code behind (and it even makes the event for you!).

Ok let's get into some code!

Wiring up story boards.

There are some simple commands to get your storyboards moving so let's start here.

StoryboardName.Begin();

StoryboardName.Stop();

StoryboardName.Pause();

StoryboardName.Resume();

 

Wiring up Media Elements

You can simply add a video or MP3 straight onto your canvas and then add buttons to interact with it (a simple media player).

MediaElementName.Play();

MediaElementName.Pause();

MediaElementName.Stop();

 

Changing states with code.

Using your Visual State Manage, you can create different states in your application which will animate accordingly. To change states use this code.

VisualStateManager.GoToState(this, "YourStateName", true);

Another great piece of code is the ability to fire another event once your storyboard or event has completed.

Create New Event on Completion.

        private void YourButton_Click(object sender, MouseButtonEventArgs e)
        {
            StoryBoardName.Begin();
            StoryBoardName.Completed += new EventHandler(StoryBoardName_Completed);
        }
        private void StoryBoardName_Completed(object sender, EventArgs e)
        {
          NextAction.Begin();
        }

 What this does is once the storyboard animation is complete, it will trigger the StoryBoardName_Complete event. This is great if you want an animation to play before something happens.

Changing XAML elements from C#

Using this basic idea, you should be able to change most of your Object Properties from your code.

TextBoxName.Text = "This is your new text";

ObjectName.Visibility = Visibility.Visible;
ObjectName.Visibility = Visibility.Collapsed;

Creating a link to another website or page

 

To do this you need to first add a new namespace to your code behind. In the first few lines of code you will notice a few using System. We need to add just under there, using System.Windows.Browser;

and from there you are able to use this code in your events

HtmlPage.Window.Navigate(new Uri("http://www.twitter.com/silverzine"), "__newWindow");

If you want to open in the current window, simply delete ,"__newWindow".

These are some of the main pieces of code I use every day in my designs and I hope they will help you and give you a good quick reference when making your next great Silverlight application.

Thanks.

About the Author

Alex Knight

Alex is a Silverlight MVP with a strong focus on the graphics and user interface side of things. He runs Xamling with Jordan Knight (@jakkaj) which specialises in creating awesome experiences for Silverlight and WPF. So it doesn't matter what platform, if its xaml he digs it. If you want to find more out about Alex, check out:
AGKDesign.twitter | xamling.net

#1 Vikram Pendse on 4.20.2009 at 3:40 PM

Very good stuff Alex !

#2 Glenn Charles on 4.21.2009 at 3:02 PM

Wow... thanks !!

#3 Doug Bornyk on 4.24.2009 at 11:43 PM

Wonderful - Wonderful - Wonderful

Thanks

#4 Hansmukh on 5.19.2009 at 1:47 PM

would like to see more like that..wow

#5 vyvy on 12.06.2009 at 7:33 AM

Thanks.. Alex.. The information is very useful..

#6 silverlight developer on 8.08.2011 at 11:25 PM

thanks a lot , Alex....

#7 text marketing on 1.06.2012 at 1:07 AM

It's so good to see the template released! I can't wait to seeing productions from its use. Do you know if the animation aspect of it could be used to make animated Christmas cards? That would be great if it could! Thanks for the info and post!

Leave a Comment