.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> Silverlight >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create Custom Context Menu In Silverlight

Posted By:Diptimaya Patra       Posted Date: March 16, 2010    Points: 25    Category: Silverlight    URL: http://www.dotnetspark.com  

Create Custom Context Menu ( Right click menu ) In Silverlight. In this article we will see how we can create our own context menu.
 

Introduction

We are known to the fact that we can't have our customized context menu in Silverlight 3, but we can have our own built in i.e. customized context menu. Previously we have experienced how to disable the Right Click in Silverlight 3. In this article we will see how we can create our own context menu.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a new Silverlight 3 Project. Name it as RightClick.

image1.gif

We will follow our traditional approach for disabling the default context menu of Silverlight 3.

image2.gif

Open RightClickTestPage.aspx and add the following line of code into the

"
"

Now add the following line of code inside the constructor after the InitializeComponent() method.

HtmlPage.Document.AttachEvent("oncontextmenu", this.OnRightClick);
And add the method for OnRightClick as below:

private void OnRightClick(object sender, HtmlEventArgs e)
{
  e.PreventDefault();
}

Now if you will run your application you will see that your default context menu for Silverlight 3 is disabled.

Now the important part is design your own context menu. In this case I prefer you to use Blend 3 to design your own.

Open your solution in Blend 3.

Here in Blend 3 I am designing a Button to look alike menu.

image3.gif

I have added 7 buttons to my context menu.

Xaml code:



  



The Style for the Menu Button is defined in App.xaml as follows:



Always remember to make the visibility of the Stack Panel to Collapse. Now make the visibility of the Stack Panel Visible in OnRightClick() method. You can have the position of the context menu by taking the e.ClientX and e.ClientY as follows:

private void OnRightClick(object sender, HtmlEventArgs e)|
{
  e.PreventDefault();
  myStackMenu.Visibility = Visibility.Visible;
  myStackMenu.Margin = new Thickness(e.ClientX,e.ClientY,0,0);
}


If you run the application now you will find the below menu (without menu functioning).

image4.gif

We will add the below to event handlers to handle the visibility of the Menu.

  private void myStackMenu_LostFocus(object sender, RoutedEventArgs e)
  {
  myStackMenu.Visibility = Visibility.Collapsed;
  } 
  private void LayoutRoot_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
  {
  myStackMenu.Visibility = Visibility.Collapsed;
  }

Now for each Button Click we will change the ClickMode to Press. As shown below:

image5.gif

Write the below lines of code in the respective click events of the buttons (options).

private void option1_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.Red);
  myStackMenu.Visibility = Visibility.Collapsed;
  }

   private void option2_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.Green);
  myStackMenu.Visibility = Visibility.Collapsed;
  } 
  private void option3_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.Blue);
  myStackMenu.Visibility = Visibility.Collapsed;
  } 
  private void option4_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.Yellow);
  myStackMenu.Visibility = Visibility.Collapsed;
  } 
  private void option5_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.Orange);
  myStackMenu.Visibility = Visibility.Collapsed;
  } 
  private void option6_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.Magenta);
  myStackMenu.Visibility = Visibility.Collapsed;
  } 
  private void option7_Click(object sender, RoutedEventArgs e)
  {
  LayoutRoot.Background = new SolidColorBrush(Colors.White);
  myStackMenu.Visibility = Visibility.Collapsed;
  }

image6.gif

Now play with this menu more to invent more. And do let me know if you find any new idea.

Hope you enjoy this article.

 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend