Silverlight User Interface Controls

.Grid Splitter Control


Screen Capture of Grid Splitter Control

.User Interface Controls

"Silverlight provides a large library of controls for user interface development. Developers can also build their own customized controls. Additional Silverlight controls are available from several companies, such as Telerik, Infragistics and DevExpress."

This article covers user interface controls that are available from Silverlight in Visual Studio or from the Silverlight Toolkit.

  • Some controls are contained in assemblies and are included in the Silverlight plugin by default. The are know as the core controls and include such controls as: TextBox, Button, CheckBox, etc. You can also use controls contained in other (outside) assemblies by including a reference to the assembly's namespace in your application.

  • Every UI element in Silverlight has the ability to be visible or hidden by use of the Visibility property which has the values:
    1. Visible - (default) is visible.
    2. Hidden - do not display the element, will still take up space on the page.
    3. Collapsed - do not display the element, will not take up any space on page.
  • There are three ways to specify the size of controls:
    1. Absolute - specifies the size in a fixed number of pixels. Absolute sizing takes precedence over the other two sizing options and is always the first one to be calculated. An absolute size will impose a constrained view of the control (will not automatically resize).
    2. * - (star sizing), distributes the available space equally based on amount of available space (eg. *, 2*, 3*) The numbers are used to specify a ratio for dividing the available space.
    3. AUTO - makes the size just big enough to hold contents. If no contents exist, the size is zero.

Button Controls

Button controls use the Click event to respond to a mouse click or a tap gesture. The classes: Button, HyperlinkButton, RepeatButton, and ToggleButton are derived from the ButtonBase class. The CalendarButton and CalendarDayButton classes are derived from the Button class. The CheckBox and RadioButton classes are derived from the ToggleButton class.

  • There are three states associated with buttons:
    1. Normal
    2. Hover
    3. Pressed
  • The ClickMode property sets when the Click event should occur:
    1. Hover - The Click event occurs every time you hover over the button.
    2. Press - The Click event occurs as soon as you click on the button.
    3. Release - (default mode) The Click event occurs as soon as the mouse button is released.
  • Button types:
    1. Button - represents a Windows button control, which reacts to the ButtonBase.Click event.
    2. CheckBox - represents a control that a user can select and clear.
    3. RadioButton - represents a Button that can be selected, but not cleared, by a user. It is usually part of a group.
    4. HyperlinkButton - a button control that displays a hyperlink.
    5. ToggleButton - base class for controls that can switch states, such as CheckBox and RadioButton.
  • Below is a Silverlight application which demonstrates the button types listed above.

    Get Microsoft Silverlight


    Button Demo (Click on the Buttons)


Stack Panel Layout Control

<UserControl x:Class="SilverlightApplication4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">


    <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True">
        <StackPanel>
            <Button Content="Button 1" />
            <Button Content="Button 2" />
            <Button Content="Button 3" FontSize="20"/>
            <Button Content="Button 4" />
            <Ellipse Fill="DarkGoldenrod" Height="30" />
            <Button Content="Button 5" />


            <StackPanel Orientation="Horizontal">
                <Rectangle Fill="Black" Height="25" Width="25"/>
                <Rectangle Fill="Green" Height="45" Width="45" />
                <Ellipse Fill="RoyalBlue" Height="25" Width="25" />
            </StackPanel>

        </StackPanel>

    </Grid>
</UserControl>

Constrained vs Unconstrained Controls

Silverlight has two layout modes (A layout typically contains a mixture of these two modes):

  1. Constrained
    • Fixed Width or Height is specified by a container.
  2. Unconstrained
    • No fixed Width or Height is specified, so elements are free to choose their own size. For example, the StackPanel will always perform unconstrained layout in the direction of stacking .. so elements inside a vertical stack panel are vertically unconstrained. It will provide each element with the height it needs and then crop anything that does not fit into the StackPanel.
    • aka. "Size to Content"
    • Unconstrained layout is important in data binding where the size of the data is not known until runtime. However if there is no data the size becomes zero (not visible) which can make testing without appropriate data difficult.
  3. Code for Button Demo

    UserControl x:Class="KCSilverlight4.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="200" d:DesignWidth="300">

        <Border BorderThickness="2"
                BorderBrush="Black">

            <Grid x:Name="LayoutRoot" Background="White">
                <Grid.RowDefinitions>
                    <RowDefinition Height="25*" />
                    <RowDefinition Height="25*" />
                    <RowDefinition Height="50*" />
                    <RowDefinition Height="25*" />
                    <RowDefinition Height="25*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="2*" />
                    <ColumnDefinition Width="2*" />
                </Grid.ColumnDefinitions>


                <Button Content="Button"
                        Name="button1"
                        Click="button1_Click"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="30,10,0,0"
                        VerticalAlignment="Top"
                        Width="100" />


                <CheckBox Content="CheckBox"
                        Grid.Row="1"
                        Name="checkBox1"
                        Checked="checkBox1_Checked"
                        Unchecked="checkBox1_Unchecked"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="30,10,0,0"
                        VerticalAlignment="Top"
                        Width="100" />


                <RadioButton Content="RadioButton 1"
                        Name="radioButton1"
                        GroupName="rbgroup"
                        Click="radioButton_Click"
                        Grid.Row="2"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="30,10,0,0"
                        VerticalAlignment="Top"
                        Width="100" />

                <RadioButton Content="RadioButton 2"
                        Name="radioButton2"
                        GroupName="rbgroup"
                        Click="radioButton_Click"
                        Grid.Row="2"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="30,35,0,0"
                        VerticalAlignment="Top"
                        Width="100" />

                <HyperlinkButton Content="HyperlinkButton"
                        Name="hyperlinkButton1"
                        NavigateUri="http://kcshadow.net"
                        TargetName="_blank"
                        Click="hyperlinkButton1_Click"
                        Grid.Row="3"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="30,10,0,0"
                        VerticalAlignment="Top"
                        Width="100" />


                <ToggleButton Content="ToggleButton"
                        Name="ToggleButton1"
                        Checked="ToggleButton1_Checked"
                        Unchecked="ToggleButton1_Unchecked"
                        Grid.Row="4"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="30,10,0,0"
                        VerticalAlignment="Top"
                        Width="100" />

                <TextBlock Name="textBlock1"
                        Grid.Column="1"
                        Grid.Row="0"
                        Height="23"
                        HorizontalAlignment="Left"
                        Margin="25,10,0,0"
                        VerticalAlignment="Top" />

            </Grid>
        </Border>
    </UserControl>


    ScrollViewer

    A ScrollViewer displays a scrollable area that can contain other visible elements. Below is a Silverlight application which demonstrates a ScrollViewer control.

    Get Microsoft Silverlight


    ScrollViewer Demo (Move Scroll Bar)

    Code for ScrollViewer Demo

    <Grid x:Name="LayoutRoot" Background="White">
        <ScrollViewer Height="150" Width="300">
            <StackPanel>
                <Image Source="http://www.kcshadow.net/_images/godofmars.jpg" Height="100" />
                <TextBlock TextWrapping="Wrap" Margin="0,0,0,10">
                    TWELVE years had passed since I had laid the body of my great-uncle,
                    Captain John Carter, of Virginia, away from the sight of men in that
                    strange mausoleum in the old cemetery at Richmond.

                    Often had I pondered on the odd instructions he had left me governing
                    the construction of his mighty tomb, and especially those parts which
                    directed that he be laid in an OPEN casket and that the ponderous mechanism
                    which controlled the bolts of the vault's huge door be accessible
                    ONLY FROM THE INSIDE.
                </TextBlock>
            </StackPanel>
        </ScrollViewer>
    <Grid x:Name="LayoutRoot" Background="White">
        <ScrollViewer Height="150" Width="300">
            <StackPanel>
                <Image Source="http://www.kcshadow.net/_images/godofmars.jpg" Height="100" />
                <TextBlock TextWrapping="Wrap" Margin="0,0,0,10">
                    TWELVE years had passed since I had laid the body of my great-uncle,
                    Captain John Carter, of Virginia, away from the sight of men in that
                    strange mausoleum in the old cemetery at Richmond.

                    Often had I pondered on the odd instructions he had left me governing
                    the construction of his mighty tomb, and especially those parts which
                    directed that he be laid in an OPEN casket and that the ponderous mechanism
                    which controlled the bolts of the vault's huge door be accessible
                    ONLY FROM THE INSIDE.
                </TextBlock>
            </StackPanel>
        </ScrollViewer>


GridSplitter

A GridSplitter redistributes space between columns or rows of a Grid control without changing the dimensions of the Grid. Below is a Silverlight application which demonstrates the GridSplitter control.

Get Microsoft Silverlight


GridSplitter Demo (Move Center Bar)


Additional Controls

  • Border - draws a border, background, or both around another element. Can only have one child element. (Properties: BorderBrush, BorderThickness, Margin, Padding, CornerRadius).
  • ComboBox - represents a selection control with a drop-down list (Properties: SelectedIndex, Selected Item. Events: SectionChanged).
  • DataGrid - displays data in a tabular form. Users can add, delete, select, edit, and sort items that are bound to it. Uses UI Virtualization where only the data items the user can actually see is loaded to the screen memory. When AutoGenerateColumns=TRUE, columns are automatically created as DataGridTextColumn or DataGridCheckBoxColumn (for booleans). If you wish more control over rendered content, set AutoGenerateColumn=FALSE and define a template for the DataGrid. (Properties: ItemSource, AutoGenerateColumns. Events: CellEditEnded, CellEditEnding).
  • ItemsControl - (base class for ListBox and ComboBox). Contains a list of selectable items. Items need to have a template. Properties:
    • Items - collection of items to render.
    • ItemsSource - source of the items, usually used with XAML bindings.
    • ItemsPanel - panel used to display the items.
    • ItemTemplate - data template used to render an item.
  • ListBox - contains an open list of selectable items (Properties: SelectedIndex, Selected Item. Events: SectionChanged).
  • MediaElement - a rectangular control that can contain audio and video as its content. See list of supported media formats. Note: Closed Captioning (subtitles) is supported thru the use of the TimeLineMarker object. (Properties: AutoPlay, CanPause, CanSeek, CurrentState, Duration, IsMuted, Volume, Balance, AudioStreamCount, AudioStreamIndex) Note: HTML5 VIDEO and AUDIO tags are now supported in all browsers and is an alternative to the Silverlight controls.
  • TextBlock - display (only) of text. A lightweight control for small amounts of text.
  • TextBox - text input (single line or multi-line).
  • TreeView - displays hierarchical data in a tree structure that has items that can expand and collapse.
  • ViewBox - scale child control's content to full available space.
.Various Controls


ComboBox, LIstBox, MediaElement, DataGrid

Creating Your Own User Controls

  • A user control is essentially a combination of existing control that can be reused throughout the application.
  • Right-click on project, Add, New-Item, "Silverlight User Control Template".
  • Change the design height and width to actual specs (d:DesignHeight="300" => Height="300").
  • Create a StackPanel with the desired combination of controls inside.
  • Code the events for the individual controls.
  • In the page you want to use the control, add a reference to the user control namespace
    xmlns:local="clr-namespace:MyUserControl"
  • Go to control insert point and start typing the alias (<local:) and intellisense should have picked up the namespace with the control.



Reference Articles


Top