SelectedTab Style

[Dietmar]

Hi,

After 9h 15min of trying to change the color of a f**king selected Tab of a Radpane I finally give up an post this thread.

I have created a copy of RadPane Control and Placed it in a style. Changed and added Values. Commented things out. And allways the same result.

Here is my code:

<Style TargetType="telerik:RadPane" BasedOn="{StaticResource RadPaneStyle}">
                <Setter Property="Background" Value="#121212"/>
                <Setter Property="Foreground" Value="#808080"/>
                <Setter Property="Template">
                    <Setter.Value>
                    <ControlTemplate>
                        <Grid x:Name="wrapper" Margin="0,0,0,-2" Background="Purple">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <DoubleAnimation To="0.2" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HeaderElement"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Normal"/>
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                           
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="MouseOverVisual"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="PinnedVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#202020"/>
                                                   
                                            </ObjectAnimationUsingKeyFrames>
                                            
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)"  Storyboard.TargetName="SelectedVisual"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="#202020"/>
                                                  
                                                </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="PinnedStates">
                                    <VisualState x:Name="Unpinned">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PinnedVisual"/>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="wrapper">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>1</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" Storyboard.TargetName="HeaderElement">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Thickness>0</Thickness>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="MouseOverVisual">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Collapsed</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pinned"/>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border x:Name="PinnedVisual" BorderBrush="Red" Background="Red" BorderThickness="0,0,0,4" Grid.ColumnSpan="2" Opacity="0"/>
                            <Border x:Name="MouseOverVisual"  Background="Red" Grid.ColumnSpan="2" Opacity="0"/>
                            <Border x:Name="SelectedVisual" BorderBrush="Red" BorderThickness="1,0,1,1" Background="Red" Margin="0,-1,0,0" Opacity="0"/>
                            <Primitives:TabItemContentPresenter x:Name="HeaderElement" Background="Red" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" MinHeight="16" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Primitives:TabItemContentPresenter.Style>
                                    <Style TargetType="{x:Type Primitives:TabItemContentPresenter}">
                                            <Setter Property="Background" Value="Blue"/>
                                            <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="{x:Type Primitives:TabItemContentPresenter}">
                                                    <Border BorderBrush="{TemplateBinding BorderBrush}" Background="OrangeRed" BorderThickness="{TemplateBinding BorderThickness}" >
                                                            <ContentPresenter  ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                                    </Border>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                        <Setter Property="IsTabStop" Value="False"/>
                                    </Style>
                                </Primitives:TabItemContentPresenter.Style>
                            </Primitives:TabItemContentPresenter>
                        </Grid>
                    </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

 

Also tried to get some results by creating copy of all other raddocking components.

Why can't there be a simple TabItemHeaderTemplate which can easily be styled?

Btw. I don't want to use any predefined theme.

Regard

[Vicky]

Hi Dietmar,

Thanks for the provided code snippet. I investigated it and can confirm that the style does not apply properly.

Let me first explain that the RadDocking's visual structure has the so-called 'docked' panes - all these panes that are hosted inside the control. They have five possible docking positions - Left, Top, Right, Bottom and Tabbed document (here the docked RadPane will be inserted as a new tab page). Another key point for their layout position and visual representation here is whether they are pinned or unpinned. Depending on these docking positions and whether the panes are pinned/unpinned, the RadPaneStyle uses one of the following templates - BottomTemplate, RightTemplate, TopTemplate, LeftTemplate. This means that the desired changes should be applied to all these templates in order to achieve design consistency for all RadPane states.

Your approach is actually a correct one, yet it needs a little polishing and the desired behavior will be accomplished.
You only need to extract the RadPane's desired ControlTemplate and change the colors of the SelectedVisual Border, which will be shown in a VisualState when the pane becomes selected.

On a side note, attempting to set a hex color string in a DiscreteObjectKeyFrame will result to an error with sample message '#202020' is not a valid value for property 'Foreground':

<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="HeaderElement">
    <DiscreteObjectKeyFrame KeyTime="0" Value="#202020"/>
</ObjectAnimationUsingKeyFrames>

Instead, a Brush is expected as a Value for this DiscreteObjectKeyFrame.

For your convenience, I have prepared a sample project that has two RadDocking controls:

• the one on the left uses the Style you provided with the modified and added properties with some guiding comments;
• the one on the right side only changes the Background and BorderBrush properties of the SelectedVisual border;

I also wanted to mention that it looks like you have actually extracted the default RadPaneStyle for the VisualStudio2013 theme. That's why the project I prepared uses this theme and the Implicit Styles mechanism.

Please, find this project attached to my reply, try it out and let me know if any further assistance from my side is needed.
I'll be happy to help.

Regards,
Vicky
Progress Telerik