Custom Theme

6 posts, 0 answers
  1. Cheng Lim Sek
    Cheng Lim Sek avatar
    33 posts
    Member since:
    Oct 2009

    Posted 02 Nov 2009 Link to this post

    I would like to design my own theme for Menu, what are the step I need to do to create my own theme?
    Did it have something similar like creating custom skin in Menu for Asp.Net Ajax?
  2. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 03 Nov 2009 Link to this post

    Hi,

    To create a custom theme you need to follow the instructions in the help article below:
    http://www.telerik.com/help/silverlight/radcontrols-for-silverlight-expression-blend-support.html

    You could also check the other topics in the same category - they contain information, that might be useful for you.

    Best wishes,
    Valeri Hristov
    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.
  3. DevCraft banner
  4. Cheng Lim Sek
    Cheng Lim Sek avatar
    33 posts
    Member since:
    Oct 2009

    Posted 04 Nov 2009 Link to this post

    Hi,

    I have follow the step until " Editing visual properties of RadControls", afer that i can't continue because I can't see the properties setting in property tab.

    Anyway, i have try another is I create my own custome theme using existing built in theme, and then i name the .xaml file to Generic.xaml and put it into my silverlight applcation project.

    But i fail to use my custom theme.

    I use my custom by writing the code below:

    Telerik.Windows.Controls.

    Theme myTheme = new Telerik.Windows.Controls.Theme(new Uri("/Generic.xaml", UriKind.RelativeOrAbsolute));

     

     

    StyleManager.SetTheme(this, myTheme);

     


    I know "this" should replace with the radmenu control but problem is, I can't get the radMenu name.
    Below are my code in Page.xaml. I name my RadMenu "TopMenu".

    <

     

    UserControl x:Class="Test1.Page" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"

     

     

    xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

     

     

    xmlns:qsf="clr-namespace:Telerik.Windows.QuickStart;assembly=Telerik.Windows.QuickStart"

     

     

    xmlns:model="clr-namespace:Test1"

     

     

    Width="400" Height="300">

     

     

     

     

     

    <UserControl.Resources>

     

     

     

     

    <Style x:Key="DropdownStyle" TargetType="Button">

     

     

     

    <Setter Property="Template">

     

     

     

    <Setter.Value>

     

     

     

    <ControlTemplate TargetType="Button">

     

     

     

    <Grid>

     

     

     

    <VisualStateManager.VisualStateGroups>

     

     

     

    <VisualStateGroup x:Name="FocusStates">

     

     

     

    <VisualState x:Name="Focused"/>

     

     

     

    <VisualState x:Name="Unfocused"/>

     

     

     

    </VisualStateGroup>

     

     

     

    <VisualStateGroup x:Name="CommonStates">

     

     

     

    <VisualStateGroup.Transitions>

     

     

     

    <VisualTransition GeneratedDuration="0:0:0.2" To="MouseOver"/>

     

     

     

    <VisualTransition GeneratedDuration="0:0:0.1" To="Normal"/>

     

     

     

    </VisualStateGroup.Transitions>

     

     

     

    <VisualState x:Name="Normal"/>

     

     

     

    <VisualState x:Name="MouseOver">

     

     

     

    <Storyboard>

     

     

     

    <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:02" Storyboard.TargetName="DropDown" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

     

     

     

    <EasingDoubleKeyFrame KeyTime="00:00:01" Value="23"/>

     

     

     

    </DoubleAnimationUsingKeyFrames>

     

     

     

    </Storyboard>

     

     

     

    </VisualState>

     

     

     

    <VisualState x:Name="Pressed"/>

     

     

     

    <VisualState x:Name="Disabled"/>

     

     

     

    </VisualStateGroup>

     

     

     

    </VisualStateManager.VisualStateGroups>

     

     

     

    <Grid x:Name="DropDown">

     

     

     

    <Grid.RenderTransform>

     

     

     

    <TransformGroup>

     

     

     

    <ScaleTransform/>

     

     

     

    <SkewTransform/>

     

     

     

    <RotateTransform/>

     

     

     

    <TranslateTransform/>

     

     

     

    </TransformGroup>

     

     

     

    </Grid.RenderTransform>

     

     

     

    <telerikNavigation:RadMenu x:Name="TopMenu">

     

     

     

    <telerikNavigation:RadMenuItem Header="File">

     

     

     

    <telerikNavigation:RadMenuItem Header="New Tab"/>

     

     

     

    <telerikNavigation:RadMenuItem Header="New Window"/>

     

     

     

    <telerikNavigation:RadMenuItem Header="Open"/>

     

     

     

    <telerikNavigation:RadMenuItem Header="Edit with Microsoft Office Word" />

     

     

     

    <telerikNavigation:RadMenuItem Header="Save" />

     

     

     

    <telerikNavigation:RadMenuItem Header="Save As..."/>

     

     

     

    <telerikNavigation:RadMenuItem Header="Close Tab" />

     

     

     

    <telerikNavigation:RadSeparator />

     

     

     

    <telerikNavigation:RadMenuItem Header="Page Setup..." />

     

     

     

    <telerikNavigation:RadMenuItem Header="Print..."/>

     

     

     

    <telerikNavigation:RadMenuItem Header="Print Preview..."/>

     

     

     

    <telerikNavigation:RadSeparator />

     

     

     

    <telerikNavigation:RadMenuItem Header="Send" />

     

     

     

    <telerikNavigation:RadMenuItem Header="Import and Export...">

     

     

     

    <telerikNavigation:RadMenuItem Header="Page by E-mail..." />

     

     

     

    <telerikNavigation:RadMenuItem Header="Link by E-mail..." />

     

     

     

    <telerikNavigation:RadMenuItem Header="Shortcut to Desktop" />

     

     

     

    </telerikNavigation:RadMenuItem>

     

     

     

    <telerikNavigation:RadSeparator />

     

     

     

    <telerikNavigation:RadMenuItem Header="Properties" />

     

     

     

    <telerikNavigation:RadMenuItem Header="Work Offline" />

     

     

     

    <telerikNavigation:RadMenuItem Header="Exit" />

     

     

     

    </telerikNavigation:RadMenuItem>

     

     

     

    </telerikNavigation:RadMenu>

     

     

     

    </Grid>

     

     

     

    <Rectangle Fill="#C0DDF8" Stroke="White" StrokeThickness="0"/>

     

     

     

    </Grid>

     

     

     

    </ControlTemplate>

     

     

     

    </Setter.Value>

     

     

     

    </Setter>

     

     

     

    </Style>

     

     

     

    </UserControl.Resources>

     

     

     

    <Grid x:Name="LayoutRoot" Background="White">

     

     

     

    <Button Height="23" Style="{StaticResource DropdownStyle}" VerticalAlignment="Top"/>

     

     

     

    </Grid>

     

    </

     

    UserControl>

     


  5. Kaloyan
    Admin
    Kaloyan avatar
    920 posts

    Posted 05 Nov 2009 Link to this post

    Hello Cheng Lim Sek,

    Do you mean that the TopMenu is null or the name is not in the pop up in the intellisense window. Also where actually you are calling this method. If has to be after the InitializeComponent() method in the constructor of the UserControl.

    All the best,
    Kaloyan
    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.
  6. Cheng Lim Sek
    Cheng Lim Sek avatar
    33 posts
    Member since:
    Oct 2009

    Posted 05 Nov 2009 Link to this post

    Hi, I already solve that problem.

    now i using blend to eidt my color. I have one problem is how can i edit the text color so all the first level menu's text is white color and second level menu's text is blue and third level menu's text is green?

    And also, first level items are display horizontally but i din't see where it is set and then the second level also will be display vertically by default and also i din't see where it is set. The first level orientation is ok for me, how can i change the second level also oriented horizontally but third level onward will become oriented  vertically again?

    Can you provide the answer as soon as possible? It seem like i solve my problem before you have giving me the answer.
    Thanks.

  7. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 12 Nov 2009 Link to this post

    Hi,

    We found a hack that could partially resolve your problem. If you use several templates and assign them manually to the different level RadMenuItems you may get the desired effect. You can check the attached project. It displays the menu items the way you want but in Silverlight the control over the Popup appearance is limited. The third level items can not be displayed under the menu button. It may be worked around eventually by binding the popup HorizontalOffset to the content grid's ActualWidth * -1. You can find the dispositioned third level menu item popup by the line:

    <!-- eventually bind the HorizontalOffset to -Width of the menu -->

    Best wishes,
    Valeri Hristov
    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.
Back to Top
DevCraft banner