Posts Tagged ‘ WPdev ’

My first Animation in Silverlight

Today I read something very cool. Even for beginners like me it is relatively easy to use animations in an application.

To see how, I quickly created a new project with just a text block. Then I am locating the TextBlock element in XAML view and replacing it with the following:

When I run the application it looks like this:

It looks nice, but it doesn’t do anything. So the next thing to do is adding a button element in XAML view right after the <Ellipse /> tag:

I now have a button called “FirstButton”, so that I can access that button from code. I also have set some properties, like the size of the button and the content.

In order to make something happen I need to add a click event handler. I do that by double clicking on my button in Design view.

Inside that event handler I add this code:

When my button is clicked, the text that is displayed on my button toggles between “Click” and “Click Again”.

When I look at the XAML now, I can see that the Click attribute was added:

Now I want to add a simple animation that squeezes the Ellipse and then expands it back out.

Now this is just a very simple example of an animation. If you want to know more about animations you can check out this Animation Overview.

To create an animation I need to do three things:

1. Create a StoryBoard (more info here)

2. Create the animation

3. Add code to start the animation.

A StoryBoard in a Silverlight application is a resource that contains a collection of animations, each of which targets a specific property of a control.

What I have to do now is replacing the existing StackPanel in XAML view with the following XAML:

This XAML creates a StackPanel.Resource that contains a StoryBoard Element. It is named FirstStoryBoard so that I can access it in code. Basically the animation changes the Width property of the Ellipse. The Storyboard.TargetName specifies the FirstEllipse object. The Storyboard.TargetProperty specifies the Width property on the Ellipse. The To property is set to 1, that means the Width will shrink from its current value of 200 down to 1. Setting the AutoReverse property to “True” will let the animation go back to the beginning and it can start again when the button is clicked again. The Duration is set to one second.

To start my animation I need to call the Begin method on the StoryBoard. I do that by adding this line of code inside my click event handler:

When I run the application now, I have a nice little animation.

Relatively easy, even for a beginner like me.


To be continued…



Creating Classes…

…and understanding them.

First I created a class called “Car”. Inside that class I typed the word “”prop”:

By using the Tab key on my keyboard twice a macro in Visual Studio, called the Code Snippet, is executed and it creates this line of code:

Actually I have to change something in that code. Visual Studio allows me to replace parts of this line with my own code. I am going to change “int” to “string” and give it a name:

This is called Code Snippet plus Auto Implemented Property Technique. I am using this technique a few more times to create four properties in my example:

Basically, what I did, was creating a blueprint for a car. So far I have just the properties of a car. So I am going to create a few methods, too:


“public” simply means that it is accessible from outside this code block. Meaning, as long as I have a reference to a car, an instance to a car, I’ll be able to access these properties and methods. They’re not private, they’re public.

Classes and objects are two different things. The class is the blueprint, the plan. An object is an instance of a class.

Let’s assume I want to add a new car to my list each time I press the button:

“myNewCar” is an instance of the car class. To access each property of the car class that I am going to set I just use the period operator and IntelliSense is showing me all the properties I can set.

Let’s move on and create a simple helper method:

Since I created and defined the car class earlier, I can now use the class name ”Car” as an input parameter.

What I want to do now is calling my helper method inside my button click event:


What I’ve learned from this little example is the following:

First of all, a class is a basic building block of C#. Almost everything in the .NET Framework is a class.

Second, classes are just the blueprints. I have to create a new instance of that blueprint, an object.

Third, classes can define properties and methods. Properties are attributes of the class, methods are actions or behaviors of that class.

Fourth, when I define a class, I actually create a custom data type.


To be continued…

Adding more controls to VS2010

Inspired by the DateTime classes I was writing about in my previous blog entry, I had the idea for an application. I immediately started working on it. First of all I needed the possibility to pick a certain date. VS2010 did not offer me such a thing, so I did some searching and eventually I asked someone who is an expert in this area. Anyway, I found out about this  Silverlight for Windows Phone Toolkit – Nov 2010, downloaded and installed it.

Now I just have to right-click the mouse inside my toolbox and select “Choose Items…”. A window pops up, where I can choose quite a few more controls.

As you can see, I selected DatePicker. After clicking the OK button, this control is added to my toolbox where I now can drag and drop it to my recent project:

To be continued…

%d bloggers like this: