Silverlight - User Control Binding

Question

Hello,

I am learning Silverlight. In the process, I'm trying to build a custom user control. My ultimate goal is to be able to write the following statement in XAML:

<my:CustomControl>
  <my:CustomControl.MainControl>
    <Canvas><TextBlock Text="Hello!" /></Canvas>
  </my:CustomControl.MainContent>
</my:CustomControl>

The content of the control will be wrapped in a custom border. Once again, this is just a learning exercise. To append my border, I have create the following UserControl:

<UserControl x:Class="CustomControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"&gt;

    <Grid x:Name="LayoutRoot">
      <Border>
        <!-- CustomControl Content -->
      </Border>
    </Grid>
</UserControl>

The code-behind for this file looks like the following:

public partial class CustomControl : UserControl
{
  public UIElement MainContent
  {
    get { return (UIElement)GetValue(MainContentProperty); }
    set { SetValue(MainContentProperty, value); }
  }

  public static readonly DependencyProperty MainContentProperty =
    DependencyProperty.Register("MainContent", typeof(UIElement), typeof(CustomControl),  
    new PropertyMetadata(null));


  public CustomControl()
  {
    InitializeComponent();            
  }
}

The thing I am having a problem with is getting the MainContent to appear in my CustomControl. I am confident that I am setting it properly, but I'm not sure how to display it. I really want it to be a DependencyProperty as well so I can take advantage of data binding and animations.

How do I get the MainContent to appear in the CustomControl? Thank you

Answer 1

First you need to wait until the rest of the control has been parsed so you need to hook the loaded event:-

public CustomControl()
{
 InitializeComponent();
 Loaded += new RoutedEventHandler(CustomControl_Loaded);
}

Then in the loaded event assign your MainControl property to the Child property of the border. To do that its best if you give your Border an x:Name which for now I'll simple call "border".

void CustomControl_Loaded(object sender, RoutedEventArgs e)
{
 border.Child = MainControl;
}

That'll get you going. Of course you may need to deal with the MainControl property being changed dynamically so you need add a bool isLoaded field in your control and set that in the loaded event. When true your MainControl setter should assign the incoming value to the border.Child.

Things can start to get more complicated and in fact I don't recommend this approach to creating a custom control. For a better approach see Creating a New Control by Creating a ControlTemplate