This is a migrated thread and some comments may be shown as answers.
Tab control and prism
18 Answers 452 Views
This is a migrated thread and some comments may be shown as answers.
Marcus Lambert
Top achievements
Rank 1
Marcus Lambert asked on 29 Sep 2009, 01:32 PM
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

18 Answers, 1 is accepted

Sort by
0
Miroslav
Telerik team
answered on 01 Oct 2009, 10:36 AM
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.
0
Steven Camsell
Top achievements
Rank 1
answered on 22 Oct 2009, 06:17 PM
Can you elaborate on that with an example in XAML?
0
Miroslav
Telerik team
answered on 23 Oct 2009, 02:13 PM
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.
0
Miroslav
Telerik team
answered on 15 Nov 2009, 11:34 AM
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.
0
Joe Schick
Top achievements
Rank 1
answered on 26 Apr 2010, 10:03 PM
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
0
Miroslav
Telerik team
answered on 30 Apr 2010, 09:33 AM
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.
0
Juliana
Top achievements
Rank 1
answered on 17 Jun 2010, 10:40 AM
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
0
Tina Stancheva
Telerik team
answered on 22 Jun 2010, 05:45 PM
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
0
Juliana
Top achievements
Rank 1
answered on 23 Jun 2010, 11:49 AM
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.
0
Tina Stancheva
Telerik team
answered on 24 Jun 2010, 12:01 PM
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
0
Juliana
Top achievements
Rank 1
answered on 01 Jul 2010, 07:12 AM
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
0
Bhanudas
Top achievements
Rank 1
answered on 05 Apr 2011, 10:32 AM

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

0
Tina Stancheva
Telerik team
answered on 09 Apr 2011, 12:53 PM
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
0
Bhanudas
Top achievements
Rank 1
answered on 11 Apr 2011, 01:47 PM
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

0
Tina Stancheva
Telerik team
answered on 14 Apr 2011, 01:42 PM
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
0
Bhanudas
Top achievements
Rank 1
answered on 18 Apr 2011, 06:48 AM
Hi Tina,

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


Regards,
Bhanudas
0
Geoffrey
Top achievements
Rank 1
answered on 14 Dec 2012, 10:39 PM
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
0
Tina Stancheva
Telerik team
answered on 19 Dec 2012, 03:28 PM
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.

Asked by
Marcus Lambert
Top achievements
Rank 1
Answers by
Miroslav
Telerik team
Steven Camsell
Top achievements
Rank 1
Joe Schick
Top achievements
Rank 1
Juliana
Top achievements
Rank 1
Tina Stancheva
Telerik team
Bhanudas
Top achievements
Rank 1
Geoffrey
Top achievements
Rank 1
Share this question
or