Saturday, February 12, 2011

How to create a Silverlight control that has two content areas

I want to create a Silverlight 2 control that has two content areas. A Title and a MainContent. So the control would be:

<StackPanel>
<TextBlock Text=" CONTENT1 "/>
<Content with CONTENT2 "/>
</StackPanel>

When I use the control I should just be able to use:

<MyControl Text="somecontent">main content </MyControl>

How can I create such a control?

  • What you wanted is a Silverlight version of the WPF HeaderedContentControl You can find a try here. http://leeontech.wordpress.com/2008/03/11/headeredcontentcontrol-sample/

    From Jobi Joy
  • You can do that easily with the ContentProperty attribute.

    Then you can define your code behind as:

    [ContentProperty("Child")]
    public partial class MyControl: UserControl
    {
     public static readonly DependencyProperty ChildProperty = DependencyProperty.Register("Child", typeof(UIElement), typeof(MyControl), null);
    
     public UIElement Child
     {
      get { return (UIElement)this.GetValue(ChildProperty); }
      set
      {
       this.SetValue(ChildProperty, value);
       this.content.Content = value;
      }
     }
    

    What that will do is any default content within your tags (<MyControl Text="somecontent">main content </MyControl>) - will be set as the Child property on your class. Then once it's been set you can assign it to any control you like.

    Edit:

    You can have as many contents as you like, but you can only have 1 auto-content (which is designated via the ContentProperty attribute). If you want two you could do:

    <MyControl>
      <MyControl.Content1>Hello World</MyControl.Content1>
      <MyControl.Content2>Goodbye World</MyControl.Content2>
    </MyControl>
    

    All you have to do is make sure you have the matching dependency properties in your code. Then when the property is set, just assign it to a parent content control in your XAML.

    Peter : Perfect, can I have two contents?
    Mark Ingram : Answered in my question as I didn't have enough characters here.

0 comments:

Post a Comment