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

Styles Issue in Prism

5 Answers 626 Views

TabControl

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

Moble asked on 16 Nov 2014, 03:05 PM

themeissues.png

Hi,

I have an application in which we are using the RadTabControl with prism framework, and also we are doing a switching of themes in our application. We are switching between 3 Telerik themes (Office 2013, Visual Studio 2013 and Windows 8).

I face the following issues:
The tab headers do not come correctly, if i try to set it with the RadTabControl ItemTemplate property, but my theme switching works fine.
The tab headers come correctly, if i try to set it with the RadTabItem HeaderTemplate property, but my theme switching thereafter doesn't work correctly.
Also, can you please explain the difference between the RadTabControl's ItemTemplate property and the RadTabItem's HeaderTemplate property. My tab header comes fine when set the RadTabItem HeaderTemplate property, but not with the RadTabControl ItemTemplate property. The tabs have a TabItemStyle in the resource dictionaries- using which we inserted a close button into each tab.

I am also attaching a sample image showing the theme issue I am facing.

Please guide me as to how I can do both, i.e., show the tab header as i require (An image, a text and a close button) and also work correctly when toggling between themes.

Thanks.

5 Answers, 1 is accepted

answered on 19 Nov 2014, 11:06 AM

Hi,

Let me first try to explain how the RadTabControl is structured.

The RadTabControl itself is an ItemsControl. Its items are the headers of the tabs. Hence its ItemTemplate property gets or sets the DataTemplate used to display each item. To display the content of the selected tab the RadTabControl uses a ContentPresenter.

As for the RadTabItem it is a HeaderedContentControl and its HeaderTemplate property is bound to the ContentTemplate of the ContentControl hosting the header of the RadTabItem. I hope this answers your question.

As for the PRISM issue I cannot be sure how exactly you have configured your PRISM and how and what you load into the shell. This is why I will need you to provide me with detailed information about your scenario. How the RadTabControl is defined? What you actually inject into it (view or ViewModels) in both scenarios? How your theme changing mechanism works?

Regards,
Pavel R. Pavlov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 20 Nov 2014, 06:54 AM

Hi Pavel,

Here is the information you have asked for:

How the RadTabControl is defined?

<telerik:RadTabControl regions:RegionManager.RegionName="NavigationRegion" Style="{DynamicResource mainTabControlStyle}">

<telerik:RadTabControl.ItemContainerStyle>

<Style TargetType="telerik:RadTabItem" BasedOn="{StaticResource mainTabItemStyle}">

<Setter Property="HeaderTemplate">

<Setter.Value>

<DataTemplate>

<StackPanel ToolTip="{Binding HeaderInfo}">

<Image Source="{Binding HeaderImage}" Width="35" Height="35"/>

<TextBlock Text="{Binding HeaderInfo}" TextTrimming="CharacterEllipsis"

TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center"/>

</StackPanel>

</DataTemplate>

</Setter.Value>

</Setter>

</Style>

</telerik:RadTabControl.ItemContainerStyle>

</telerik:RadTabControl>

What you actually inject into it (view or ViewModels) in both scenarios?
We inject views. We are using prism and we add view using view injection

How your theme changing mechanism works?
We are clearing and adding resource dictionaries in the following way:

Application.Current.Resources.MergedDictionaries.Add(new ResourceDictionary()

{ Source = new Uri("/Project;component/Resources/VisualStudio2013Styles.xaml", UriKind.RelativeOrAbsolute) });

VisualStudio2013Palette.LoadPreset(VisualStudio2013Palette.ColorVariation.Light);

Sending you the VisualStudio2013Styles RD with the RadTabControl relevant styles. You can see that in the RadTabItemStyle - we have added this tag :

<Setter Property="Background" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentDarkBrush}"/>

So, ideally the background of the TabItem should be this ResourceBrush, but for some reason, the TabItem doesn't get this background color.

Following is the VisualStudio2013Styles RD with the RadTabControl relevant styles:

<Thickness x:Key="TabItem_Margin">0</Thickness>

<Thickness x:Key="TabItem_Margin_Selected">0</Thickness>

<ControlTemplate x:Key="MainTabItemTemplate" TargetType="telerik:RadTabItem">

<Grid x:Name="wrapper">

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStateGroup">

<VisualState x:Name="Normal"/>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>

</Storyboard>

</VisualState>

<VisualState x:Name="Selected">

<Storyboard>

<DoubleAnimation Duration="0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Office2013Resource ResourceKey=AccentMainBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedMouseOver">

<Storyboard>

<DoubleAnimation Duration="0" Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="(UIElement.Opacity)" To="1"/>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectionVisual" Storyboard.TargetProperty="BorderBrush" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik1:Office2013Resource ResourceKey=AccentMainBrush}"/>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderElement" Storyboard.TargetProperty="Foreground" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0" Value="{telerik:Office2013Resource ResourceKey=AccentMainBrush}"/>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement" To="0.3" Duration="0:0:0.1"/>

<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalVisual" To="0" Duration="0:0:0.1"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PlacementStates">

<VisualState x:Name="HorizontalTop"/>

<VisualState x:Name="HorizontalLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="HorizontalRight"/>

<VisualState x:Name="HorizontalBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalTop">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalLeft">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalRight">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform" Duration="0">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="VerticalBottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="OrientationTransform" Storyboard.TargetProperty="LayoutTransform" Duration="0">

<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}"

BorderBrush="{TemplateBinding BorderBrush}"

Background="{TemplateBinding Background}"

BorderThickness="{TemplateBinding BorderThickness}"/>

<Border x:Name="MouseOverVisual"

Opacity="0"

Margin="{StaticResource TabItem_Margin}"

BorderBrush="{telerik1:Office2013Resource ResourceKey=AccentMainBrush}"

BorderThickness="{StaticResource TabItem_OuterBorderThickness}"

Background="{telerik1:Office2013Resource ResourceKey=MainBrush}"

CornerRadius="{StaticResource TabItem_OuterCornerRadius}"/>

<Border x:Name="SelectionVisual"

Opacity="0"

Margin="{StaticResource TabItem_Margin_Selected}"

Background="{telerik1:Office2013Resource ResourceKey=MainBrush}"

BorderBrush="{telerik1:Office2013Resource ResourceKey=HighDarkBrush}"

BorderThickness="{StaticResource TabItem_OuterBorderThickness}"

CornerRadius="{StaticResource TabItem_OuterCornerRadius}"/>

<telerikPrimitives:LayoutTransformControl x:Name="OrientationTransform">

<Grid>

<ContentControl x:Name="HeaderElement"

IsTabStop="False"

Content="{TemplateBinding Header}"

ContentTemplate="{TemplateBinding HeaderTemplate}"

Foreground="{TemplateBinding HeaderForeground}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

Margin="{TemplateBinding Padding}"

ContentStringFormat="{TemplateBinding HeaderStringFormat}"

ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}"

SnapsToDevicePixels="True"/>

<telerik:RadButton Grid.Row="0" Style="{DynamicResource tabCloseButtonStyle}"/>

</Grid>

</telerikPrimitives:LayoutTransformControl>

</Grid>

</ControlTemplate>

<Style x:Key="mainTabItemStyle" TargetType="telerik:RadTabItem" BasedOn="{StaticResource RadTabItemStyle}">

<Setter Property="Background" Value="{telerik:VisualStudio2013Resource ResourceKey=AccentDarkBrush}"/>

<Setter Property="BorderThickness" Value="1"/>

<Setter Property="Height" Value="75"/>

<Setter Property="Width" Value="100"/>

<Setter Property="Margin" Value="0 0 0.5 0"/>

<Setter Property="Template" Value="{StaticResource MainTabItemTemplate}"/>

</Style>

<ControlTemplate x:Key="TabControlTemplate" TargetType="telerikNavigation:RadTabControl">

<Grid>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Disabled"/>

<VisualState x:Name="Normal"/>

</VisualStateGroup>

<VisualStateGroup x:Name="DropDownDisplayStates">

<VisualState x:Name="DropDownButtonCollapsed"/>

<VisualState x:Name="DropDownButtonVisible">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DropDownButtonElement" Storyboard.TargetProperty="Visibility">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Visibility>Visible</Visibility>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="PlacementStates">

<VisualState x:Name="Left">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="-90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>0 1 1 1</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Right">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="90"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>1 1 0 1</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Top"/>

<VisualState x:Name="Bottom">

<Storyboard>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderDockedElement" Storyboard.TargetProperty="LayoutTransform">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<RotateTransform Angle="180"/>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentBorder" Storyboard.TargetProperty="BorderThickness">

<DiscreteObjectKeyFrame KeyTime="0">

<DiscreteObjectKeyFrame.Value>

<Thickness>1 1 1 0</Thickness>

</DiscreteObjectKeyFrame.Value>

</DiscreteObjectKeyFrame>

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<telerik:RadDockPanel LastChildFill="True">

<telerikPrimitives:LayoutTransformControl x:Name="HeaderDockedElement" telerik:RadDockPanel.Dock="Top">

<Grid SnapsToDevicePixels="True" x:Name="grid">

<Border x:Name="HeaderBackground" Background="{TemplateBinding HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>

<telerik:RadDockPanel Panel.ZIndex="10">

<ContentPresenter Content="{TemplateBinding AdditionalContent}" telerik:RadDockPanel.Dock="Right" Margin="0 4 0 2"/>

<ToggleButton x:Name="DropDownButtonElement"

Visibility="Collapsed"

telerik:RadDockPanel.Dock="Right"

Style="{TemplateBinding DropDownButtonStyle}"

ClickMode="Press"

IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">

<telerikNavigation:RadContextMenu.ContextMenu>

<telerikTabControl:DropDownMenu x:Name="DropDownMenuElement"

StaysOpen="False"

Placement="Bottom"

Style="{TemplateBinding DropDownStyle}"

ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"

ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"

DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"

HorizontalOffset="2"

VerticalOffset="2"/>

</telerikNavigation:RadContextMenu.ContextMenu>

</ToggleButton>

<RepeatButton x:Name="LeftScrollButtonElement" Style="{StaticResource ScrollButtonStyle}" Margin="2 4 2 4"/>

<RepeatButton x:Name="RightScrollButtonElement" Style="{StaticResource ScrollButtonStyle}" telerik:RadDockPanel.Dock="Right" RenderTransformOrigin="0.5 0.5" Margin="2 4 0 4">

<RepeatButton.RenderTransform>

<ScaleTransform ScaleX="-1"/>

</RepeatButton.RenderTransform>

</RepeatButton>

<ScrollViewer

Style="{StaticResource EmptyScrollViewerStyle}"

VerticalScrollBarVisibility="Disabled"

BorderThickness="0"

IsTabStop="False"

HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}"

Margin="0"

x:Name="ScrollViewerElement">

<ItemsPresenter/>

</ScrollViewer>

</telerik:RadDockPanel>

</Grid>

</telerikPrimitives:LayoutTransformControl>

<Border x:Name="ContentBorder"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Mode=TwoWay}"

Background="{TemplateBinding Background}"

Padding="{TemplateBinding Padding}">

<Grid>

<ContentPresenter x:Name="ContentElement"

Visibility=

"{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,Converter={StaticResource InvertBoolToVisConverter}}"

ContentTemplate="{TemplateBinding SelectedContentTemplate}"

ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"/>

<Grid x:Name="ContentElementsPanel" Visibility=

"{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BoolToVisConverter}}"

/>

</Grid>

</Border>

</telerik:RadDockPanel>

</Grid>

<ControlTemplate.Triggers>

<Trigger Property="HasItems" Value="False">

<Setter Property="Visibility" TargetName="grid" Value="Collapsed"/>

</Trigger>

<Trigger Property="HasItems" Value="True">

<Setter Property="Visibility" TargetName="grid" Value="Visible"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

<Style x:Key="mainTabControlStyle" TargetType="telerik:RadTabControl" BasedOn="{StaticResource RadTabControlStyle}">

<Setter Property="BorderThickness" Value="0.5 0 0.5 0.5"/>

<Setter Property="HeaderBackground" Value="Transparent"/>

<Setter Property="Template" Value="{StaticResource TabControlTemplate}"/>

<Setter Property="ItemContainerStyle" Value="{StaticResource mainTabItemStyle}"/>

</Style>

Thanks.

answered on 25 Nov 2014, 03:53 PM

TabControl.zip

Hello,

The provided information was really helpful. I was able to see some things that can be improved. First things first.

I can see that the AccentDarkBrush resource that you are trying to access is actually defined in our Telerik.Windows.Themes.VisualStudio2013.dll. This is why you need to merge the Telerik.Windows.Controls.xaml resource dictionary which is defined in the Telerik.Windows.Themes.VisualStudio2013.dll. By doing so you will be able to access that resource. Please note that the Background color will be visualized when the respective tab is not selected nor hovered.

Also, I can see that you have added a button in the default template of the RadTabItem. That button however is placed directly over the ContentControl hosting the Header of the tabs. This is why you need to move the button in a separate column.

These changes are implemented in the attached project. Please take a look at it and let me know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.