esponjasoft

Using the api of TinyUrl is really simple, here's how:

string uriToCompress = "http://blog.esponjasoft.com/2008/08/28/RealSimpleBackup.aspx";
string tinyUrlAPIFormat = "http://tinyurl.com/api-create.php?url={0}";
string requestUri = string.Format(tinyUrlAPIFormat, uriToCompress);
HttpWebRequest request = WebRequest.Create(requestUri) as HttpWebRequest;
HttpWebResponse response = null;
Uri responseUri = null;
try
{
    response = request.GetResponse() as HttpWebResponse;
    StreamReader sr = new StreamReader(response.GetResponseStream());
    responseUri = new Uri(sr.ReadToEnd());
}
catch (Exception ex)
{
    //handle exception
}

Console.WriteLine("Compressed uri: {0}", responseUri);

- Ramiro Berrelleza

In the first post of this series we talked about Color animations, one of the simplest form of Silverlight animations. In this post, we'll cover another simple animation, Value-changing animations, known as DoubleAnimations.

For brevity's sake, we will continue on the example we built on the past post (the amazing color-changing circle!). 

1. For this sample, apart from making the circle change color when the mouse enter and leaves, it will also change its size.  Since we are adding another element to the currently existing animation (the size change), it won't be necessary to add new storyboards. We will only add a couple of DoubleAnimation elements, one for the RedCircleAnimation_MouseEnter storyboard, and one for the RedCircleAnimation_MouseLeave.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60"

              Fill="Red"

              MouseEnter="RedCircle_MouseEnter"

              MouseLeave="RedCircle_MouseLeave" >

               <Ellipse.Resources>

                   <Storyboard x:Name="RedCircleAnimation_MouseEnter">

                       <ColorAnimation

                         Duration="00:00:02"

                         To="Blue"

                         Storyboard.TargetName="RedCircle"

                         Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                       <DoubleAnimation />

                   </Storyboard>

                   <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

                       <ColorAnimation

                         Duration="00:00:02"

                         To="Red"

                         Storyboard.TargetName="RedCircle"

                         Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                       <DoubleAnimation />

                   </Storyboard>

               </Ellipse.Resources>

           </Ellipse>

       </Grid>

   </UserControl>  

    

2. Once we added the DoubleAnimation elements, it's time to modify its attributes. According to MSDN a DoubleAnimation "Animates the value of a Double property between two target values using linear interpolation over a specified Duration ". In order to change the size of our figure, we will change it's Height and Width (both of which are doubles). Since every DoubleAnimation only animates the change of one value, we'll have to add another DoubleAnimation to each storyboard. This way, we'll have one DoubleAnimaton for the height change, and one DoubleAnimation for the width change.

   ...

   <Ellipse.Resources>

       <Storyboard x:Name="RedCircleAnimation_MouseEnter">

           <ColorAnimation

             Duration="00:00:02"

             To="Blue"

             Storyboard.TargetName="RedCircle"

             Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

           <DoubleAnimation

              Duration="00:00:02"

              To="80"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Height" />

           <DoubleAnimation

              Duration="00:00:02"

              To="80"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Width" />

       </Storyboard>

       <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

           <ColorAnimation

             Duration="00:00:02"

             To="Red"

             Storyboard.TargetName="RedCircle"

             Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

           <DoubleAnimation

              Duration="00:00:02"

              To="60"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Height" />

           <DoubleAnimation

              Duration="00:00:02"

              To="60"

              Storyboard.TargetName="RedCircle"

              Storyboard.TargetProperty="Width" />

       </Storyboard>

   </Ellipse.Resources>

   ...

   As you can tell, the DoubleAnimation has almost the same attributes as a ColorAnimation. The only difference is the attribute To, which instead of a color, it has a value. Other than that, it is exactly the case.

   To thing to notice is that when a storyboard has more than one element (as is the case in our example) all of the elements are executed at the same time. In this case, all of the Duration attributes have the same value, therefore, the circle will both change color and size at the same time. If I were to change the duration of any of the elements, then that animation would end at a different time (which, if used properly, could lead to interesting animations).

3. The code behind won't need any change. Calling Storyboard.Begin() will be enough to start the three elements of each storyboard.

   private void RedCircle_MouseEnter(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseEnter.Begin();

   }

    

   private void RedCircle_MouseLeave(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseLeave.Begin();

   }

4. After setting the code, we'll have a circle that not only changes color from red to blue (and back), but one that grows bigger and smaller as well.

With this we conclude with our second installment of the Silverlight Animations series. Be sure to come back for the next episode!

The complete code of the animation can be obtained here.

During a recent assignment I got to create several Silverlight  proof of concepts for different clients. One of the things that catch my eye during this assignment was how easy it is to create animations in Silverlight, and how well they look.  While I'm definitely not a master of Silverlight animations, I intend to create a series of posts reflecting what I learn, as a way to share knowledge. The first posts will explain the simplest animations, increasing its complexity over time, eventually reaching complex animation scenarios.

For the first post in the series, I will talk about the simplest type of animation, Color-changing animations.

1. First, let's create a basic shape to use as the target of our animation. A red circle should be enough.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60" Fill="Red" />

       </Grid>

   </UserControl>

2. For this sample, the circle will change colors when the mouse enters and leaves. In order for this to be controlled programmatically, we need to add the MouseEnter and MouseLeave attributes to our XAML.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60" Fill="Red"

          MouseEnter="RedCircle_MouseEnter" MouseLeave="RedCircle_MouseLeave" />

       </Grid>

   </UserControl>

3. Now it's time to add the animation. The first thing to do when creating an animation is to create an StoryBoard. In this case, we'll add two Storyboards, one for the MouseEnter animation, and one for the MouseLeave animation.

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60"

              Fill="Red"

              MouseEnter="RedCircle_MouseEnter"

              MouseLeave="RedCircle_MouseLeave" >

               <Ellipse.Resources>

                   <Storyboard x:Name="RedCircleAnimation_MouseEnter" >

                   </Storyboard>

                   <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

                   </Storyboard>

               </Ellipse.Resources>

           </Ellipse>

       </Grid>

   </UserControl>       

4. Once we created a storyboard for each of the animations we intend to have, it's time to add the animation element to  each storyboard. For this example, we'll use a ColorAnimation. A ColorAnimation, according to msdn "Animates the value of a Color property between two target values using linear interpolation over a specified duration". For our example, we will use the ColorAnimation to change the Fill color from Red to Blue (in the case of the MouseEnter event) and back (in the case of the MouseLeave event).

   <UserControl x:Class="SilverlightAnimations.Page"

      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

      Width="70" Height="70">

       <Grid x:Name="LayoutRoot" Background="White">

           <Ellipse x:Name="RedCircle" Height="60" Width="60"

              Fill="Red"

              MouseEnter="RedCircle_MouseEnter"

              MouseLeave="RedCircle_MouseLeave" >

               <Ellipse.Resources>

                   <Storyboard x:Name="RedCircleAnimation_MouseEnter" >

                       <ColorAnimation

                          Duration="00:00:02"

                          To="Blue"

                          Storyboard.TargetName="RedCircle"

                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                   </Storyboard>

                   <Storyboard x:Name="RedCircleAnimation_MouseLeave" >

                       <ColorAnimation

                          Duration="00:00:02"

                          To="Red"

                          Storyboard.TargetName="RedCircle"

                          Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" />

                   </Storyboard>

               </Ellipse.Resources>

           </Ellipse>

       </Grid>

   </UserControl>

   The first attribute to modify is Duration (which marks how long the animation will run), setting it to "00:00:02" (2 seconds). Next, we set the To attribute (which defines the result of the animation) to "Blue", the color we want the circle to have at the end of the animation. Next, we set the Storyboard.TargetName attribute (which defines the target of the animation), to "RedCircle".

   Finally, we set the Storyboard.TargetProperty attribute (which defines which property of the StoryTargetName is affected by the animation) to "(Shape.Fill).(SolidColorBrush.Color)".  This last value probably seems overly complicated, but that's the correct way to modify the fill of a shape.

   For the second storyboard we repite the same values, just changing the To attribute to "Red" (the color for the circle once the mouse leaves it).

5. Once we define the animations, all that it's left is the code to launch them. We'll go to the C# code behind, and write the RedCircle_MouseEnter and RedCircle_MouseLeaves. In each of the methods, we'll call the corresponding animation's Begin method in order to start the animation.

   private void RedCircle_MouseEnter(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseEnter.Begin();

   }

    

   private void RedCircle_MouseLeave(object sender, MouseEventArgs e)

   {

       RedCircleAnimation_MouseLeave.Begin();

   }

   Since the animation has a set duration, there is no need to invoke any methods to stop the animation. The animation itself will stop at 2 seconds (the set Duration), and the color will be changing during it.

6. After setting up the code, we'll have a circle that changes color from to red to blue and back as the mouse enters and leaves the shape.

With this, we have our first Silverlight animation completed. While it's a very simple one, animations like this are the foundation of more complex ones.

The complete code of the animation can be obtained here.

One of the first issues I've found in Silverlight is it's incapability of handling Gif images, being limited basically to jpeg and png. In most situations this isn't a problem (simply fire up Paint.NET and save the image with a different format), but in cases where the image is being downloaded dynamically (maybe from a weather service server, or similar scenarios) this won't cut it.

I recently found myself in this situation, so I had to write the following code to transform the image:

var sImage = new MemoryStream(imagePath); 

var localImage = Image.FromStream(sImage); 

localImage.Save(newImagePath, 

     System.Drawing.Imaging.ImageFormat.Jpeg); 

sImage.Close(); 

This code should also work to transform the image to every other format included in the System.Drawing.Imaging.ImageFormat class.

The code wasn't implemented on the Silverlight application, but on the webservice feeding it the information. I did it this way to have way more freedom (since the webservice was developed in ASP.NET, it had access to the full .NET framework), and to reduce the work done in the Silverlight app (this format transformation has to be done once everytime the image refreshes, instead of everytime the Silverlight app runs).