Binding content to a property of type UIElement

Question

I have the following interfaces:

public interface IPropertyPage {

 string Title { get; }

 UIElement UI { get; }

}

 

public interface IPropertyPages:ICollection<IPropertyPage> {

}

 

and I want to make a templated custom control, which would have a property of type IPropertyPages and show the control returned by UI property of each property pages from the IPropertyPages collection and set the tab header using the Title property.

I could do this in code, but would prefer to be able to do it in XAML so that a user of the control could override the template and use say Accordion instead of a TabControl, where sections would host the control returned by the UI property of each property page and section titles would use the Title property of the PropertyPage (or a Tree control to show all those property editing custom UIs in one pane as collapsible/expandable sections [not showing only one at a time as in accordion]). [note: The design of those property pages is supposed to use two-way data binding to talk to the control providing the property pages collection (IPropertyPagesProviders), so not using OK/Apply/Cancel etc.]

what I don't understand is how I can bind to the UI property which is a UIElement and place it as content in the XAML, should I use some dummy container control and set its content via binding to the value of the UI property? (that is have ItemsSource of say TabControl bind to the PropertyPages collection and have some ItemTemplate/Header or similar with a container in it like Border the content property of which will bind to the UI property of each item?)

thanks in advance for any insights and sample code

Answer 1

judging from http://stackoverflow.com/questions/1930414/rendering-a-non-uielement-via-binding I should use something like WPF's ContentPresenter (this one also speaks of WPF and ContentPresenter: http://social.msdn.microsoft.com/Forums/br/wpf/thread/4fbf00b4-7cfb-461f-acfa-96f64d745918 and so does http://go4answers.webhost4life.com/Example/dynamically-visual-elments-external-134183.aspx)

btw, http://compositewpf.codeplex.com/discussions/298092 speaks about ContentControl, wonder if that's used in Silverlight instead (it's PRISM related discussion - also http://msdn.microsoft.com/en-us/library/ff921098(v=pandp.40).aspx on PRISM says ContentControl can display one control, whereas ItemsControl can display multiple)

I think http://books.google.gr/books?id=KKQB9SDF0LAC&pg=PA39&lpg=PA39&dq=Binding+content+to+a+property+of+type+UIElement&source=bl&ots=fFso3k0P4c&sig=bkvcgiTBO5CdDMH5ogxB9jK5zio&hl=el&sa=X&ei=2UWcT-veOc3u-gbW1qyPDw&redir_esc=y#v=onepage&q=Binding%20content%20to%20a%20property%20of%20type%20UIElement&f=false at the end of page 39 that explains about ContentControl and ContentPresenter. The former lets derived controls define a content area in their control template using a ContentPresenter and the Content property it defines if I get it correctly (e.g. one can use it to show an Image on a Button [derives from ButtonBase which derives from ContentControl])

So I guess the question remains how to set the tab's title (thought it was via TabHeader or something but VS IntelliSense wasn't showing it in the XAML view)

Answer 2

So I guess the question remains how to set the tab's title (thought it was via TabHeader or something but VS IntelliSense wasn't showing it in the XAML view)

hi ,

 you can set it like this ... 

  <sdk:TabItem >
        <sdk:TabItem.Header>
           <TextBlock  Text =" Header 1" />
        </sdk:TabItem.Header>
</sdk:TabItem >

Answer 3

Thanks, but I wonder if this will create a TabItem for me too which I don't want to (since I use ItemTemplate). I'm thinking of using DisplayMemberPath (for showing the tab header) together with ItemTemplate (to show the tab's UI), but wonder if TabControl will honour both.

I think the alternative if that doesn't work is to define somehow a Style for all TabItem.Header controls in there or use an implicit data template to have the header of automatically created TabItem controls (TabControl creates them for me and sets their Content template to the ItemTemplate I gave I guess), use the "Title" property of the Property Page item (the collection bound to the tabcontror is a generic collection of IPropertyPage, that is an IPropertyPages interface)

thanks for any insights,

George

<ResourceDictionary xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:PropertyPagesSupport">

  <Style TargetType="local:PropertyPagesHost">

    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="local:PropertyPagesHost">

          <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">

            <sdk:TabControl ItemsSource="{TemplateBinding PropertyPages}" DisplayMemberPath="Title">
   
              <!-- if can't combine DisplayMemberPath (to set the header) with ItemTemplate (to show the content),
                   then need to set header of TabItem via implicit data template to show Title of respective property page -->
              
              <sdk:TabControl.ItemTemplate>
                <DataTemplate>
                  <ContentPresenter Content="{Binding UI}"></ContentPresenter>
                </DataTemplate>
              </sdk:TabControl.ItemTemplate>
            </sdk:TabControl>

          </Border>
          
        </ControlTemplate>
      </Setter.Value>
    </Setter>

  </Style>
  
</ResourceDictionary>

 

Answer 4

Regarding the Style I question above, the Answer #2 at http://www.go4answers.com/Example/tabcontrolitemtemplate-binding-157632.aspx looks promising, but its 1st part (the Style setting for TabItem's Header) needs adaptation from WPF to Silverlight (the 2nd part [the item template] is adapted as shown above)

Answer 5

<sdk:TabControl prism:RegionManager.RegionName="MainRegion" prism:TabControlRegionAdapter.ItemContainerStyle="{StaticResource TabHeaderStyle}"> </sdk:TabControl>

at Resource dictionary one would define: 

<Style x:Key="TabHeaderStyle" TargetType="sdk:TabItem">
  <Setter Property="HeaderTemplate">
    <Setter.Value>
      <DataTemplate>
        <!-- add a TextBlock here bound to Title of Property Page --> 
      </DataTemplate> 
    </Setter.Value>
  </Setter>
</Style>  

Answer 6

since it managed to eat up my comments, posting quick URLs here:

http://blogs.msdn.com/b/dphill/archive/2011/01/23/closable-tabbed-views-in-prism.aspx

http://msdn.microsoft.com/en-us/library/microsoft.practices.prism.regions.tabcontrolregionadapter(v=pandp.38).aspx

http://msdn.microsoft.com/en-us/library/microsoft.practices.prism.regions.tabcontrolregionadapter.itemcontainerstyle(v=pandp.38).aspx

one needs a similar adapter, since it seems that at Silverlight (but not at WPF), when you bind a UIElement collection to TabControl it adds them directly without wrapping them in TabItem controls or something like that