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

9 posts, 0 answers
  1. Karthikeyan
    Karthikeyan avatar
    27 posts
    Member since:
    Aug 2011

    Posted 28 Nov 2011 Link to this post

    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.

     

  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 29 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  3. DevCraft banner
  4. Karthikeyan
    Karthikeyan avatar
    27 posts
    Member since:
    Aug 2011

    Posted 29 Nov 2011 Link to this post

    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.
  5. Dani
    Admin
    Dani avatar
    848 posts

    Posted 30 Nov 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  6. Karthikeyan
    Karthikeyan avatar
    27 posts
    Member since:
    Aug 2011

    Posted 01 Dec 2011 Link to this post

    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.

  7. Dani
    Admin
    Dani avatar
    848 posts

    Posted 05 Dec 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  8. Karthikeyan
    Karthikeyan avatar
    27 posts
    Member since:
    Aug 2011

    Posted 06 Dec 2011 Link to this post

    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.
  9. Karthikeyan
    Karthikeyan avatar
    27 posts
    Member since:
    Aug 2011

    Posted 06 Dec 2011 Link to this post

    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.
  10. Dani
    Admin
    Dani avatar
    848 posts

    Posted 06 Dec 2011 Link to this post

    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
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Back to Top
DevCraft banner