I am try to style the Radmenu so that the top level shows only an image which I can lookup use an IValueConverter and the lower level has styled text items as shown in the Idial.png - Ideal ;-)
So far I have got the data loading as shown in the Current.png but I am struggling to understand how to style the menu.
Property ID As Integer
So far I have got the data loading as shown in the Current.png but I am struggling to understand how to style the menu.
<telerik:HierarchicalDataTemplate x:Key="MenuItemTemplate" ItemsSource="{Binding SubMenuItems}">
<TextBlock Text="{Binding Content}"/>
</telerik:HierarchicalDataTemplate>
<telerik:RadMenu x:Name="Businesses"
ItemsSource="{Binding MenuItems}" ItemTemplate="{StaticResource MenuItemTemplate}"
Margin="5,10" Background="{x:Null}" Orientation="Vertical" ClickToOpen="True" >
</telerik:RadMenu>
MODEL
Imports System.Collections.ObjectModel
Public Class MenuModel
Public Enum MenuItemTypes As Integer
Link
SpecialLink
TopLevel
TopLevelSection
Title
Paragraph
Gallery
Image
End Enum
Property ID As Integer
Property Content As String
Property Type As MenuItemTypes
Property IsSeperator As Boolean
Property SubMenuItems As IEnumerable(Of MenuModel)
End Class
7 Answers, 1 is accepted
0
Hi Phil,
If you want to modify only the top level items you'll have to modify the TopLevelHeaderTemplate (which is used when a top level item has children) and TopLevelItemTemplate (used when the top level item doesn't have children). You can use something like this:
And then you should set the templates:
More information about templates used in RadMenu you can find here.
Don't hesitate to contact us if you have any problems with RadControls.
Greetings,
Rosen Vladimirov
the Telerik team
If you want to modify only the top level items you'll have to modify the TopLevelHeaderTemplate (which is used when a top level item has children) and TopLevelItemTemplate (used when the top level item doesn't have children). You can use something like this:
<
ControlTemplate
x:Key
=
"template"
TargetType
=
"telerik:RadMenuItem"
>
<
Grid
x:Name
=
"ContentGrid"
Margin
=
"{TemplateBinding Padding}"
>
<
StackPanel
>
<
Image
Source
=
"{Binding ImageSource}"
Stretch
=
"None"
Width
=
"32"
Height
=
"32"
/>
</
StackPanel
>
</
Grid
>
</
ControlTemplate
>
And then you should set the templates:
<
Style
TargetType
=
"telerik:RadMenuItem"
x:Key
=
"ItemStyle"
>
<
Setter
Property
=
"TopLevelHeaderTemplateKey"
Value
=
"{StaticResource template}"
/>
<
Setter
Property
=
"TopLevelItemTemplateKey"
Value
=
"{StaticResource template}"
/>
</
Style
>
More information about templates used in RadMenu you can find here.
Don't hesitate to contact us if you have any problems with RadControls.
Greetings,
Rosen Vladimirov
the Telerik team
Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.
0
Phil
Top achievements
Rank 1
answered on 27 Sep 2012, 01:41 PM
Hi Rosen,
Not sure I follow...
I have create the below in the style.xaml
This is part of my Silverlight Page
While this lets me style the top level items it now does not show the lower level items.
If I use my original Data Template the lower level items show
See the attachments
Not sure I follow...
I have create the below in the style.xaml
<!--CONTROL TEMPLATES--> <br>
<ControlTemplate x:Key=
"template"
TargetType=
"telerik:RadMenuItem"
><br>
<Grid x:Name=
"ContentGrid"
Margin=
"{TemplateBinding Padding}"
><br>
<StackPanel><br>
<Image Source=
"{Binding ImageSource}"
Stretch=
"None"
Width=
"32"
Height=
"32"
/><br>
</StackPanel><br>
</Grid><br>
</ControlTemplate><br>
<br>
<!--STYLES--><br>
<Style TargetType=
"telerik:RadMenuItem"
x:Key=
"ItemStyle"
><br>
<Setter Property=
"TopLevelHeaderTemplateKey"
Value=
"{StaticResource template}"
/><br>
</Style>
This is part of my Silverlight Page
<telerik:HierarchicalDataTemplate x:Key=
"MenuItemTemplate"
ItemsSource=
"{Binding SubMenuItems}"
><br>
<Button CommandParameter=
"{Binding}"
HorizontalAlignment=
"Center"
><br>
<Image Source=
"{Binding ID, Converter={StaticResource ImageConverter}}"
/><br>
</Button><br>
</telerik:HierarchicalDataTemplate><br>
<br>
<telerik:RadMenu x:Name=
"Businesses"
<br>
ItemsSource=
"{Binding MenuItems}"
ItemTemplate=
"{StaticResource MenuItemTemplate}"
<br>
Margin=
"5,10"
Background=
"{x:Null}"
Orientation=
"Vertical"
ClickToOpen=
"True"
><br>
<br>
</telerik:RadMenu>
While this lets me style the top level items it now does not show the lower level items.
If I use my original Data Template the lower level items show
<telerik:HierarchicalDataTemplate x:Key=
"MenuItemTemplate"
ItemsSource=
"{Binding SubMenuItems}"
><br>
<TextBlock Text=
"{Binding Content}"
/><br>
</telerik:HierarchicalDataTemplate>
See the attachments
0
Phil
Top achievements
Rank 1
answered on 27 Sep 2012, 02:29 PM
I have an example project showing the problem but can't attach it.
0
Hi Phil,
You just have to modify a little bit more the ContentTemplate for the TopLevelItems:
After adding this Popup you'll be able to see the subitems.
Hopefully this helps.
Regards,
Rosen Vladimirov
the Telerik team
You just have to modify a little bit more the ContentTemplate for the TopLevelItems:
<
ControlTemplate
x:Key
=
"template"
TargetType
=
"telerik:RadMenuItem"
>
<
Grid
>
<
Grid
x:Name
=
"ContentGrid"
Margin
=
"{TemplateBinding Padding}"
>
<
StackPanel
>
<
Image
Source
=
"{Binding ImageSource}"
Stretch
=
"None"
Width
=
"32"
Height
=
"32"
/>
</
StackPanel
>
</
Grid
>
<
Popup
x:Name
=
"PART_Popup"
>
<
Border
BorderThickness
=
"1"
BorderBrush
=
"Black"
Background
=
"Gray"
>
<
ItemsPresenter
Margin
=
"1"
/>
</
Border
>
</
Popup
>
</
Grid
>
</
ControlTemplate
>
After adding this Popup you'll be able to see the subitems.
Hopefully this helps.
Regards,
Rosen Vladimirov
the Telerik team
Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.
0
Phil
Top achievements
Rank 1
answered on 27 Sep 2012, 02:54 PM
Still not working I'm afraid
0
Accepted
Hi Phil,
I'm sending you a project where I've set the TopLevelHeaderTemplate and TopLevelItemTemplate. As you can see I've added an arrow and Popup to the TopLevelHeaderTemplate.
Please check the attachment and inform me if it doesn't fit your needs.
All the best,
Rosen Vladimirov
the Telerik team
I'm sending you a project where I've set the TopLevelHeaderTemplate and TopLevelItemTemplate. As you can see I've added an arrow and Popup to the TopLevelHeaderTemplate.
Please check the attachment and inform me if it doesn't fit your needs.
All the best,
Rosen Vladimirov
the Telerik team
Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.
0
Phil
Top achievements
Rank 1
answered on 28 Sep 2012, 01:00 PM
Thanks Rosen,
Its working. I just need to style the popup container and I'm done.
Phil
Its working. I just need to style the popup container and I'm done.
Phil