SilverlightShow: Silverlight Community

Tip: Using Blur and DropShadow effects in Silverlight 3

editorial@silverlightshow.net ( Nikolay Raychev) — Thu, 02 Apr 2009 07:35:00 +0200

Silverlight 3 comes with two built in Pixel Shaders:

We have the following image:

We want to blur it:

    
            <Image Width="300"   
        
                Source="http://terraristic.net/photos/  
        
                Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"> 
        
                <Image.Effect>
        
                    <BlurEffect Radius="8">BlurEffect>
        
                Image.Effect>
        
            Image>

We have the following result:

Note the Radius parameter. The bigger the radius is, the more blurred the picture is.

Now let's make a shadowed picture:

    
            <Image Width="300"   
        
                Source="http://terraristic.net/photos/  
        
                Brachypelma_albiceps/Brachypelma_albiceps_1.jpg"> 
        
                <Image.Effect>
        
                    <DropShadowEffect BlurRadius="30" Color="Gray"
        
                        Direction="-45" Opacity="0.5" ShadowDepth="20">
        
                    DropShadowEffect>
        
                Image.Effect> 
        
            Image>

The result:

The DropShadow effect has several parameters:

BlurRadius - the bigger the radius is, the more blurred the shadow is.
Color - the shadow color.
Direction - an angle specifying the direction of the shadow. If you set it to zero the shadow will fall on the right side.
Opacity - the shadow opacity.
ShadowDepth - it specifies how far (deep) from the picture the shadow will appear.

You can define your own Pixel Shaders using a special language called HLSL. But this is beyond the scope of this tip.

That's it!

Tip: Enable multiple selection in Silverlight 3 ListBox

editorial@silverlightshow.net ( Nikolay Raychev) — Thu, 02 Apr 2009 07:32:00 +0200

In Silverlight 3 you can make multiple selections in a ListBox. You just need to set the SelectionMode parameter:

    
            <ListBox Margin="5" x:Name="lbTasks"   
        
                ItemsSource="{Binding Tasks, ElementName=MainPageView}"   
        
                SelectionMode="Multiple">  
        
                <ListBox.ItemTemplate> 
        
                    <DataTemplate> 
        
                        <StackPanel Orientation="Horizontal" Margin="2">  
        
                            <TextBlock FontWeight="Bold" FontSize="13"   
        
                                Foreground="#ff006882" Text="{Binding Text}">  
        
                            TextBlock> 
        
                        StackPanel> 
        
                    DataTemplate> 
        
                ListBox.ItemTemplate> 
        
            ListBox>

You have 3 options for the SelectionMode:

Single - you can select only one item.
Multiple - you can select multiple items by selecting one item, holding Ctrl or Shift key and pressing another item.
Extended - you can again select multiple items but the Shift key acts differently. With the help of the Shift key you can select items range by just pressing one item, holding Shift and pressing another one.

That's it!

Tip: How to style the caret in Silverlight 3

editorial@silverlightshow.net ( Nikolay Raychev) — Wed, 25 Mar 2009 10:46:00 +0200

It's very easy to style the caret in Silverlight 3. Look at that huge TextBox with a caret in the rainbow colors:

You just need to set the CaretBrush property:

    
            <TextBox FontSize="50" Width="100" Height="80">  
        
                <TextBox.RenderTransform> 
        
                    <ScaleTransform ScaleX="6" ScaleY="1"/>  
        
                TextBox.RenderTransform> 
        
                <TextBox.CaretBrush>
        
                    <LinearGradientBrush x:Name="backgroundLinearGradientBrush"
        
                        MappingMode="RelativeToBoundingBox"
        
                            StartPoint="0,0" EndPoint="0,1">
        
                        <LinearGradientBrush.GradientStops>
        
                            <GradientStop Color="Red" Offset="0" />
        
                            <GradientStop Color="Orange" Offset="0.167" />
        
                            <GradientStop Color="Yellow" Offset="0.333" />
        
                            <GradientStop Color="Green" Offset="0.5"/> 
        
                            <GradientStop Color="Blue" Offset="0.667" />
        
                            <GradientStop Color="Indigo" Offset="0.833" />
        
                            <GradientStop Color="Violet" Offset="1" />
        
                        LinearGradientBrush.GradientStops>
        
                    LinearGradientBrush>
        
                TextBox.CaretBrush> 
        
            TextBox>

You can use any Silverlight supported Brush.

That's it!

Tip: XAML Element Binding

editorial@silverlightshow.net ( Emil Stoychev) — Tue, 24 Mar 2009 00:06:00 +0200

Silverlight 3 enables property binding to CLR objects and other UI components via XAML – UI to UI binding. It is useful in a lot of scenarios and saves time for both developers and designers.

Example

Download source code

Syntax

{Binding Value, ElementName=MySlider}

where Value is property of a CLR object and MySlider is the name of this object

Hope that helps!

That's it!

Tip: Cascading Styles in Silverlight 3

editorial@silverlightshow.net ( Emil Stoychev) — Mon, 23 Mar 2009 10:23:00 +0200

Like in CSS you can now cascade styles in Silverlight 3 too. You can append and/or override values by basing one style on another. In this way you can built a powerful and reusable set of styles to apply in your Silverlight applications.

Syntax

Style cascading is accomplished by using the new BasedOn attribute of the Style class.

1:

5:

9:

Here we have a base style Headline that targets TextBlock elements and defines values for FontFamily and FontSize. Next we have another style ImportantHeadline which again targets TextBlock elements. Note here the additional attribute BasedOn(Line 6). By using it we are basing this style on the style defined by its value – Headline in this example. Here we set the Foreground property of the TextBlock to be Red.

When we use the ImportantHeadline style on a TextBlock we are going to have both of the values set in the Headline style(FontFamily, FontSize) and those set in ImportantHeadline(Foreground).

Then another style HomePageHeadline is defined. It is also based on the Headline style, but this time it overrides the base value set for FontSize. Now when we use the HomePageHeadline on a TextBlock we can see that it appears with FontFamily Verdana and FontSize 18.

The results are as follows:

Download Source Code

Note: you can cascade styles on more than one level. Following the example above you can base another style on the HomePageHeadline and you will have 3 levels of cascading.

Hope that helps!

That's it!

Tip: Detecting Network Change in Silverllight 3 Application

editorial@silverlightshow.net ( Nikolay Raychev) — Thu, 19 Mar 2009 11:15:00 +0200

In Silverlight 3 you are able to check if an internet connection is present. You can also detect network changes.

See also:
Silverlight 3 as a Desktop Application (Out-of-Browser Applications)

Network availability checking:

    
            if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())  
        
            {  
        
                this.InitTasks();  
        
            }

Network change detection:

    
            NetworkChange.NetworkAddressChanged += new 
        
            NetworkAddressChangedEventHandler(NetworkChangedCallback);

    
            private void NetworkChangedCallback(object sender, EventArgs e)  
        
            {  
        
                if (System.Net.NetworkInformation.NetworkInterface.GetIsNetworkAvailable())  
        
                {  
        
                    this.InitTasks();  
        
                }  
        
            }

Demo

As an example I created the following demo:

This is a simple tasks list. You can add or delete tasks. The tasks are saved on the server and the application is using WCF Service to connect to the server. Nothing special. But if you save the application for offline use you can use it even if you don't have internet connection. I'm using the isolated storage to keep copy of the data on the client and the application is working with the local copy when there is no connection. It synchronizes automatically whenever the connection comes back.

Download Source

That's it!

Tip: How to handle the MouseLeftButtonDown and MouseLeftButtonUp events of the Button control?

editorial@silverlightshow.net ( Martin Mihaylov) — Fri, 28 Nov 2008 07:45:00 +0200

Have you ever noticed that the MouseLeftButtonDown and MouseLeftButtonUp events are not fired when a Silverlight button is clicked? The reason for this is that the button handles these two events itself by overriding the OnMouseLeftButtonDown and the OnMouseLeftButtonUp handlers. In the OnMouseLeftButtonDown override, the Click event is raised and the MouseLeftButtonDown event is marked as handled so it couldn't bubble in the visual tree. The OnMouseLeftButtonUp override also marks the MouseLeftButtonUp as handled.

This thing can be changed using the ClickMode property of the Button control. It has the following values - Hover, Press, Release. The default one is Pressed and we have already explained it. When we have ClickMode set to Release, the Click event will be raised in the OnMouseLeftButtonUp override and the MouseLeftButtonDown and MouseLeftButtonUp events will be handled inside the button again. If we set the ClickMode to Hover, the Click event will be raised with the MouseEnter event and we will also be able to use the mouse button events.

That's it!

Tip: Avoid parameters without values in the object element

editorial@silverlightshow.net ( Martin Mihaylov) — Fri, 28 Nov 2008 07:37:00 +0200

When using the object element to display our Silverlight application, we can use parameters to configure it (source, onerror, background, minRuntimeVersion and etc.):

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">

    <param name="source" value="ClientBin/Issues.xap"/>

    <param name="onerror" value="onSilverlightError" />

    <param name="background" value="white" />

    <param name="minRuntimeVersion" value="2.0.31005.0" />

    <param name="autoUpgrade" value="true" />

    <a href="http://go.microsoft.com/fwlink/?LinkID=124807" style="text-decoration: none;">

         <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>

a>

object>

Some of them are predefined in the automatically created TestPages, but we can also add additional parameters like initParams, onload and etc.

Be sure always to set the value of each parameter, otherwise browsers different than Internet Explorer will not be able to render the object element properly and the "Install Silverlight" badge will appear instead of the Silverlight application. This issue could be a showstopper when embedding Silverlight applications into a web page and is not related to the Silverlight plug-in.

That's it!

Tip: What is the difference between styling and skinning

editorial@silverlightshow.net ( Ivan Dragoev) — Fri, 14 Nov 2008 06:04:00 +0200

Styling control means to apply to the control's properties predefined in the style values. Styling deals mainly with properties like Foreground, Background, FontStyle and FontSize, etc.

Skinning, on the other hand, allows you to build your own presentation for that control by defining control template. Thus, you are able to completely replace the standard presentation with another, which includes more visual elements, animations and other effects.

That's it!

Tip: What is control skinning?

editorial@silverlightshow.net ( Ivan Dragoev) — Fri, 14 Nov 2008 05:40:00 +0200

Skinning is a way to completely replace the look of your control. In order to do that, you have to define new template and set it to the Control.Template property.

Building your own template allows you to make the control look and feel in the way you like. You might add new elements or remove the existing, you can also edit the visual states and transitions.

In the example the button shape is changed. All animations are removed for simplicity.

 1: <UserControl.Resources>

 2:     <Style x:Key="myButtonTemplate" TargetType="Button">

 3:         <Setter Property="Template">

 4:             <Setter.Value>

 5:                 <ControlTemplate TargetType="Button">

 6:                     <Grid>

 7:                         <Path Margin="2"  x:Name="BackgroundGradient" Stretch="Fill" Stroke="#FF94C2D8"

 8:                               StrokeThickness="2" Opacity="1"

 9:                               Data="M44,-135 L137,-136 L163.00137,-114.43846 L138.14738,-98.33696 L40.513062,-96.888382 L65.010727,-116.44418 z" >

10:

 11:                             <Path.Fill>

 12:                                 <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

 13:                                     <GradientStop Color="#FFA3AEB9" Offset="0"/>

 14:                                     <GradientStop Color="#FF8399A9" Offset="0.375"/>

 15:                                     <GradientStop Color="#FF718597" Offset="0.375"/>

 16:                                     <GradientStop Color="#FF617584" Offset="1"/>

 17:                                 LinearGradientBrush>

 18:                             Path.Fill>

 19:                         Path>

 20:                         <ContentPresenter

 21:                             x:Name="contentPresenter"

 22:                             Content="{TemplateBinding Content}"

 23:                             ContentTemplate="{TemplateBinding ContentTemplate}"

 24:                             VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

 25:                             HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

 26:                             Margin="{TemplateBinding Padding}"/>

 27:                     Grid>

 28:                 ControlTemplate>

 29:             Setter.Value>

 30:         Setter>

 31:     Style>

 32: UserControl.Resources>

That's it!

Tip: What is control styling?

editorial@silverlightshow.net ( Ivan Dragoev) — Fri, 14 Nov 2008 02:52:00 +0200

Styling control is a very easy way to tweak the minor visual characteristic of the control such as foreground and background colors, the font style and size, padding, etc. Usually the styles are stored as resources which allows you to reuse them whenever you want.

The Style has TargetType specifying the type of the object the style can be applied to and a key used to identify the style. The Style contains numerous Setters, which describe the values which you want to set to specific properties.

To apply style to a control simply specify the Style property of the control to point to the static resource with a specific key name.

 1: <Grid>

 2:     <Grid.Resources>

 3:         <Style TargetType="Button" x:Key="myButtonStyle">

 4:             <Setter Property="Width" Value="100" />

 5:             <Setter Property="Height" Value="25" />

 6:             <Setter Property="Foreground" Value="#FF87091F"/>

 7:             <Setter Property="Padding" Value="2"/>

 8:             <Setter Property="BorderThickness" Value="4"/>

 9:             <Setter Property="FontWeight" Value="Bold" />

 10:             <Setter Property="FontFamily" Value="Portable User Interface" />

 11:         Style>

 12:     Grid.Resources>

 13:     <Button Content="Click Me!" Style="{StaticResource myButtonStyle}">

 14:     Button>

 15: Grid>

That's it!

Tip: How to capture mouse scroll / wheel event in Silverlight?

editorial@silverlightshow.net ( Denislav Savkov) — Thu, 18 Sep 2008 08:51:00 +0200

Silverlight doesn't support mouse wheel event. There is a way to catch them if we ask to the browser for them. This workaround works well if the page with your Silverlight application fits in the browser. If the page is bigger in height a scroll appears. Then the whole content of the page is scrolled and the SL application doesn't receive the wheel event until one end is reached.

Hook up to the event. Different names are used in the different browsers.

using System.Windows.Browser;

...

HtmlPage.Window.AttachEvent( "DOMMouseScroll", OnMouseWheel ); // Mozilla

HtmlPage.Window.AttachEvent( "onmousewheel", OnMouseWheel );

HtmlPage.Document.AttachEvent( "onmousewheel", OnMouseWheel ); // IE

This is how you get the wheel delta.

private void OnMouseWheel( object sender, HtmlEventArgs args )

     double mouseDelta = 0;

     ScriptObject e = args.EventObject;

     // Mozilla and Safari

     if ( e.GetProperty( "detail" ) != null )

         mouseDelta = ( ( double )e.GetProperty( "detail" ) );

     // IE and Opera

     else if ( e.GetProperty( "wheelDelta" ) != null )

         mouseDelta = ( ( double )e.GetProperty( "wheelDelta" ) );

     mouseDelta = Math.Sign( mouseDelta );

That's it!

Tip: What are the differences in the styles system between Silverlight and WPF?

editorial@silverlightshow.net ( Denislav Savkov) — Thu, 18 Sep 2008 08:43:00 +0200

These are the differences:

Is it possible to apply a style to all elements in your application?

Unforunately, the Beta 2 does not support implicit styles using the TargetType attribute like WPF. To apply a style to all elements you must explicitly set a value to each Style property.

Is it possible to extend a style?

In Silverlight styles cannot be based on other styles. In WPF that is possible using the BasedOn attribute

Is it possible to change the style of a control more than once?

No. Styles can be set only once in Silverlight in XAML or in code. After applying a style it is possible to change individual control properties though. You can affect the appearance of a control by changing the Template property and you can do that as many times as you want.

That's it!

Tip: How to find the styles and templates of a standard control?

editorial@silverlightshow.net ( Denislav Savkov) — Thu, 18 Sep 2008 08:41:00 +0200

Changing the default style or template of a control from the standard library is the same as with any other control. Except to create your own style it is good to know the parts and the states that compose the standard style. Microsoft has released the full XAML of a number of controls along with description of their visual states and state groups - Control Styles and Templates. Additionally using the reflector you can extract the styles of some slightly different controls, we did that and uploaded the generic.xaml file for you. Lastly, in the Reflector you can see the states and parts of every control listed on the first line of the page. See how to disassemble Silverlight assemblies here.

ListBox has only one visual part - ScrollViewer.

Here you see two of the six Button visual states.

That's it!

Tip: How to enter full-screen mode?

editorial@silverlightshow.net ( Denislav Savkov) — Thu, 18 Sep 2008 08:28:00 +0200

Just use the following line.

Application.Current.Host.Content.IsFullScreen = true;

Entering full-screen mode in Silverlight has some restrictions. To ensure that it is initiated by the user entering full-screen mode is possible only in response to one of these input events: MouseLeftButtonDown. MouseLeftButtonUp, KeyDown, KeyUp.

That's it!

Tip: How to validate values against certain rules when using binding?

editorial@silverlightshow.net ( Denislav Savkov) — Wed, 17 Sep 2008 01:51:00 +0200

Typically validation occurs when in a two-way binding the business object (source property) is updated with data from the user input (target property). During the update there are two places where validation occurs.

First, the binding engine uses a implementation of IValueConverter to convert the data from one type to the other. Usually this converter has some validation. Unfortunately, Silverlight doesn't provide a way for custom validation for binding, like in WPF. There is no ValidationRule class that is used in WPF to provide the custom rule for the validation.
Second, the setter of the property being updated may contain validation.

This means that if you want custom validation you have to write your own type converters or to place the validation inside the setters of your business object. In case the validation fails, an exception is thrown in a setter or in a converter , then a BindingValidationError event is raised (it is member of System.Windows.Controls.FrameworkElement). This makes it easy for you to prompt the user to enter correct data. BindingValidationError can be raised only when both NotifyOnValidationError and ValidatesOnExceptions are true. Setting ValidatesOnExceptions to true tells the binding engine to report validation exceptions and setting NotifyOnValidationError to true tells the binding engine to raise the BindingValidationError event when a validation error occurs. This, combined with the TwoWay mode of binding, gives us the following:

XAML

<TextBox x:Name="bindingTarget" Text="{Binding Path=Age,

                                               Source={StaticResource person},

                                               Mode=TwoWay,

                                               NotifyOnValidationError=true,

                                               ValidatesOnExceptions=true}" />.

bindingTarget.BindingValidationError +=

             new EventHandler( bindingTarget_BindingValidationError );

Here Age is a property of the object person.

Strangely BindingValidationError won’t raise if you use custom type converters in your binding. Check out our demo and download the source.

That's it!

Tip: How to get reference to the object that raised a routed event?

editorial@silverlightshow.net ( Denislav Savkov) — Wed, 17 Sep 2008 01:09:00 +0200

The callback function of a routed event has the second parameter e of type RoutedEventArgs or its inheritor. The Source property of this parameter holds reference to the object that raised the event. In contrast to that the sender parameter holds reference to the object where the event handler was invoked.

void RoutedEventRaised( object sender, RoutedEventArgs e )

    object source = e.Source;

That's it!

Tip: How to shorten your C# code?

editorial@silverlightshow.net ( Denislav Savkov) — Wed, 17 Sep 2008 01:05:00 +0200

Some of the new features in C# 3.0 allow you to write shorter code that is easier to read and maintain. The following code couples have the same results.

Short syntax for object initialization initialization.

ObjectType objectName = new ObjectType();

objectName.PropertyName = newValue;

objectName.PropertyName2 = newValue2;

ObjectType objectName = new ObjectType(){ PropertyName = newValue, PropertyName2 = newValue2 };

Syntaxt for anonymous types

SomeVeryLongNameOfType objectName = new SomeVeryLongNameOfType();

var objectName = SomeVeryLongNameOfType();

Short syntax for collection initialization

CollectionType collectionName = new CollectionType();

collectionName.Add( newItem1 );

..

collectionName.Add( newItemN );

CollectionType collectionName = new CollectionType() { Item1,...,ItemN };

That's it!

Tip: How to disable controls in Silverlight?

editorial@silverlightshow.net ( Denislav Savkov) — Wed, 17 Sep 2008 00:59:00 +0200

Currently only Silverlight controls that derive from System.Windows.Controls.ContentControl support disabling. Those that support have IsEnabled property. However in the release version of Silverlight 2.0 IsEnabled will be a property of the System.Windows.Control class. Also, if the property is changed on a parent control the new value will be applied to all the children of the control.

myButton.IsEnabled = false;

XAML

<Button IsEnabled="False"/>

If you need to disable your controls before the release you must write your own implementation. It is useful to set the UIElement.IsHitTestVisible property to false. It prevents the UIElement from raising input events and receiving focus, and is applied to the children elements.

XAML

<StackPanel IsHitTestVisible="False">

    <...>--IsHitTestVisible property of items is forced to False-->

StackPanel>

That's it!

Tip: How to add a tooltip to a control?

editorial@silverlightshow.net ( Martin Mihaylov) — Thu, 11 Sep 2008 07:24:00 +0200

If you want to add a tooltip to a control you must first check if it allows the ToolTipService namespace. If yes, you can add the tooltip the following way:

Xaml

<Button x:Name="MyButton" Content="Hello!" Width="50" Height="30">

    <ToolTipService.ToolTip>

        <TextBlock x:Name="ToolTip" Text="Click me!">TextBlock>

    ToolTipService.ToolTip>

Button>

ToolTipService.SetToolTip( MyButton, new TextBlock() { Text = "Click me!" } );

You can also use another control instead of TextBlock, for example Image control or Rectangle control.

That's it!

Tip: How to declare an attached property in Silverlight?

editorial@silverlightshow.net ( Ilia Iordanov) — Wed, 10 Sep 2008 05:21:00 +0200

Probably the first most important thing to mention here is that only inheritors of System.Windows.DependencyObject can be extended with attached properties. This is needed because either to set or to get value for a specific attached property, you need to use the methods SetValue and GetValue which are defined in the DependencyObject class.
When you declare an attached property, many advantages from the dependency properties model are coming out of the box for you such as caching, data binding, default values, expressions, styling, property invalidation and more.

In order to declare a attached property in Silverlight, you have to follow few simple steps as explained in the sample code below.

public partial class MySilverlightControl : StackPanel

    //1. Declare the attached property as static, readonly field in your class.

   public static readonly DependencyProperty MyPropertyProperty = DependencyProperty.RegisterAttached(

              "MyProperty",                                 //Property name

              typeof( string ),                             //Property type

              typeof( MySilverlightControl ),               //Type of the dependency property provider

              new PropertyMetadata( MyPropertyChanged ) )//Callback invoked on property value change

    public MySilverlightControl()

        InitializeComponent();

    //2. Define the appropriate SetXXX and GetXXX methods,

    //where XXX should be replaced with the property name

    public static void SetMyProperty( DependencyObject obj, string propertyValue )

        obj.SetValue( MyPropertyProperty, propertyValue );

    public static string GetMyProperty( DependencyObject obj )

        return ( string )obj.GetValue( MyPropertyProperty );

    private static void MyPropertyChanged( object sender, DependencyPropertyChangedEventArgs args )

        //Do some processing here when the attached property value has changed...

    //Just a sample method illustrating the idea how to obtain the value

    //of the MyProperty property for a specific element.

    private void ProcessTabKey()

        foreach ( UIElement element in this.Children )

            string propertyValue = MySilverlightControl.GetMyProperty( element );

            //Perform some processing according to the my property value.............

Read more about DependencyObject and DependencyProperty classes on MSDN.
If you need more information about the attached properties check out this article 'Attached properties in Silverlight'.

That's it!

Tip: How to declare a dependency property in Silverlight?

editorial@silverlightshow.net ( Ilia Iordanov) — Wed, 10 Sep 2008 02:19:00 +0200

Probably the first most important thing to mention here is that only inheritors of System.Windows.DependencyObject can be extended with dependency properties. This is needed because either to set or to get value for a specific dependency property, you need to use the methods SetValue and GetValue which are defined in the DependencyObject class.
When you declare a dependency property, many advantages are coming out of the box for you such as caching, data binding, default values, expressions, styling, property invalidation and more.

In order to declare a dependency property in Silverlight, you have to follow few simple steps as explained in the sample code below.

public partial class MySilverlightControl : UserControl

    //1. Declare the dependency property as static, readonly field in your class.

    public static readonly DependencyProperty MyPropertyProperty = DependencyProperty.Register(

        "MyProperty",                               //Property name

        typeof( string ),                           //Property type

        typeof( MySilverlightControl ),             //Type of the dependency property provider

        new PropertyMetadata( MyPropertyChanged ) );//Callback invoked on property value has changes

    public MySilverlightControl()

        InitializeComponent();

    //2. Create the property and use the SetValue/GetValue methods of the DependencyObject class

    public string MyProperty

set

            this.SetValue( MyPropertyProperty, value );

get

            return ( string )this.GetValue( MyPropertyProperty );

    private static void MyPropertyChanged( object sender, DependencyPropertyChangedEventArgs args )

        //Do some processing here...

Read more about DependencyObject and DependencyProperty classes on MSDN.

That's it!

Tip: How to pass a parameter to a value converter?

editorial@silverlightshow.net ( Martin Mihaylov) — Tue, 09 Sep 2008 08:22:00 +0200

If you're not familiar with the value converters read this. The methods generated by the VisualStudio when creating a custom class that implements System.Windows.Data.IValueConverter have several arguments. One of them is of type object and is called parameter.

public class DateTimeConverter : System.Windows.Data.IValueConverter

    public object Convert( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )...

    public object ConvertBack( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )...

In this example we bind to an object of type Book:

public class Book

    public DateTime PublishDate { get; set; }

We can pass this argument from the code or from the Xaml:

Xaml

<TextBlock Text="{Binding PublishDate, Converter={StaticResource DateTimeConverter}, ConverterParameter=true}"/>

Book myBook = new Book();

myBook.PublishDate = DateTime.Now;

Binding binding = new Binding( "PublishDate" );

binding.Source = myBook;

binding.Converter = new DateTimeConverter();

binding.ConverterParameter = true;

That's it!

Tip: How to invoke a JavaScript function from the Silverlight?

editorial@silverlightshow.net ( Martin Mihaylov) — Tue, 09 Sep 2008 07:50:00 +0200

In order to invoke a JavaScript function we must access the DOM from the Silverlight application. This can be done with the help of the System.Windows.Browser.HtmlPage class. Here it is how it's done:

HtmlPage.Window.Invoke( "Function_Name", new object[] { //Array of paramaters that must be passed to the function } );

We call the Invoke method of the Window property, which takes the name of the function and an array of its arguments as parameters.

That's it!

Tip: How to format a binding value using converters?

editorial@silverlightshow.net ( Martin Mihaylov) — Tue, 09 Sep 2008 05:55:00 +0200

First let's explain what the converters can be used for. Imagine you bind to an object's property, but the property is not formatted to your likings. In this case you can use converters. For example we bind to the PublishDate property of a Book object and want the date to be formatted like this - "dd MMM, yyyy".

Book myBook = new Book();

myBook.PublishDate = DateTime.Now;

First let's create our converter. It's a class that implements System.Windows.Data.IValueConverter (using VisualStudio you can easily generate the structure of the class).

public class DateTimeConverter : System.Windows.Data.IValueConverter

        public object Convert( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )

            return ( ( DateTime )value ).ToString( "dd MMM, yyyy" );

        public object ConvertBack( object value, Type targetType, object parameter, System.Globalization.CultureInfo culture )...

We have a method Convert, which takes several parameters. The value parameter will be the value of the property that we want to convert. It's of type object so we cast it to DateTime and use the ToString method of the DateTime class to format it as we please. Let's now see how to use this converter in the Xaml. First declare the namespace of the converter:

<UserControl x:Class="LayoutExperiments.Page"

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

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

xmlns:local="clr-namespace:LayoutExperiments">

My DateTimeConverter class is defined in the Page.cs file, but you can put anywhere you want. The next step is to add the Resource to the UserControl of type DateTimeConverter:

<UserControl.Resources>

    <local:DateTimeConverter x:Key="DateTimeConverter" />

UserControl.Resources>

And the last thing is to configure the binding and add the converter to it:

<TextBlock x:Name="MyText" Text="{Binding PublishDate, Converter={StaticResource DateTimeConverter}}">TextBlock>

This can also be done entirely in C# using the System.Windows.Data.Binding class:

TextBlock myText = new TextBlock();

Book myBook = new Book();

myBook.PublishDate = DateTime.Now;

Binding binding = new Binding("PublishDate");

binding.Source = myBook;

binding.Converter = new DateTimeConverter();

myText.SetBinding( TextBlock.TextProperty, binding );

LayoutRoot.Children.Add( myText );

So thanks to this converter the value of the TextBlock will be "09 Sep, 2008" instead of "9/9/2008 3:31:PM".

That's it!