This is a migrated thread and some comments may be shown as answers.

Tab control and prism

18 Answers 540 Views

TabControl

This is a migrated thread and some comments may be shown as answers.

18 Answers, 1 is accepted

answered on 23 Oct 2009, 02:13 PM

tabcontrolitemcontainerstyle.zip

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.

answered on 15 Nov 2009, 11:34 AM

telerik-prism-updated-2009q3.zip

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.

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

answered on 22 Jun 2010, 05:45 PM

tabcontrolandprism.zip

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

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

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

answered on 09 Apr 2011, 12:53 PM

TabControlAndPRISM.zip

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

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

answered on 14 Apr 2011, 01:42 PM

TabControlViewsPRISM.zip

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

answered on 19 Dec 2012, 03:28 PM

263762-TabControlViewsPRISM.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Tab control and prism

18 Answers, 1 is accepted