Tab control and prism

19 posts, 0 answers
  1. Marcus Lambert
    Marcus Lambert avatar
    41 posts
    Member since:
    Aug 2009

    Posted 29 Sep 2009 Link to this post

    Hi,
    I am wondering if any body has any example of using th tab control with the prism framework.
    I am injecting views into the tab control as a named region and my tabs are appearing but I am wondering how to set the header property of the tab to a property of my View model.
    Thanks
    Marcus
  2. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 01 Oct 2009 Link to this post

    Hi Marcus Lambert,

    You can assign an ItemContainerStyle to the TabControl that will have both a HeaderTemplate and ContentTemplate assigned. The HeaderTemplate could be something (a TextBlock) that binds to your title property and the ContentTemplate could be a ContentPresenter that displays the view.

    Does this work for you?

    Regards,
    Miroslav
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft banner
  4. Steven Camsell
    Steven Camsell avatar
    1 posts
    Member since:
    Jul 2009

    Posted 22 Oct 2009 Link to this post

    Can you elaborate on that with an example in XAML?
  5. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 23 Oct 2009 Link to this post

    Hi Steven,

    Yes, I have attached an example project that you can have a look at.

    Kind regards,
    Miroslav
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  6. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 15 Nov 2009 Link to this post

    Hi,

    There is no need to create a complicated prism region adapter for the RadTabCotnrol. This is a follow up with a project showing how you can populate the RadTabCotnrol with Views or ViewModels using prism with less xaml and code.

    Regards,
    Miroslav
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  7. Joe Schick
    Joe Schick avatar
    14 posts
    Member since:
    Oct 2009

    Posted 26 Apr 2010 Link to this post

    Your region adapter doesn't handle views being removed from the region. Even if support for removing views is added there are problems with memory leaks.

    See this thread.

    http://www.telerik.com/community/forums/silverlight/tabcontrol/radtabcontrol-memory-leaks.aspx
  8. Miroslav
    Admin
    Miroslav avatar
    922 posts

    Posted 30 Apr 2010 Link to this post

    Hello Joe Schick,

    We replied in the forum thread you linked to:

    http://www.telerik.com/community/forums/silverlight/tabcontrol/radtabcontrol-memory-leaks.aspx

    Regards,
    Miroslav
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  9. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 17 Jun 2010 Link to this post

    Hi Miroslav,

    Your solution is very nice. But when I try to add close buttons according to http://www.telerik.com/help/silverlight/radtabcontrol-how-to-add-close-button-to-the-tab-headers.html , I get an error "Can not set HeaderTemplate/Selector and DisplayMemberPath simultaneously". If I delete DisplayMemberPath="HeaderInfo" and set binding in datatemplate like
    <DataTemplate x:Key="CloseTemplate">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" TextWrapping="Wrap"
                                           Text="{Binding HeaderInfo}"/>

                    <Button Grid.Column="1" Margin="3 0 0 0" Content="x"
                                            HorizontalAlignment="Right"
                                           VerticalAlignment="Center"
                                           example:RoutedEventHelper.EnableRoutedClick="True" />
                </Grid>
            </DataTemplate>

    Header stiil does not seem to appear.
    How can I bind item header to view name and have close button at the same time?

    Thanks,
    Juliana
  10. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 22 Jun 2010 Link to this post

    Hello Juliana,

    I couldn't reproduce the issue. Can you please take a look at the project I used for testing and let me know if it works for you.

    Thank you in advance.

    Regards,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  11. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 23 Jun 2010 Link to this post

    Hello Tina,

    Thanks for your sample. Yes, it works perfectly.
    But I actually used the first example where View contains Title. Creating View in ViewModel doesn't work for me well. Is there any way to place title in View? So that ViewModel doesn't have any reference to View?

    Thanks in advance,
    Juliana.
  12. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 24 Jun 2010 Link to this post

    Hi Juliana,

    In this case it would be better to edit the control template of the RadTabItem and to add the Close Button there insted in a HeaderTemplate.
    <UserControl.Resources>
        <Thickness x:Key="TabItem_OuterBorderThickness">1 1 1 0</Thickness>
        <SolidColorBrush x:Key="ControlForeground_Normal" Color="#FF000000"/>
        <SolidColorBrush x:Key="TabItem_Background_Normal" Color="Transparent"/>
        <SolidColorBrush x:Key="TabItem_OuterBorder_Normal" Color="Transparent"/>
        <Thickness x:Key="TabItem_Margin">0 2 0 0</Thickness>
        <SolidColorBrush x:Key="TabItem_InnerBorder_Normal" Color="Transparent"/>
        <Thickness x:Key="TabItem_InnerBorderThickness">1 1 1 0</Thickness>
        <CornerRadius x:Key="TabItem_InnerCornerRadius">2 2 0 0</CornerRadius>
        <CornerRadius x:Key="TabItem_OuterCornerRadius">3 3 0 0</CornerRadius>
        <LinearGradientBrush x:Key="TabItem_Background_MouseOver" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItem_OuterBorder_MouseOver" Color="#FF848484"/>
        <SolidColorBrush x:Key="TabItem_InnerBorder_MouseOver" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="TabControl_ContentBorderBrush" Color="#FF848484"/>
        <Thickness x:Key="TabItem_Margin_Selected">0</Thickness>
        <LinearGradientBrush x:Key="TabItem_Background_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="White"/>
            <GradientStop Color="#FFFAFAFA" Offset="1"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="TabItem_OuterBorder_Selected" Color="#FF848484"/>
        <SolidColorBrush x:Key="TabItem_InnerBorder_Selected" Color="#FFFFFFFF"/>
        <SolidColorBrush x:Key="TabItem_OuterBorder_SelectedMouseOver" Color="#FFFFC92B"/>
        <ControlTemplate x:Key="TabItemTemplate" TargetType="telerik:RadTabItem">
            <Grid x:Name="wrapper">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStateGroup">
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="Selected">
                            <Storyboard>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="SelectedMouseOver">
                            <Storyboard>
                                <DoubleAnimation Duration="0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="BorderBrush">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource TabItem_OuterBorder_SelectedMouseOver}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Opacity" To="0.3"/>
                                <DoubleAnimation Duration="0:0:0.1" Storyboard.TargetName="NormalVisual" Storyboard.TargetProperty="Opacity" To="0"/>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="PlacementStates">
                        <VisualState x:Name="HorizontalTop"/>
                        <VisualState x:Name="HorizontalLeft">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="180"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="HorizontalRight"/>
                        <VisualState x:Name="HorizontalBottom">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="180"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="VerticalTop">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="-90"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="VerticalLeft">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="90"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="VerticalRight">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="-90"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="VerticalBottom">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform">
                                    <DiscreteObjectKeyFrame KeyTime="0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <RotateTransform Angle="-90"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="NormalVisual" Margin="{StaticResource TabItem_Margin}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}">
                    <Border BorderBrush="{StaticResource TabItem_InnerBorder_Normal}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/>
                </Border>
                <Border x:Name="MouseOverVisual" Margin="{StaticResource TabItem_Margin}" Opacity="0" Background="{StaticResource TabItem_Background_MouseOver}" BorderBrush="{StaticResource TabItem_OuterBorder_MouseOver}" BorderThickness="{StaticResource TabItem_OuterBorderThickness}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}">
                    <Border BorderBrush="{StaticResource TabItem_InnerBorder_MouseOver}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/>
                </Border>
                <Border BorderBrush="{StaticResource TabControl_ContentBorderBrush}" BorderThickness="0 0 0 2"/>
                <Border x:Name="SelectionVisual" Margin="{StaticResource TabItem_Margin_Selected}" Opacity="0" Background="{StaticResource TabItem_Background_Selected}" BorderBrush="{StaticResource TabItem_OuterBorder_Selected}" BorderThickness="{StaticResource TabItem_OuterBorderThickness}" CornerRadius="{StaticResource TabItem_OuterCornerRadius}">
                    <Border BorderBrush="{StaticResource TabItem_InnerBorder_Selected}" BorderThickness="{StaticResource TabItem_InnerBorderThickness}" CornerRadius="{StaticResource TabItem_InnerCornerRadius}"/>
                </Border>
      
                <Telerik_Windows_Controls_Primitives:LayoutTransformControl x:Name="OrientationTransform">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <ContentPresenter x:Name="HeaderElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
                        <Button Grid.Column="1" Content="x" Width="16"
                                                Height="20" HorizontalAlignment="Center"
                                                VerticalAlignment="Center"
                                                example:RoutedEventHelper.EnableRoutedClick="True" />
                            </Grid>
                </Telerik_Windows_Controls_Primitives:LayoutTransformControl>
      
            </Grid>
        </ControlTemplate>
        <Style x:Key="RadTabItemStyle" TargetType="telerik:RadTabItem">
            <Setter Property="MinWidth" Value="5"/>
            <Setter Property="BorderThickness" Value="{StaticResource TabItem_OuterBorderThickness}"/>
            <Setter Property="Foreground" Value="{StaticResource ControlForeground_Normal}"/>
            <Setter Property="MinHeight" Value="5"/>
            <Setter Property="Background" Value="{StaticResource TabItem_Background_Normal}"/>
            <Setter Property="BorderBrush" Value="{StaticResource TabItem_OuterBorder_Normal}"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="Padding" Value="6 3"/>
            <Setter Property="IsTabStop" Value="True"/>
            <Setter Property="Template" Value="{StaticResource TabItemTemplate}"/>
        </Style>
      
    </UserControl.Resources>
     
    Then you can set the ItemContainerStyle property to the RadTabItemStyle. This approach will allow you to use the DisplayMemberPath property and still have a Close Button in the header.

    Give this approach a try and let me know if it works for you.

    Greetings,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  13. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 01 Jul 2010 Link to this post

    Hello Tina,

     I'll keep in mind such a possibility for future, thanks. But for now I adapted your first solution and it works fine for me.
    Thanks a lot for your help. Nice work!

    Regards,
    Juliana
  14. Bhanudas
    Bhanudas avatar
    8 posts
    Member since:
    Apr 2011

    Posted 05 Apr 2011 Link to this post

    I want to show two views as RadTabItem for RadTabControl by using PRISM. here i have gone throuh  your solution tabcontrolandprism.zip code project. But my requirement is that in, Module1.cs file of Modules project, there is Initialize() method. If we look at following code location

     

    public void Initialize()
            {
                 
                this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () =>
                {
                    return new FlandersViewModel();
                });
      
                this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () =>
                {
                    return new SimpsonsViewModel();
                });
            }

     


    Here viewModel is register with regionManager, But I want to register view with regions like following code

    this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () => container.Resolve<FlandersView>());                                                
      
    this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () => container.Resolve<SimpsonsView>());                                                                                  

    When I performed same changes in code and binded viewmodel with view, I am not able to see any header or view.

    So please let me know, can it possible to register view with regionManager when we work with Rad Tab Control ? If it possible then please provide me way to achieve this by using  tabcontrolandprism.zip solution.

    Thanks in advance for your help!
    Regards,
    Bhanudas

  15. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 09 Apr 2011 Link to this post

    Hello Joe Schick,

    Please accept my apology for the delayed response.

    I noticed that you are registering the Views with the RegionManager. However, in the previously attached solution the Views and ViewModels in Module1 are defined so that you need to register the ViewModel as a view in the RegionManager.

    I attached an updated solution. I hope it helps. Let us know if we can further assist you.

    Best wishes,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  16. Bhanudas
    Bhanudas avatar
    8 posts
    Member since:
    Apr 2011

    Posted 11 Apr 2011 Link to this post

    Hi Tina,

    Thanks for your response.

    When I gone through your solution, I notice that here also we are using ViewModel in Initialize() method.

    this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () => container.Resolve<FlandersViewModel>());
    this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () => container.Resolve<SimpsonsViewModel>());

    But Here I want to use View, while RegisterViewWithRegion() function. like sample code below.

    this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () => container.Resolve<FlandersView>());
    this.regionManager.RegisterViewWithRegion(RegionNames.TabControlRegion, () => container.Resolve<SimpsonsView>());

    Can ypu please guide me how to work with this, using same solution?

    Thanks,
    Bhanudas

  17. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 14 Apr 2011 Link to this post

    Hello Bhanudas,

    The example attached in this thread is designed to inject ViewModels to the TabControl region so you cannot use it to add the Views instead. However, I prepared a new solution introducing how you can set the RadTabControl as region and create different modules - each adding a new view to the TabControl region.

    Please have a look at it and let me know if it works for you.

    Greetings,
    Tina Stancheva
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  18. Bhanudas
    Bhanudas avatar
    8 posts
    Member since:
    Apr 2011

    Posted 18 Apr 2011 Link to this post

    Hi Tina,

    Thanks a lot !!!
    This solution working fine for me.


    Regards,
    Bhanudas
  19. Geoffrey
    Geoffrey avatar
    16 posts
    Member since:
    Mar 2011

    Posted 14 Dec 2012 Link to this post

    Could you elaborate on this example with how to share the implicit styling of the telerik controls to share one of the predefined telerik themes to each module?

    -Geoff
  20. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 19 Dec 2012 Link to this post

    Hello Geoff,

    I'm not sure what approach exactly you aim to implement. However, you can use the no-xaml Telerik assemblies in the solution and create one common project to hold the implicit styles. Then you can reference these styles from the different modules or from the shell solution.

    I modified the previously attached solution to use the latest NoXaml Telerik assemblies and I added the appropriate Telerik styles in ResourceDictionaries. Please note that in a PRISM scenario, as the modules are loaded in runtime I had to create a custom RegionAdapter for the RadTabControl to apply the Style property on the modules.

    Please have a look at the solution and let me know if it helps.

    All the best,
    Tina Stancheva
    the Telerik team

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

Back to Top
DevCraft banner