Menu embedded in a custom UserControl

[Charles]

I have created a Header UserControl that includes the Telerik Menu control within it. I have created an event that passes the menu's ItemClick event upwards through the Header and also created an event at the Header level that, in turn, passes the menu's click to the containing UserControl ( a Page at this point).

No problems there - the click flows through and I'm able to get the menuitem information I need via the RoutedEventArgs object.

However, the next thing I attempt to do from the menu click is create a new instance of a different page (than the one I'm on) and replace the content of the current holding page with the new page instance. (This is taken care of by a "dummy" page with no initial content that keeps getting it's content replaced. So, we have the dummy page, and at startup, the initial page instance is created and replaces content of the dummy page. On a menu click - designating which page to navigate to - a new page instance is created and again replaces the content of the dummy page.) This works flawlessly if I have a button on the page do the creation and switch - but the menu click causes an exception to be thrown - and I end up in the App.xaml.cs file with an execption like this:

"ExceptionObject {System.ArgumentException: Value does not fall within the expected range......"

There is more to follow, but I didn't include it here. Both of the page instances carry the Header control, which carries the menu. I load the menu with an XML file as in some of your samples. I would have thought if the issue was related to the two instances of the menu (one for each page), then I would have the same problem from the button press on the page...but that all works.

Thanks for any help at all.

[Hristo]

Hi Charles,

First sorry for the late reply.
I'm not sure if I understand your problem so it will be very helpful if you can send as a sample project with the problems you are experiencing so we can investigate it.
RadMenu is using routed events so you can take advantage of the instead of passing the click event to parent manually. For more information about Routed events see this link: http://msdn.microsoft.com/en-us/library/ms742806.aspx.

Again sorry for the late response. I'm waiting for your sample project.

Kind regards,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Charles]

I have a zip file of the Silverlight project (not the web application with the test page), but I see no way to attach it to the post. Could you tell me how to send it to you?

[Hristo]

Hi Charles,

In order to attach files you should open a support ticket. Attachments are not allowed in forums.

Sincerely yours,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Charles]

I was able to solve the problem by modifying the way I was doing the page navigation.

I now have a "Header" UserControl that incorporates some heading text and the RadMenu. That is placed in the first row of a default Page UserControl. There is a place holder grid within this "default" page that is replaced with whatever content UserControl that is requested from the RadMenuItem Click event.

So, when the menu item is clicked, a public Navigate method is called (it exists in App.Xaml.cs) and is passed the a new instance of the content to display. The Navigate method simply clears the content of the place holder grid in the default page and replaces it with the new content. (I didn't quite invent this - I modified some code that I found in a new book on Silverlight. "Pro Silverlight 2 in C# 2008" by Matthew MacDonald. I highly recommend the book.)

[anirudha]

How to navigate from one XAML file to other using TELERIK Menu control.
Which Property  in RadMenu needs to be set for Redirecting to a perticular Page?


Thanks,
Anirudha

[Hristo]

Hello Anirudha,

RadMenu for Silverlight 2 do not support redirecting. There is no property that you can set.
But you can attach handler to RadMenuItem Click event and update your layout depending on which menuItem was clicked.

Hope this helps.

Sincerely yours,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[anirudha]

Hi Hristo ,
Thanks for your reply.
But could you please guide me about the event of Rad menu control  which i can handle for redirecting purpose?
It would be great help if you can provide the sample code addressing to this.

Thanks,

Anirudha

[Serrin]

Hello Anirudha,

 

Here is an example of how I am using the menu within the Telerik Navigation framework, but you can achieve similar by using a Border object and setting it's child to a usercontrol (i.e., the simple nav framework I used before getting on board with the Telerik one, which supports browser history and other goodies):

 

Here is the Xaml for the menu item:

 

<telerikNavigation:RadMenuItem Header="Add Pictures" Tag="PicUploader"
                               MouseLeftButtonUp="RadMenuItem_MouseLeftButtonDown" />

And then the code to work with it:

        private void RadMenuItem_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
        {
            RadMenuItem thisRadMenuItem = (RadMenuItem)sender;
            string tagValue = thisRadMenuItem.Tag.ToString();

            switch (tagValue)
            {
                case "PicUploader":
                    innerRadFrame.Navigate(new PicUploader(), new FadeTransition());
                    break;
                case "EditPics":
                    // not yet ;)
                    break;
                default:
                    innerRadFrame.Navigate(new BlankPage(), new FadeTransition());
                    innerRadFrame.Navigate(new GalleryPage(tagValue), new FadeTransition());
                    break;
            }
        }

So this is a general class used for any menu item clicked.  It reads the tag value as a string and uses it in a switch statement to determine the course of action.  I have several specific menu items which go to individual pages (PicUploader, EditPics), or for anything else I have a generic usercontrol that loads content based on the tagValue which gets passed along.  But you can do anything you want in response to the RadMenuItem_MouseLeftButtonDown, MouseLeftButtonUp, etc. as far as updating layout, showing/hiding controls.  It's very flexible. :)

[Hristo]

Hello Anirudha,

Here is a sample code demonstrating how to handle menuItem click event.

This is the XAML:

<UserControl x:Class="SilverlightDockingDemo.Page25"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:nav="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <nav:RadMenu x:Name="radMenu" VerticalAlignment="Top">
            <nav:RadMenuItem Header="Pages">
                <nav:RadMenuItem Header="Page1"/>
                <nav:RadMenuItem Header="Page2" />
            </nav:RadMenuItem>
            <nav:RadMenuItem Header="Other Pages">
                <nav:RadMenuItem Header="Page3" />
                <nav:RadMenuItem Header="Page4" />
            </nav:RadMenuItem>
        </nav:RadMenu>
    </Grid>
</UserControl>

and this is the code behind:

using System;
using System.Windows;
using System.Windows.Controls;
using Telerik.Windows;
using Telerik.Windows.Controls;

namespace SilverlightDockingDemo
{
    public partial class Page25 : UserControl
    {
        public Page25()
        {
            InitializeComponent();
            this.AddHandler(RadMenuItem.ClickEvent, new RoutedEventHandler(OnMenuItemClick));
        }

        private void OnMenuItemClick(object sender, RoutedEventArgs e)
        {
            RadRoutedEventArgs args = e as RadRoutedEventArgs;
            RadMenuItem menuItem = args.OriginalSource as RadMenuItem;
            string page = Convert.ToString(menuItem.Header);
            switch (page)
            {
                case "Page1":
                    // LoadPage1();
                    break;
                case "Page2":
                    // LoadPage2();
                    break;
                case "Page3":
                    // LoadPage3();
                    break;
                case "Page4":
                    // LoadPage4();
                    break;
            }
        }
    }
}

All you need to do is implement LoadPageX() methods.
In LoadPage you have access to the root Grid (LayoutRoot) and you can add the dynamic content (some controls or usercontrols) there.


Sincerely yours,
Hristo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.