Silverlight 1.0 - How to show a line being drawn

Recently in the official Silverlight forum, several individuals have asked how to dynamically show a line being drawn. This post contains code that will animate a line to look just like the following:



The Silverlight model makes this type of animation very simple. Everything is handled within the XAML code. The XAML code looks like the following:

<Canvas xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="200">
<Canvas.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard Name="lineStoryboard">
<DoubleAnimation Storyboard.TargetName="mainLine" Storyboard.TargetProperty="X2" From="1" To="290" Duration="0:0:8" AutoReverse="false" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>

<Line Name="mainLine" Canvas.Left="5" Canvas.Top="5" X1="0" Y1="0" X2="1" Y2="0" StrokeThickness="2" Stroke="#C0504D"></Line>

<Canvas Name="playAgainCanvas" MouseLeftButtonUp="playAgainCanvas_MouseLeftButtonUp" Canvas.Top="10" Canvas.Left="102">
<Rectangle RadiusX="5" RadiusY="5" Width="95" Height="40" Fill="#9BBB59"></Rectangle>
<TextBlock Text="Play Again" FontFamily="Verdana" Canvas.Left="5" Canvas.Top="10" FontSize="14" FontWeight="Bold" Foreground="white" />
</Canvas>
</Canvas>

The steps, which are derived from the Silverlight SDK, are as follows:

1. Create a DoubleAnimation. In our case, we are concerned about animating the line being drawn, so the following are key attributes are set:
   • StoryBoard.TargetProperty - Set to X2 because we want to make the line grow in length.
   • From - Set this value to the default X2 position.
   • To - Set this value to the end result (290)
   • Duration - Set this value to 8 seconds just to make it easy to see the line grow.


2. Place the DoubleAnimation inside of a Storyboard. We give the Storyboard a Name so that we can access it from the client-side code-behind file. This allows us to restart the animation through an event handler associated with the "Play Again" button.


3. Begin the Storyboard when the Canvas is loaded. This is accomplished through the use of a Trigger

Animation will be covered in Chapter 4 of my upcoming book "Silverlight 1.1 in Action".

I want to apologize to anyone who has been trying to access code samples over the past couple of weeks. I use StreamLoad to host my code samples and they have had some problems over the past couple of weeks. Everything seems to be working better now. If the problems persist, I will look into an alternative solution.

Project Information
Source Code:	here
Requirements:	Silverlight 1.0

Silverlight 1.1 in Action - Blend

I would like to begin this post by SINCERELY thanking everyone that posted a comment on the last post. Your comments were sincerely helpful and provided valuable insights.

After reviewing all of the comments, I wanted to provide an update with the direction that I think (no guarantees) I am going to take in regards to incorporating Blend within my "Silverlight 1.1 in Action" book.

Today, I thought of a different approach which I think is a happy medium between the two options mentioned in the last post. I believe I am going to end each chapter in the first part of the book with a section called "Blending It All Together". This section will add value by:

• Giving readers the option of learning Blend as they progress through the book
• Keeping the focus of each chapter squarely on Silverlight
• Reiterating chapter contents in an interactive, optional fashion.

I'm going to play around with this to see how it works, but I'm pretty excited about it. It feels right.

Also, somebody asked, "when will the book be available?" As of right now, I have completed approximately 6 or 7 chapters. Because the book is targeting Silverlight 1.1 the availability of the book will be dependent upon the timeline of the Silverlight 1.1 release. The book is targeting Silverlight 1.1 because, this is the version that provides the powerful .NET Framework. At the moment Silverlight 1.1 is in an Alpha state so it is difficult to squarely answer the "when" question.

I want to make sure I am providing quality content that you can use. I plan on providing Chapter 1, for free, on this blog very shortly. I know this does not squarely answer the "when" question, however, if I were to give an estimate, I would say an electronic version will be available in October with a printed version being available around the February timeframe. Please bear in mind this is only an estimate.

Disclaimer: The items discussed regarding the Silverlight in Action book are merely thoughts and will not necessarily be in the final version of the book.

Silverlight 1.1 in Action - The Book

Hello!

I am currently working on a book that will target Silverlight 1.1, called "Silverlight 1.1 in Action" and I am seeking some feedback from the community. The first half of the book will address the UI elements of Silverlight, while the second half will discuss the .NET Framework provided with Silverlight 1.1.

Because the first half of the book is squarely focussed on UI components, I thought it would be nice to add some additional value to the book by explaining how to create the various UI components using Microsoft Expression Blend. The incorporation of Blend has caused some internal debate between me and myself. However, I feel that incorporating Blend is important because it may introduce readers to a new, productive tool, while at the same time, helping readers build a vocabularly that can help to communicate with designers more effectively. Essentially, for each UI element, I want to provide the following:

• An illustration that shows the UI element that is created
• The XAML that corresponds with the illustration
• A walkthrough of how to use Blend to create the UI element.

My debate is as follows:

Option 1 - Provide all three items (the illustration, the XAML, and the walkthrough) for each UI component. Here are the advantages/disadvantages I see with this approach:

• Advantages
  • Readers do not have to flip to the back of the book for Blend content.
  • Encourages the use of Blend while reading the text
• Disadvantages
  • Takes up a lot of space. This may cause the reader to skip pages to get back into the developer focussed content.

Here is a sample of creating a MediaElement to give you a feel for how this may look in the text if Option 1 is used.

Option 2 - Provide only the illustration and the XAML in the text. Then, reference a walkthrough which is provided in an appendix, instead of in the actual text. Here are the advantages/disadvantages I see with this approach:

• Advantages
  • Keeps the reader focussed on the developer related content.
• Disadvantages
  • Treats Blend as a second-rate citizen (it's not, it is especially helpful if you are creating animations)
  • Causes the reader to flip between the actual text and an appendix, this searching can be annoying.

Here is a sample of creating a MediaElement to give you a feel for how this may look in the text if Option 2 is used:


Personally, I am leaning towards Option 2, however, I wanted to seek some feedback before going too far down this path. I look forward to your comments and thank you for your help!

WPF - Non-Rectangular Window Sweetness

Recently, I have been working on a small WPF project. It is truly an exciting project and I hope to provide more details on the specifics later. Regardless, I learned something really cool about WPF while working on this project that I felt I needed to share.

My WPF application is not an archetypal rectangular window. It has a very well designed looking interface that really makes the application look nice. One of the distinguishing features is a large image in one of the corners of Window. As an illustration, imagine the application window looking like a more complicated version of the following:



I wanted to ensure that users could only drag the window if they were clicking within the bounds of the window. This means I needed to take into account the area occupied by the green ellipse. I learned how to create non-rectangular windows through this article.

I knew I could use the Path element to define the bounds of my window. However, the following discovery pleasantly surprised me. I was able to use a graphic, which was already created by a graphic designer, and simply make the background of the image file transparent. WPF automatically created the bounds of the window tightly bound AROUND the image.

This made my life significantly simpler. I was afraid I was going to be tinkering with Paths all day long. Very sweet.

My book "Silverlight 1.1. in Action" is coming along nicely. There should be some content available for consumption soon. Thanks for reading!