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

Custom Theme

5 Answers 96 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Cheng Lim Sek
Top achievements
Rank 1
Cheng Lim Sek asked on 03 Nov 2009, 03:35 AM
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?

5 Answers, 1 is accepted

Sort by
0
Valeri Hristov
Telerik team
answered on 03 Nov 2009, 12:36 PM
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.
0
Cheng Lim Sek
Top achievements
Rank 1
answered on 04 Nov 2009, 07:48 AM
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>

 


0
Kaloyan
Telerik team
answered on 05 Nov 2009, 01:57 PM
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.
0
Cheng Lim Sek
Top achievements
Rank 1
answered on 06 Nov 2009, 02:26 AM
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.

0
Valeri Hristov
Telerik team
answered on 12 Nov 2009, 08:44 AM
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.
Tags
Menu
Asked by
Cheng Lim Sek
Top achievements
Rank 1
Answers by
Valeri Hristov
Telerik team
Cheng Lim Sek
Top achievements
Rank 1
Kaloyan
Telerik team
Share this question
or