Get Microsoft Silverlight

Monday, August 18, 2008

Silverlight Marquee Control

My previous post describes about making a Custom marquee control in WPF. Here is what I tried the same using Silverlight. Silverlight is getting really mature with its latest releases, it has come pretty close to WPF in most of the scenarios.
There is a difference with the way you create the Generic.xaml for writing the default look. You have to manually add the Generic.xaml to the project and set the build action as Resource file. See this blog for a detailed explanation of this. And the XAML code is still the same as what we wrote in WPF. The following code has to be added to the constructor so that whenever the control gets instantiated the default style will be associated with that.
public Marquee()
{
   DefaultStyleKey = typeof(Marquee);
 }
The rest of the code is pretty much the same as WPF. I have added a Duration dependency property so that end user will be able to change the speed of the animation at run time. And subscribed to the mouse enter and leave so that animation will just stoped if the mouse is on top of the control.

Live Demo Url
Source Code can be downloaded
here

Friday, August 15, 2008

WPF Custom Controls - Marquee control

WPF and Silverlight have the cool idea of 'Lookless controls' which means you can skin a control in whichever way you like. Or in other words the UI rendering logic of a WPF control lives totally in a seperate world than the control's functionality. This enables a WPF applications capaibility to dress up in totally different skins and layouts at the run time.
So let me explain the creation of a simple custom control by taking the example of a Marquee control. Hope you are well aware of the HTML Marquee tag. I am explaining the CustomControl concept of WPF with Marquee control as an example.

Step to Create a custom control with VS2008

The above step will give you the class file and Generic.xaml added to the project.

Who is your control Parent?
First I should choose the base class from which my control has to derive from. I am seeing the Marquee as a control which holds up a content element always and the content gets scrolled horizontally. So I can say that ' Marquee control has a Content' so lets write that statement in C#.
public class Marquee : ContentControl

What is the default look of your control?
Next step is to define the visual elements which builds up the default look. My idea here is to put a Canvas and make the content scroll inside the canvas using DoubleAnimation on Canvas.Left attached property. So the default template can be writen as shown in the XAML.
   <Style TargetType="{x:Type local:Marquee}">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="{x:Type local:Marquee}">
                <Canvas>
                  <ContentPresenter  x:Name="PART_Content"/>
                </Canvas>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
 
You can see from the XAML that the ContenPresenter is having a name so that we can find the reference of this control inside the control logic. So here we are making a mutual contract between the Control logic and the UI logic that we will always expect a control named PART_Content in the control template. So anybody who is goinging to re-template this would be considering this fact.
Using the following code we can find the instance of the above metioned contentpresenter

public override void OnApplyTemplate()
{
  _contentPresenter = Template.FindName("PART_Content", this) as FrameworkElement;

Marquee Logic Implementation

private void Animate()
{
   if (IsLoaded)
   {                            
     _doubleAnimation.From = this.ActualWidth;
     _doubleAnimation.To = -_contentPresenter.ActualWidth;
 
     _doubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
     _doubleAnimation.Duration = Duration;
     Storyboard.SetTargetProperty(_doubleAnimation, new PropertyPath("(Canvas.Left)"));
     _storyBoard.Children.Add(_doubleAnimation);               
 
     _storyBoard.Begin(_contentPresenter,true);                
   }
}
The animation code has taken the actualWidth of the content and animate the Canvas.Left from control's rightside to left.

Sample Application
Check out the XBAP application - LIVE DEMO running this marquee. One marquee with a TextBlock as its content and another with an ItemsControl as its content.
<lib:Marquee Duration="00:00:10" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch">       
   <TextBlock FontSize="18" FontWeight="Bold" Foreground="#FF000000" Text="Sample Marquee Text" />
</lib:Marquee>
 
<lib:Marquee Duration="00:00:10" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Stretch">
   <ItemsControl x:Name="lstPhotos" ItemsTemplate="{StaticResource someCoolTemplate}"/>
</lib:Marquee>
 

Friday, August 08, 2008

Silverlight DeepZoom + AndreaMosaic

Take a look at the Deepzoom page composed by Rob Burke using AndreaMosaic and Silverlight Deepzoom. This is such a great idea and to me this is going to be the major use of Silverlight Deepzoom technology. I am not sure that how many other software available out there which does photo mosaic.
So I just tried to do one by myself. Bellow are the steps I followed
1) Installed AndreaMosaic and just follow the steps to create a photo mosaic file. You have to play little bit around the tool to undertsand what exactly is happening.
2)Open the DeepZoom composer (Can be downloaded here) and arrange your photo mosaics in the order
3)Export the Deepzoom project to silverlight project
4)Publish that to Silverlight Streaming service

Original Photo

and the bellow deepzoom Silverlight(multiscale image) has around 1000 images in it. Check this out by drag and scroll your mouse. Or check out theStreaming version here

Friday, August 01, 2008

Podder Skinning - Another WPF Contest

For the last two weeks I was a little busy with the WPF work for the Podder Skinning Contest by Josh Smith. Josh had a great WPF application architectured to support complete UI skinning. So all I had to do was to make some controls hooked up to his Model / Commands, and give it the look - that is the beauty of XAML/WPF. There are a series of posts he had made on theCode project explaining it really well
The WPF Podcatcher Series - Part 1 (Introducing Podder)
The WPF Podcatcher Series - Part 2 (Structural Skinning)
The WPF Podcatcher Series – Part 3 (The Podcast Management Conundrum)
The competition was annouced few months back but I was not sure about my time and availability and also I was not relieved from the hang over created by the previous contest - This needs more time out of my family:). Then I heard Josh has extended the deal line to Aug 4th. This time I decided to give it a try in two weeks .



And here is the Source Code

All my ideas were around the Aero glass feature of Vista. The window will be fully resizable to any size and all the controls will resize accordingly. As far as the tools concerned I have worked almost 70% of my time with Expression blend and 20% on VS2008 and rest with Expression Graphic Design for some PNGs. For the first time I tried using expression design for creating the icons. It works really great. :)

There are still some more features to be finished, but I am leaving it for the time being. One of them is the Next and Back button not hooked up. It seems there is no ready to hook command/Property for this.