One-step learning of Silverlight 2 series (10): Using User Controls

Overview

The release of Silverlight 2 Beta 1 brings us a lot of surprises from Runtime and Tools, such as supporting the framework languages Visual Basic, Visual C #, IronRuby, Ironpython, A series of new features such as JSON, Web Service, WCF, and Sockets support. The one-step learning Silverlight 2 series article takes you to Silverlight 2 development quickly.

This article is a series of 10th articles, mainly about the use of user controls in Silverlight 2.

Create a user control

In Silverlight 2, we can develop custom controls or create user controls to reuse controls and add a new user control:

Compile the user control implementation code:

<Grid x:Name="LayoutRoot" Background="White">    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"               Opacity="0.7" Fill="#FF8A8A8A"/>    <Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9">        <StackPanel Orientation="Horizontal" Height="50">            <Image Source="info.png" Margin="10 0 0 0"></Image>            <Button Background="Red" Width="120" Height="40"                     Content="OK" Margin="10 0 0 0" FontSize="18"/>            <Button Background="Red" Width="120" Height="40"                     Content="Cancel" Margin="50 0 0 0" FontSize="18"/>        </StackPanel>    </Border></Grid>

Register the namespace in the page XAML that requires the user control:

Use user controls:

<Grid x:Name="LayoutRoot" Background="#46461F">    <uc:ConfirmBox x:Name="mybox"></uc:ConfirmBox></Grid>

The whole process is as simple as follows:

Add attributes to a user control

Modify the XAML file in the preceding example and add a text block control to display text prompt information.

<Grid x:Name="LayoutRoot" Background="White">    <Rectangle HorizontalAlignment="Stretch" VerticalAlignment="Stretch"               Opacity="0.7" Fill="#FF8A8A8A"/>    <Border CornerRadius="15" Width="400" Height="150" Background="LightPink" Opacity="0.9">        <Grid>            <Grid.RowDefinitions>                <RowDefinition Height="60"></RowDefinition>                <RowDefinition Height="90"></RowDefinition>            </Grid.RowDefinitions>            <Grid.ColumnDefinitions>                <ColumnDefinition></ColumnDefinition>            </Grid.ColumnDefinitions>            <TextBlock x:Name="message" FontSize="18" Foreground="White"                       HorizontalAlignment="Left" VerticalAlignment="Center"                       Margin="50 20 0 0"/>            <StackPanel Orientation="Horizontal" Height="50" Grid.Row="1">                <Image Source="info.png" Margin="10 0 0 0"></Image>                <Button Background="Red" Width="120" Height="40"                     Content="OK" Margin="10 0 0 0" FontSize="18"/>                <Button Background="Red" Width="120" Height="40"                     Content="Cancel" Margin="50 0 0 0" FontSize="18"/>            </StackPanel>        </Grid>    </Border></Grid>

Define attributes:

public partial class ConfirmBox : UserControl{    public ConfirmBox()    {        InitializeComponent();    }    public String Message    {        get { return this.message.Text; }        set { this.message.Text = value; }    }}

When you use the properties of a user control on the page, The XAML editor can identify the properties and prompt:

Assign a value to the Message attribute of the ConfirmBox control:

<Grid x: Name = "LayoutRoot" Background = "# 46461F"> <uc: ConfirmBox x: Name = "mybox" Message = "succeeded with user control"> </uc: confirmBox> </Grid>

The effect after running is as follows:

Dynamically Add User Controls

The user control can be dynamically added to the Page, modify the xaml code in Page. XAML, and put a Canvas as the container of the user control.

<Grid x:Name="LayoutRoot" Background="#46461F">    <Canvas x:Name="ContainerCanvas">            </Canvas></Grid>

Write the code for adding a user control:

Private void LayoutRoot_Loaded (object sender, RoutedEventArgs e) {ConfirmBox confirmbox = new ConfirmBox (); confirmbox. Message = "the user control is successfully added dynamically! "; ContainerCanvas. Children. Add (confirmbox );}

The following figure shows the effect after running. Of course, you can also control the display position of the user control.

Conclusion

This article briefly introduces how to use user controls in Silverlight 2, including creating user controls, adding properties, and dynamically adding user controls. You can download the sample code in this article from here.

Next article: Learn Silverlight 2 series (11) step by step: Data Binding