Benjamin Roux

Silverlight Expert - Silverlight Fan - MVP Client App Dev

January 2010 - Posts

The Memoirs of Sir Isaac Newton's life in Silverlight

The Royal Society just published a manuscript of William Stukeley which relates the life of Sir Isaac Newton with, of course, the famous apple which leads to the general gravitational low.

This manuscript, as well as many others, are available for consultation through a Silverlight player but also a xbap version.

[Silverlight] My Entry for the MIX 10K Coding Challenge

Hello everyone,

Today, I’d like to present you my entry for the MIX 10K Coding Challenge.

http://mix10k.visitmix.com/Uploads/140/Thumbnail.jpg

For those who don’t know this challenge, the rules are really simple. You have to submit an application whose the source code’s size is less than 10 kilobytes. The technologies allowed are Silverlight, HTML5 and Gestalt.

As you can guess, I chose Silverlight 3 and my source code’s size is 9.5 kilobytes.

So if you like my app, vote for me!

http://mix10k.visitmix.com/Entry/Details/140

Thanks!

[Silverlight] An image loading control

Re,

Ok the title is not really explicit but in this post we’re going to see an image control which display the busy pointer that we saw in my previous post, until the image be loaded.

First we create the Xaml composed with two controls: an image and the Busy pointer.

<UserControl x:Class="xxx.ImageProgress"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:xxx">
    <Grid x:Name="LayoutRoot" Background="White">
        <Image x:Name="Image" Stretch="Fill" />
        <local:BusyPointer x:Name="Buffer" />
    </Grid>
</UserControl>

And some C#

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Imaging;
 
namespace xxx
{
    public partial class ImageProgress : UserControl
    {
        public ImageProgress()
        {
            InitializeComponent();
        }
 
        public BitmapImage Source
        {
            get { return (BitmapImage)GetValue(SourceProperty); }
            set
            {
                SetValue(SourceProperty, value);
                value.DownloadProgress += new EventHandler<DownloadProgressEventArgs>(value_DownloadProgress);
                this.Image.Source = value;
                this.BeginAnimation();
            }
        }
 
        void value_DownloadProgress(object sender, DownloadProgressEventArgs e)
        {
            if (e.Progress == 100)
            {
                StopAnimation();
            }
        }
 
        // Using a DependencyProperty as the backing store for Source.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty SourceProperty =
            DependencyProperty.Register("Source", typeof(BitmapImage), typeof(ImageProgress), new PropertyMetadata(new PropertyChangedCallback(OnSourceChanged)));
 
        private static void OnSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
        {
            ImageProgress source = sender as ImageProgress;
            if (source != null) source.Source = (BitmapImage)e.NewValue;
        }
 
        private void BeginAnimation()
        {
            this.Buffer.IsBusy = true;
        }
 
        private void StopAnimation()
        {
            this.Buffer.IsBusy = false;
            this.Buffer.Visibility = Visibility.Collapsed;
        }
    }
}

I created a Dependency Property for the image’s source. When this DP is changed, I download the image from the source we I display the busy pointer. When the download is complete I stop the animation and hide it.

This control can be really useful if your application uses images from external source like Flickr or Bing.

We could check the ImageFailed event for notifying the user if there is an error.

Live sample: http://broux.developpez.com/public/SL/ImageProgress/index.html (the image is 4MB).

[Silverlight] A busy mouse pointer

Hello everyone,

Today I’m gonna present you a control which can be really useful, since you can find him in Windows: the busy mouse pointer. This control is used for notice the user than something is happening.

loading

 

The code for this control is quite simple.

#region Dependency Properties
 
public bool IsBusy
{
    get { return (bool)GetValue(IsBusyProperty); }
    set 
    { 
        SetValue(IsBusyProperty, value);
        ChangeState();
    }
}
 
// Using a DependencyProperty as the backing store for IsBusy.  This enables animation, styling, binding, etc...
public static readonly DependencyProperty IsBusyProperty =
    DependencyProperty.Register("IsBusy", typeof(bool), typeof(BusyPointer), new PropertyMetadata(new PropertyChangedCallback(OnBusyChanged)));
 
private static void OnBusyChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
    ((BusyPointer)sender).IsBusy = (bool)e.NewValue;
}
 
#endregion
 
#region Initialization
 
public BusyPointer()
{
    this.DefaultStyleKey = typeof(BusyPointer);
}
 
#endregion
 
#region Methods
 
private void ChangeState()
{
    if (IsBusy) VisualStateManager.GoToState(this, "Busied", true);
    else VisualStateManager.GoToState(this, "Normal", true);
}
 
#endregion

Juste a very simple control with a IsBusy property. When the value is true the animation starts, when it’s false it stops.

And the theme I use.

<Style TargetType="local:BusyPointer">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="local:BusyPointer">
                <Grid x:Name="LayoutRoot" Background="Transparent">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="Busied">
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="VisualElement" Storyboard.TargetProperty="(UIElement.RenderTransform).Angle" RepeatBehavior="Forever">
                                        <SplineDoubleKeyFrame KeyTime="0:0:1" Value="360" />
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Ellipse Width="25" Height="25" StrokeThickness="5.5" x:Name="VisualElement">
                        <Ellipse.Stroke>
                            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                <GradientStop Color="#FF096475" Offset="0.571"/>
                                <GradientStop Color="#FFA8FCFC" Offset="1"/>
                            </LinearGradientBrush>
                        </Ellipse.Stroke>
                        <Ellipse.RenderTransform>
                            <RotateTransform CenterX="12.5" CenterY="12.5" />
                        </Ellipse.RenderTransform>
                    </Ellipse>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

You can change the colors, the animation, the shape, everything!

Have fun!

More Posts