How do I make custom controls in Silverlight?

Question

I've created a custom control using Expression Blend:

<UserControl
    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"
    x:Class="MyProject.EditableField"
    d:DesignWidth="286" d:DesignHeight="20">

    <Grid x:Name="LayoutRoot">
     <TextBlock HorizontalAlignment="Left" Width="95" Text="Label:" TextWrapping="Wrap" x:Name="Label" FontSize="12"/>
     <TextBox Margin="99,0,0,0" x:Name="Value" Text="Value" TextWrapping="Wrap"/>
    </Grid>
</UserControl>

It contains a TextBlock Label and a TextBox Value. What I'd like is to add multiple of these to my XAML with their own Label and Value, perhaps like this:

<MyProject:EditableField Margin="30,180,0,0" Height="20" HorizontalAlignment="Left" VerticalAlignment="Top" Width="286" x:Name="FaxNumber">
            <Label>
                <Text>Fax number:</Text>
            </Label>
            <Value>
                <Contents>
                    111-222-333
                </Contents>
            </Value>
        </MyProject:EditableField>

When I say perhaps, this clearly doesn't work. What would be the correct syntax to add them?

Answer 1

The simplest method would be to add two new properties to the code behind, eg LabelText and ContentText. Wire these up to set and get the Text properties of the TextBlock control and TextBox controls respectively.

Then you would use:

<MyProject:EditableField LabelText="Fax number:" ContentText="111-222-333" ...

The correct method would be to do the same, implementing two dependency properties (and thus supporting animation, data binding etc), and binding the control text of the child controls to these properties.

Answer 2

In the code behind:

public string LabelText
{
    get { return Label.Text; }
    set { Label.Text = value; }
}

public string ContentText
{
    get { return Value.Text; }
    set { Value.Text = value; }
}