Silverlight 4 - Getting value irrespective of the animation in progress

Gone are those days where animations in Silverlight are viewed as fancy add-ons. Nowadays simple animations are becoming an essential part of the Silverlight applications. Nothing much to imagine, displaying collection as list in brief generally and then displaying the same in detail upon selecting the list item is one such scenario where animation helps us a lot in achieving it. Ok, let us drift our focus to the topic now.

In such cases when animation in progress, there are times where we require to get the value of a property when no animation is applied. When I searched for such a mechanism, I came to know the availability of GetAnimationBaseValue method which takes a dependency property as parameter. As you might guess, since it takes any dependency property as parameter, the value is returned of type Object. It is our responsibility to cast the returned Object to the respective type.

Enough with description, let us feel it in code snippet as follows.

Snippet 1

<Grid x:Name="LayoutRoot" Background="White">
    <Grid.Resources>
        <Storyboard x:Key="RectHeightStoryBoard" >
            <DoubleAnimation From="20" To="200" Duration="00:00:3" 
            Storyboard.TargetName="AnimationTestRectangle" 
            Storyboard.TargetProperty="Height"></DoubleAnimation>
        </Storyboard>
    </Grid.Resources>

    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Rectangle x:Name="AnimationTestRectangle" MouseLeftButtonDown="AnimationTestRectangle_MouseLeftButtonDown" 
               Fill="Crimson" Width="200" Height="20" Grid.ColumnSpan="2" />
    <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Vertical">
        <StackPanel >
            <TextBlock Text="Height"  Margin="10"/>
            <TextBlock Name="HeightValueTextBlock" Text=""  Margin="10"/>
        </StackPanel>
        <StackPanel >
            <TextBlock Text="AnimationBaseValue Height"  Margin="10"/>
            <TextBlock Name="AnimationBaseValueTextBlock" Text=""  Margin="10"/>
        </StackPanel>
        
        <Button Content="Check Height" Name="CheckHeightButton" Width="85" Click="CheckHeightButton_Click" />
    </StackPanel>

</Grid>

Snippet 2

public partial class GetAnimationBaseValueTest : UserControl
{
    public GetAnimationBaseValueTest()
    {
        InitializeComponent();
        
    }

    private void AnimationTestRectangle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        Storyboard rectHeightStoryBoard = (Storyboard)LayoutRoot.Resources["RectHeightStoryBoard"];
        rectHeightStoryBoard.Begin();

        ReadAnimationTestRectangleHeight();
    }

    private void CheckHeightButton_Click(object sender, RoutedEventArgs e)
    {
        ReadAnimationTestRectangleHeight();          
    }

    private void ReadAnimationTestRectangleHeight()
    {
        HeightValueTextBlock.Text = AnimationTestRectangle.Height.ToString();
        AnimationBaseValueTextBlock.Text = AnimationTestRectangle.GetAnimationBaseValue(HeightProperty).ToString();
    }
    
}

In the above snippet, I've created a storyboard targeting a rectangle for animating the height of the rectangle with some time delay. In the Click event of the CheckHeightButton, I'm calculating the height normally and then using the GetAnimationBaseValue method and displaying the values in related textblocks for verification. In the MouseLeftButtonDown event of the rectangle, I start the animation from the codebehind. Now, in order to evaluate, first click on the rectangle which triggers the animation. In due course when the animation in progress, click on the CheckHeightButton which displays the resultant values. There you can infer the use of GetAnimationBaseValue method.

Silverlight 4 - Save UIElement as image in IsolatedStorage

One of the common feature expectation in Silverlight Application is the option to save the entire page or part of the page as image. There are pretty good articles over the web to save an UIElement as an image. One such article is posted by Victor Gaudioso here.

Our example is going to deal with saving an UIElement in Silverlight as png image in isolated storage. WriteableBitmap accepts UIElement which in turn need to be encoded for which I use Joe Stegman’s PngEncoder. Following code Snippet 1,

• Generates the png stream with the help of PngEncoder
• Creates the byte[] from the png stream
• Checks for the available free space in the isolated storage and increase quota if needed
• Save the image in png format in the isolated storage.

Snippet 1

private void SaveInIsolatedStorage()
{
    string fileName = "FileCheck1.png";
    Byte[] printBuffer;
    System.Windows.Media.Imaging.WriteableBitmap wBitmap;
    
    wBitmap = new WriteableBitmap(ElGrid, null);

    wBitmap.Invalidate();

    System.IO.Stream pngStream = Encode(wBitmap); 

    printBuffer = new Byte[pngStream.Length];
    pngStream.Read(printBuffer, 0, printBuffer.Length);
    
    if (!FileExists(fileName))
    {
        using (IsolatedStorageFile isoStore = IsolatedStorageFile.GetUserStoreForApplication())
        {
            if (isoStore.AvailableFreeSpace < pngStream.Length)
            {                        
                if (isoStore.IncreaseQuotaTo(isoStore.Quota + (pngStream.Length - isoStore.AvailableFreeSpace) + 1024))
                {
                    using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(fileName, FileMode.CreateNew, isoStore))
                    {
                        stream.Write(printBuffer, 0, printBuffer.Length);
                    }
                }
            }
            else
            {
                using (IsolatedStorageFileStream stream = new IsolatedStorageFileStream(fileName, FileMode.CreateNew, isoStore))
                {
                    stream.Write(printBuffer, 0, printBuffer.Length);
                }
            }
            
        }

    }
    
}

Snippet 2
(Encode: got from an article. Download PngEncode.cs from the above specified blogs in order to execute the line "return PngEncoder.Encode(buffer, w, h);")

public static Stream Encode(WriteableBitmap wb)
{
    int w = wb.PixelWidth;
    int h = wb.PixelHeight;
    int adr;

    int rowLength = w * 4 + 1;

    byte[] buffer = new byte[rowLength * h];

    for (int y = 0; y < h; y++)
    {
        buffer[y * rowLength] = 0; // filter byte

        for (int x = 0; x < w; x++)
        {
            adr = y * rowLength + x * 4 + 3;

            int pixel = wb.Pixels[x + y * w];

            buffer[adr--] = (byte)(pixel & 0xff); pixel >>= 8;
            buffer[adr--] = (byte)(pixel & 0xff); pixel >>= 8;
            buffer[adr--] = (byte)(pixel & 0xff); pixel >>= 8;
            buffer[adr] = (byte)(pixel & 0xff);
        }
    }

    return PngEncoder.Encode(buffer, w, h);
}

In order to verify the storage manually, follow the path "C:\Users\[USER NAME]\AppData\LocalLow\Microsoft\Silverlight\is" in windows 7.

To save the image in the database, modify the Snippet 1 by removing the isolated storage related code (probably lines after 15) and make use of the printBuffer byte[] for storage.

This is just to introduce a basic idea of saving an UIElement in image format. Different encoders need to be used with respect to the format to be saved. Libraries like http://imagetools.codeplex.com/ can help you to achieve this.

References
http://blogs.msdn.com/b/jstegman/archive/2008/04/21/dynamic-image-generation-in-silverlight.aspx
http://www.windowspresentationfoundation.com/?p=406
http://imagetools.codeplex.com/