2009

Silverlight Effect Samples

Author: Steve
Posted on: 27 Mar 2009
We recently worked on new samples of Silverlight effects and ad banner done completely in Silverlight. Now these samples are published on the web site.

Silverlight platform get's mature pretty quickly, with new Silverlight3 features we are going to create stunning effect controls :-)

It's really great experience to code with Silverlight. We wecently worked on new samples of Silverlight effects and we now use banner done completely in Silverlight. You can view ad banner here: SvLite Effects.

SvLite Effects helps you create stunning animations for your web site. The library contains high level animation controls such as Carousel, SlideShow, TextEffectControl, ItemsAnimationControl and others. These controls are easy to use from xaml or procedural code.

Just take a look at the following samples showing several animation effects created with SvLite Effects. (you will need Silverlight installed to view these samples)

Please give me your feedback!!!

 

Posted in: Silverlight

Silverlight Slide Control

Author: Steve
Posted on: 05 Mar 2009
This post contains source code for a simple slide in/out control built in Silverlight.

First of all let's look at the sample below:

Move mouse over blue rectangle and control content will slide out.

Such control can preserve some visual space needed for application and it's really easy to use. Just drop it inside xaml and set GripWidth property.

Control style can be also easily changed inside generic.xaml file.

Here is the code illustrating how slide control can be used on a page:

 <local:SimpleSlideControl 
GripWidth="20" />

Below is the code for the the slide control template:

 <Style 
TargetType="local:SimpleSlideControl" >
<Setter
Property="Template" >
<Setter.Value >
<ControlTemplate
TargetType="local:SimpleSlideControl" >
<Canvas
x:Name="host" >
<StackPanel
x:Name="panel"
Orientation="Horizontal" >
<ContentControl
Content="{TemplateBinding Content}" />
<Rectangle
x:Name="grip"
Fill="Blue"
Width="{TemplateBinding GripWidth}" />
</StackPanel>
</Canvas>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

If you want to change grip style - just remove "grip" rectangle and replace it with something more appropriate.

Source

I hope it will be helpful ;)

Posted in: Silverlight

View Object Boundaries in Blend

Author: Steve
Posted on: 01 Mar 2009
There is "Show Object Boundaries" view option inside Blend (under View menu). I didn't know about it until recently. Blend sometimes doesn't show images added to a panel, in this case view object boundaries option is really helpful.

I found this option accidentally when working on carousel control.
Now I have it turned on, and find it very helpful.

See screenshots below.


First one is showing stack panel with several images added when "Show Object Boundaries" option is turned off.

Show object boundaries turned off

Second screen shows the same stack panel, but this time with "Show Object Boundaries" option turned on.

Show object boundaries turned on

It is now clear how images are arranged inside the stack panel.

Hope this helps :)

Posted in: Blend

Create Change Events for Silverlight Properties

Author: Steve
Posted on: 26 Feb 2009
This post shows how you can create property changed event if such event is missing from base class. When you need property change event for some property defined inside a base class library you may try this trick. This is specific for Silverlight and uses template bindings.

Let's consider e.g. Silverlight Control class. When you create any custom control you may need to know when Control class properties are changed.

Control class has several font related properties, however there is no property changed event for any of those properties.

If you need to get event when e.g. FontSize property is changed you can use the following trick:

Create special purpose control which will define property changed event:

public class MyEventControl : Control
{
  public static readonly DependencyProperty FontSizeSourceProperty = 
    DependencyProperty.Register("FontSizeSource", typeof(double), typeof(MyEventControl),
      new PropertyMetadata(new PropertyChangedCallback(OnPropertyChanged)));
      
  public MyEventControl()
  {
  }
  
  static void OnPropertyChanged(DependencyObject obj, DependencyPropertyChangedEventArgs e)
  {
    (obj as MyEventControl).OnPropertyChanged(e);
  }

  void OnPropertyChanged(DependencyPropertyChangedEventArgs e)
  {
    if (PropertyChanged == null)
      return;
    PropertyChanged(this, e);
  }
  
  public double FontSizeSource
  {
    get { return (double)GetValue(FontSizeSourceProperty); }
    set { SetValue(FontSizeSourceProperty, value); }
  }

  public event DependencyPropertyChangedEventHandler PropertyChanged;
}

The code above is very simple: one dependency property, which we'll use as a source, plus event.

Next you need to use this control inside style for your custom control. Style means Xaml code :)

Put it into Xaml code and bind FontSizeSource property to FontSize:

 <local:MyEventControl 
x:Name="eventControl"
FontSizeSource="{TemplateBinding FontSize}" />

That's it. Now you can obtain eventControl instance inside OnApplyTemplate method in your custom control and use PropertyChanged event:

public override void OnApplyTemplate()
{
  base.OnApplyTemplate();
  eventControl = GetTemplateChild("eventControl") as MyEventControl;
  if (eventControl != null)
    eventControl.PropertyChanged += new DependencyPropertyChangedEventHandler(ehPropertyChanged);
}

Now when control's FontSize property is changed we'll get ehPropertyChanged event handler called. Thanks to template binding we used inside xaml!

Posted in: Silverlight