Controls and UI

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.

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.

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.

C#

myButton.IsEnabled = false;

XAML

<Button IsEnabled="False"/>

If you need to disable your controls before the release you must write your own implementation.

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>

C#

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

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

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.

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.

Here is an example of how to use a RadialGradient Brush to fill a rectangle for example:

<Rectangle x:Name="MyRect" Width="100" Height="100">

    <Rectangle.Fill>

        <RadialGradientBrush Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5" GradientOrigin="0.5,0.5">

            <GradientStop Color="Yellow" Offset="0.3"></GradientStop>

            <GradientStop Color="Orange" Offset="0.8"></GradientStop>

            <GradientStop Color="Red" Offset="1"></GradientStop>

        </RadialGradientBrush>

    </Rectangle.Fill>

</Rectangle>

C#

RadialGradientBrush gradient = new RadialGradientBrush();

gradient.Center = new Point( 0.5, 0.5 );

gradient.GradientOrigin = new Point( 0.5, 0.5 );

gradient.RadiusX = 0.5;

gradient.RadiusY = 0.5;

GradientStop color1 = new GradientStop();

color1.Color = Colors.Yellow;

color1.Offset = 0.2;

gradient.GradientStops.Add( color1 );

GradientStop color2 = new GradientStop();

color2.Color = Colors.Orange;

color2.Offset = 0.5;

gradient.GradientStops.Add( color2 );

GradientStop color3 = new GradientStop();

color3.Color = Colors.Red;

color3.Offset = 0.8;

gradient.GradientStops.Add( color3 );

MyRect.Fill = gradient;

First we define the RadialGradientBrush and set its Center, GradientOrigin, RadiusX and RadiusY properties.

Here is an example of how to use a LinearGradient Brush to fill a rectangle for example:

Xaml

<Rectangle x:Name="MyRect" Width="100" Height="100">

    <Rectangle.Fill>

        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >

            <GradientStop Color="Yellow" Offset="0.2"></GradientStop>

            <GradientStop Color="Orange" Offset="0.5"></GradientStop>

            <GradientStop Color="Red" Offset="0.8"></GradientStop>

        </LinearGradientBrush>

    </Rectangle.Fill>

</Rectangle>

C# 

LinearGradientBrush gradient = new LinearGradientBrush();

gradient.StartPoint = new Point( 0, 0 );

gradient.EndPoint = new Point( 1, 1 );

GradientStop color1 = new GradientStop();

color1.Color = Colors.Yellow;

color1.Offset = 0.2;

gradient.GradientStops.Add( color1 );

GradientStop color2 = new GradientStop();

color2.Color = Colors.Orange;

color2.Offset = 0.5;

gradient.GradientStops.Add( color2 );

GradientStop color3 = new GradientStop();

color3.Color = Colors.Red;

color3.Offset = 0.8;

gradient.GradientStops.Add( color3 );

MyRect.Fill = gradient;

We define the gradient and set its StartPoint and EndPoint properties.

All child elements in fact are properties. To indicate which property accepts the child element as its value you must specify the ContentProperty attribute of the class.

C#

[ContentProperty("PropertyName")]

public class SomeClass

{

    ...

    public PropertyType PropertyName {get;set;}

    ...

}

 

XAML

<SomeClass x:Name="someClassInstance">

    Value

</SomeClass>

This way the last declaration corresponds to the following C# code

C#

someClassInstance.PropertyName = Value;

If you want to add an oval clip to your control, you can do it the following way:

<Button x:Name="MyButton" Content="Click me!" Width="80" Height="30">

    <Button.Clip>

        <EllipseGeometry RadiusX="35" RadiusY="13" Center="40,15"></EllipseGeometry>

    </Button.Clip>

</Button>

For the example we use a button. We set the clip using the System.Windows.Media.EllipseGeometry object. The center is in relation to the size of the button.