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…

Working with DateTime

I am just starting with some code:

This is the code block inside my button click event handler. So, if the button is clicked the result is:

Using the method ToShortDateString just returns the date, while ToShortTimeString returns just the actual time.

Now I am curious what result the ToLongDateString would give me:

I still get the date, but now the day is being displayed as well. Nice!

There are many possibilities how to use Date or Time strings. To give an example, what if I am not interested in today’s date, but in five days from now?

I simply add those five days in my code:

You can also add hours, minutes, etc.

I am sure you can do a lot of fun stuff with that. Let’s see. I want to know how old I am right now. How many days, how many hours, etc.

Now, besides the fact that this is a little depressing for me, the result is very cool:

Apparently I am 15364 days old, 11 hours, 38 minutes, 50 seconds, and a few milliseconds.

I definitely will continue learning as much as possible about coding, programming and more. Can’t wait to write my very own app. The idea is there… waiting to be written in code, waiting to be developed.


To be continued…


Escape Sequences

Escape characters are part of the syntax for many programming languages, data formats and communication protocols. For a given alphabet an escape character’s purpose is to start character sequences (so named escape sequences) which have to be interpreted differently from the same characters occurring alone. An escape character may not have its own meaning, so all escape sequences are of 2 or more characters.


If I run this little application I get this result:

So by using two characters (\n) I can get my message displayed in two lines.

The most interesting character is the backslash itself.

This gives me the following error message:

Apparently the backslash is just recognized when followed by a second backslash.

The C# compiler recognizes the following character escape sequences:

\ ‘       single quote, needed for character literals

\ ”      double quote, needed for string literals

\ \      backslash

\ 0      Null

\ a      Alert

\ b     Backspace

\ f      Form feed

\ n      New line

\ r       Carriage return

\ t       Horizontal tab

\ v       Vertical quote

\ u       Unicode escape sequence for character

\ U      Unicode escape sequence for surrogate pairs.

\ x       Unicode escape sequence similar to “\u” except with variable length.


To be continued…

Making code easier…

Sometimes you want to have your code more compact. Have a look at these code lines:

As you can see I have quite a few lines of code for a simple application, that throws out a message in a TextBlock, depending on my input in a TextBox. But I want to have that a little more compact, using less lines of code. So let me go ahead, comment those lines out, and write only two lines of code that allows my application to work the same way.

The green lines are commented out. That means though they still are there, they don’t do anything. They are just a comment now. You can see that something is commented out when the line starts with “//”. I just left it there, that I can compare.  I started with 10 lines of code, and replaced them with just two lines.

Now this is a very simple application. You type something in a TextBox, and after clicking a button you get a result in your TextBlock. If your code gets more complex you might want to use yet another way, the switch statement:

This code simply says, if case 1 is true, then you get this result, if case 2 is true, you get another result. You are switching cases. And if no defined case is true, then you get the default message.

Whatever way want to use is totally up to you. Just keep in mind that you want to keep your code as easy as possible.

To be continued…


%d bloggers like this: