Tips

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.

There are two ways to declare objects in XAML. The most common way is to declare elements using opening and closing tag - using the object element syntax

XAML

<objectName><objectName/> 

It has a shorter version

XAML

<objectName/>

that can be used if the object has no child elements. See how to set a property and how to declare a child element.

The other way is to create an object indirectly by setting a property. This syntax is used relatively rare.

There are four ways to set a property in XAML. Different syntaxes are supported by different properties.

1. Using the attribute syntax

<elementName PropertyName="Value"/>

The value of course is from the type of the property.

2. Using the property syntax

<elementName>

    <elemenName.PropertyName>

        Value

    </elemenName.PropertyName>

</elementName>

 

3. Using the content attribute syntax.

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.

You can draw a line decleratively in the Xaml or dynamically in the codebehind. Here it is how it's done in the both ways:

Xaml

<Line x:Name="MyLine" X1="0" Y1="0" X2="100" Y2="100" Stroke="Yellow" StrokeThickness="2" />

C#

Line myLine = new Line();

myLine.X1 = 0;

myLine.Y1 = 0;

myLine.X2 = 100;

myLine.Y2 = 100;

myLine.Stroke = new SolidColorBrush( Colors.Yellow );

myLine.StrokeThickness = 2;

X1 and Y1 represent the start point of the line and X2 and Y2 - the end point.

If you want your rectangle to have rounded edges, you can use the RadiusX and RadiusY properties of the Rectangle control.

Xaml

<Rectangle x:Name="MyRect" Width="100" Height="100" RadiusX="10" RadiusY="10" Fill="Red" />

RadiusX determines the radius of the corners on the x-axis and RadiusY determines the radius of the corners on the y-axis.

That's it!

In Silverlight the Button, as some other controls does not have the old well known Text property. It is replaced by a new property named Content of type object. The idea is to remove the limitation to show only strings as content of a control. Now with this new approach you can put whatever you wish inside of a Button. This makes the presentation layer extremely powerful. However if you provide a regular string for the Content then the result will be exactly as if we used the Text property.

Text box control in Silverlight supports multi line mode but surprisingly it does not have such property as Multyline. That is why, in order to make one text box multi line, you have to set its property AcceptsReturn to true.

Xaml

<TextBox x:Name="textBox" AcceptsReturn="True"></TextBox>

C#

TextBox textBox = new TextBox();

textBox.AcceptsReturn = true;

That's it!

Yes, that is right, there is no Label control in Silverlight. Instead you should use the new control System.Windows.Controls.TextBlock. Keep in mind that it can display only text, no images or other type of content, just text.

Xaml

<TextBlock x:Name="statusText" Text="Active" TextWrapping="Wrap" TextAlignment="Left" VerticalAlignment="Center"/>

C#

TextBlock statusText = new TextBlock();

statusText.Text = "Active";

statusText.TextWrapping = TextWrapping.Wrap;

statusText.TextAlignment = TextAlignment.Left;

statusText.VerticalAlignment = VerticalAlignment.Center;

That's it!