Themes and Styles issues in RadPane, RadDocumentPane, RadTabControl(TabItem).

[Karthikeyan]

Hi,

I've applied the Theme for throughtout application in app.xaml.cs as follows,

StyleManager.ApplicationTheme = new SummerTheme();

I've used the SummerTheme for my app.
But here I'm facing issues to change the behaviour of RadPane, RadTabControl, RadTabItem and RadDocumentPane.
After applied the summer theme, In a particular page I'm changing the behaviour of the above mentioned items as follows,

<SolidColorBrush x:Key="PaneTabForeground_Highlighted" Color="MintCream" />
 <LinearGradientBrush x:Key="bsRed" EndPoint="0.5,1" StartPoint="0.5,0">
       <GradientStop Color="#D00000" Offset="0.2"/>
       <GradientStop Color="#FFECEC" Offset="0.6"/>
 </LinearGradientBrush>

        <Style TargetType="telerikDocking:RadDocumentPane">
            <Setter Property="Background" Value="Red" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="telerikDocking:RadDocumentPane">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualStateGroup.Transitions>
                                        <VisualTransition GeneratedDuration="0:0:0.2"/>
                                    </VisualStateGroup.Transitions>
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="MouseOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Opacity" Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PaneTabForeground_Highlighted}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Opacity" Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource bsRed}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

But its not refelecting in the page, Please guide me how to do the "MOUSEOVER/SELECTED" states for RadTabControl(TabItem), RadPane, RadDocumentPane.
Please do the needful.

Thanks,
Karthikeyan Manickam.

 

[Dani]

Hi Karthikeyan,

There are a few issues with the approach you have chosen.

First and foremost, your style appears to be incomplete. You set a new ControlTemplate, but nothing is in this ControlTemplate.  Secondly, it is important to keep in mind that Blend will currently only generate the Office Black theme for your pane, so if you need to edit another theme, you should copy and edit the resources from the theme you have chosen rather than use Blend.

I would suggest that you copy SummerTheme resources from your local RadControls installation folder. Please, copy the full style and all referenced templates and brushes for the RadPane or RadDocumentPane. Then, make your style implicit to make sure it gets applied alongside your application theme.

What you must do in order to modify the mouseover and selected visual states of a RadPane, is to style the ButtonChrome that is part of each PaneHeader template. Each PaneHeader template contains a Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ChromeUnpinned" and a Telerik_Windows_Controls_Chromes:ButtonChrome x:Name="ChromePinned" visual elements. Create a style for this ButtonChrome (or again copy it from the RadControls installation folder) and make the style implicit to make sure it applies to all panes. You are then free to edit and change brushes from the ButtonChrome style.

I hope this information will be helpful.


Best wishes,
Dani
the Telerik team

[Karthikeyan]

Hi Dani,

You're Right. The expression blend will create the styles only with Office_Black Theme.
As you suggest, I've to place the RadPane or RadDocumentPane Resources from SUMMER theme of TELERIK installed folder,

C:\Program Files\Telerik\RadControls for Silverlight Q2 2011 SP1\Themes\Summer\Themes\Summer

So, Here I'm using Q2 2011 Release RadControls. I cant find the styles for RadPane or RadDocumentPane.
Here with attached the screenshots of the list available files of SUMMER THEME.
Please guide me, If i'm missing anything.
Its a urgent requirement. Please do the needful.

Thanks in advance,
Karthikeyan Manickam.

[Dani]

Hi Karthikeyan,

Since you are working with RadDocking control, the styles you need are in the Docking.xaml resource dictionary.

I hope it helps.

Kind regards,
Dani
the Telerik team

[Karthikeyan]

Hi Dani,

Thanks for your kind guidence.
As per your advice I've taken the full STYLES from docking.xaml from Summer Theme.

I've changed for RADPANE --> (Vertical_Normal,Vertical_Selected,Vertical_SelectedHighlighted) and RADDOCUMENTPANE(Pane_Selected,Pane_SelectedHighlighted) it's working perfect as expected.

But here the problem what I was facing from start is, If I'm applying the  "StyleManager.ApplicationTheme = new SummerTheme();" in app.xaml.cs.
Then the application is not working as expected.

I've developed sample application for your reference.But I cannot attached it.
Please provide me the sample ASAP as expected it'd great help for me.

Please let me know if the requirement is not clear.
Please do the needful.

Thanks,
Karthikeyan Manickam.

[Dani]

Hello Karthikeyan,

Implicit styles and an application theme do not always work as expected. Try setting your custom styles explicitly, i.e. with an x:Key. Then, you can leave the application theme as is.

I hope this helps.

Kind regards,
Dani
the Telerik team

[Karthikeyan]

Hi Dani,

As per you advice, I've tried to setting with "x:Key". But still It's not working.
I dont know where i'm missing. Here with attached the pictures of output pages after applying the styles as follows,

RADDOCUMETPANE:-
----------------------------

<

Style x:Key="styleDocumentPane" TargetType="telerikDocking:RadDocumentPane" >  

 

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

 

<Setter Property="LeftTemplate" Value="{StaticResource PaneTemplate}" />  

 

<Setter Property="TopTemplate" Value="{StaticResource PaneTemplate}" />  

 

<Setter Property="RightTemplate" Value="{StaticResource PaneTemplate}" />  

 

<Setter Property="BottomTemplate" Value="{StaticResource PaneBottomTemplate}" />  

 

<Setter Property="DocumentHostTemplate" Value="{StaticResource PaneDocumentHostTemplate}" />  

 

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

 

<Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}" />  

 

<Setter Property="Background" Value="{StaticResource PaneTabBackground_Normal}" />  

 

<Setter Property="Foreground" Value="White" />  

 

<Setter Property="Foreground" Value="{StaticResource PaneTabForeground}" />  

 

<Setter Property="Padding" Value="0" />  

 

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

 

<Setter.Value>  

 

<DataTemplate>  

 

<telerikNavigation:RadContextMenu telerik:StyleManager.Theme="{StaticResource Theme}" InheritDataContext="False"> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsFloatingOnly}" Command="telerikDocking:RadDockingCommands.Floating" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsDockableOptionChecked}" Command="telerikDocking:RadDockingCommands.Dockable" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />  

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsInDocumentHost}" Command="telerikDocking:RadDockingCommands.TabbedDocument" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsPinned, Converter={StaticResource invertedBooleanConverter}}" Command="telerikDocking:RadDockingCommands.Pin" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsHidden}" Command="telerikDocking:RadDockingCommands.Close" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />  

 

</telerikNavigation:RadContextMenu> 

 

</DataTemplate> 

 

</Setter.Value> 

 

</Setter>

 

</Style>

 

RADPANE:-
---------------

<

Style x:Key="styleRadPane" TargetType="telerikDocking:RadPane" > 

 

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

 

<Setter Property="LeftTemplate" Value="{StaticResource PaneTemplate}" />  

 

<Setter Property="TopTemplate" Value="{StaticResource PaneTemplate}" /> 

 

<Setter Property="RightTemplate" Value="{StaticResource PaneTemplate}" />  

 

<Setter Property="BottomTemplate" Value="{StaticResource PaneBottomTemplate}" /> 

 

<Setter Property="DocumentHostTemplate" Value="{StaticResource PaneDocumentHostTemplate}" /> 

 

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

 

<Setter Property="BorderBrush" Value="{StaticResource PaneTabOuterBorder_Normal}" /> 
<Setter Property="Background" Value="{StaticResource PaneTabBackground_Normal}" />  

 

<Setter Property="Foreground" Value="{StaticResource PaneTabForeground}" />  

 

<Setter Property="Padding" Value="0" />  

 

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

 

<Setter Property="ContextMenuTemplate"> 

 

<Setter.Value>  

 

<DataTemplate>  

 

<telerikNavigation:RadContextMenu telerik:StyleManager.Theme="{StaticResource Theme}" InheritDataContext="False"> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsFloatingOnly}" Command="telerikDocking:RadDockingCommands.Floating" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsDockableOptionChecked}" Command="telerikDocking:RadDockingCommands.Dockable" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsInDocumentHost}" Command="telerikDocking:RadDockingCommands.TabbedDocument" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsPinned, Converter={StaticResource invertedBooleanConverter}}" Command="telerikDocking:RadDockingCommands.Pin" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" /> 

 

<telerikNavigation:RadMenuItem IsChecked="{Binding IsHidden}" Command="telerikDocking:RadDockingCommands.Close" CommandParameter="{Binding}" CommandTarget="{Binding}" Header="{Binding Command.Text, RelativeSource={RelativeSource Self}}" />

 

</telerikNavigation:RadContextMenu> 

 

</DataTemplate> 

 

</Setter.Value>  

 

</Setter>  

 

</Style>

app.xaml.cs:-
------------- 

private void Application_Startup(object sender, StartupEventArgs e) 

{ 

//StyleManager.ApplicationTheme = new SummerTheme();  

this.RootVisual = new MainPage(); 

} 

Please have a look, and help to resolve this issues.

1. I've to declare global theme in app.xaml.cs,
2. As well as I've edit the Docking controls in the page(Consider we're using docking controls in multiple pages).

Please guide me or share some samples with me.

Thanks in advance,
Karthikeyan Manickam.

[Karthikeyan]

Hi Dani,

I've tried to fix in the following way also, but no improvement.

<

 

 

Style x:Key="styleRadPane" TargetType="telerikDocking:RadPane" telerik:StyleManager.BasedOn="{StaticResource Theme}" >

 

Here the "Theme" I set it as "SummerTheme"
Please guide/correct me if i'm wrong.

Thanks,
Karthikeyan Manickam.

[Dani]

Hello Karthikeyan,

I am sorry, but as long as you have an application theme, styles will not apply to all RadPanes. To make sure that styles are applied to all RadPanes, you will have to make them implicit, i.e. with a TargetType only.

However, as explained earlier, our theming machanism will force your applciation theme to override your implicit styles in SIlverlight. So I would sugegst that for the purpose of your customizations you use implicit styles taken from the Summer theme and avoid using an application theme.

I hope this will be helpful.

Regards,
Dani
the Telerik team