Controls and UI

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!

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!

The System.Windows.Controls.Grid control is one of the most commonly used containers in Silverlight. It allows you to organize its content into rows and columns as a regular grid. By default a Grid control has only one cell and everything you add goes there overlapping the previous content. In order to define multiple rows and columns to your Grid control you have to add as many <RowDefinition> and <ColumnDefinition> as you need, see the sample below.

Xaml

<Page

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

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

   <Grid x:Name="MyGrid" ShowGridLines="True">

     <Grid.RowDefinitions>

       <RowDefinition></RowDefinition>

       <RowDefinition></RowDefinition>

       <RowDefinition></RowDefinition>

     </Grid.RowDefinitions>

     <Grid.ColumnDefinitions>

       <ColumnDefinition></ColumnDefinition>

       <ColumnDefinition></ColumnDefinition>

       <ColumnDefinition></ColumnDefinition>

     </Grid.ColumnDefinitions>

   </Grid>

</Page>

Grid MyGrid = new Grid();

RowDefinition row1 = new RowDefinition();

RowDefinition row2 = new RowDefinition();

RowDefinition row3 = new RowDefinition();

MyGrid.RowDefinitions.Add( row1 );

MyGrid.RowDefinitions.Add( row2 );

MyGrid.RowDefinitions.Add( row3 );

ColumnDefinition col1 = new ColumnDefinition();

ColumnDefinition col2 = new ColumnDefinition();

ColumnDefinition col3 = new ColumnDefinition();

MyGrid.ColumnDefinitions.Add( col1 );

MyGrid.ColumnDefinitions.Add( col2 );

MyGrid.ColumnDefinitions.Add( col3 );

As you can see we have added 3 rows and 3 columns definitions in our Grid control.

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.

Let's imagine we would like to add a button at a specific cell (row:column) in our grid control. How this could be done? How to define the row and column of that cell? Well, the answer is pretty easy - you just have to define values for the two attached properties Grid.Row and Grid.Column inside the control you wish to add. Like this:

Xaml

<Grid x:Name="MyGrid" ShowGridLines="True">

   <Grid.RowDefinitions>

      <RowDefinition></RowDefinition>

      <RowDefinition></RowDefinition>

   </Grid.RowDefinitions>

   <Grid.ColumnDefinitions>

      <ColumnDefinition></ColumnDefinition>

      <ColumnDefinition></ColumnDefinition>

   </Grid.ColumnDefinitions>

   <Button x:Name="MyButton" Content="Button at Cell(R:0, C:1)" Grid.Row="0" Grid.Column="1"></Button>

</Grid>

To add scrollbars to ItemsControl you have to modify the control template and to add ScrollViewer for the ItemsPresenter.

Xaml

<ItemsControl >
    <ItemsControl.Template>
        <ControlTemplate>
            <ScrollViewer x:Name="ScrollViewer" Padding="{TemplateBinding Padding}">
                <ItemsPresenter />
            </ScrollViewer>
        </ControlTemplate>
    </ItemsControl.Template>
</ItemsControl>

Control's cursors can be changed very easily in Silverlight. All controls that derive from System.Windows.FrameworkElement have Cursor property that can be set from Xaml or the code behind. The value for that property should be one of the predefined cursors such as Hand, Wait, Arrow, IBeam etc. declared in the static class System.Windows.Input.Cursors.

Xaml

   <Button x:Name="pushMeButton" Content="Push me now!" Cursor="Hand"></Button>

   pushMeButton.Cursor = Cursors.Hand;

There is a special control in Silverlight responsible for scrolling of content. The full name of this control is System.Windows.Controls.ScrollViewer. You can use it like a regular container by placing all of the content you want to scroll inside of it. The control's properties that worth mentioning are two: HorizontalScrollBarVisibility and VerticalScrollBarVisibility. As you can guess they allow you to control the visibility of the vertical and horizontal scrollbars. The possible values are Auto, Disabled, Hidden and Visible.