TabControl with ItemSource

2 posts, 0 answers
  1. Jerome
    Jerome avatar
    87 posts
    Member since:
    Aug 2010

    Posted 28 Jan 2013 Link to this post

    This is probably a basic WPF question, and not specifically Telerik related, but I figured I'd ask here. I am trying to create a reusable control, right now named SectionLayout, which allows the user of the control to define "sections", with Visuals in each section. I want to render this using RadTabControl.

    Basically, the consumer of the SectionLayout would be using it like this:

    <local:SectionLayout>
      <local:Section Name="Foo">
        <Button Text="{Binding Foo}" />
      </local:Section>
    </local:SectionLayout>

    I've already got most of it working. SectionLayout has a "Sections" property, of type SectionCollection, that holds items of type Section. Section has Name and Content properties. Name is a string, Content is an object.

    The ControlTemplate for SectionLayout currently looks like this:

    <ControlTemplate>
    <telerik:RadTabControl
        Align="Right"
        TabOrientation="Vertical"
        TabStripPlacement="Left"
        ItemsSource="{TemplateBinding Sections}">
        <telerik:RadTabControl.ItemContainerStyle>
            <Style
                TargetType="{x:Type telerik:RadTabItem}">
                <Setter
                    Property="MinHeight"
                    Value="150" />
                <Setter
                    Property="MinWidth"
                    Value="30" />
            </Style>
        </telerik:RadTabControl.ItemContainerStyle>
        <telerik:RadTabControl.ItemTemplate>
            <DataTemplate>
                <TextBlock
                    Text="{Binding Name}" />
            </DataTemplate>
        </telerik:RadTabControl.ItemTemplate>
        <telerik:RadTabControl.ContentTemplate>
            <DataTemplate
                    DataType="{x:Type local:Section}">
                <ContentPresenter
                    Margin="4,4,4,4"
                    DataContext="{TemplateBinding DataContext}"
                    Content="{Binding Content}" />
            </DataTemplate>
        </telerik:RadTabControl.ContentTemplate>
    </telerik:RadTabControl>
    </ControlTemplate>

    So, basically I'm just making an easier interface to use a RadTabControl. So I can reuse it in other places. Though it might change from being a RadTabControl to something else in the future.

    The problem I'm having is getting the original DataContext of Section.Content property to flow into the RadTabControl.ContentTemplate. The ContentTemplate is of course given the business object (Section) as it's datacontext. So, I can easily present Section.Content. However, when I do so, Section.Content begins inheriting the DataContext given to it by the ContentPresenter, which happens to be Section.Content.

    How can I do this properly? I want the user to be able to use my control as he would any normal layout control: Grid, Canvas, StackPanel, whatever. But, I need to use a TabControl internally to do the layout.
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 31 Jan 2013 Link to this post

    Hi Jerome,

    I am not sure that I understand your scenario correctly. However, I will suggest you let the RadTabControl handle the delivering of the DataContext by itself. You can do this by removing the TemplateBinding from the ContentPresenter and the DataType from the DataTemplate of your RadTabControl.ContentTemplate. Hopefully it will work for you. In case that this approach doesn't work, I will kindly ask you to send me your project so I will be able to suggest the best approach in your scenario. Thank you for your cooperation.

    Regards,
    Pavel R. Pavlov
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top