Simple popup menu

01-07-2009 8:48 AM |

Here's a simple way of creating a popup menu I thought I'd share as others may find it useful. What I wanted was a menu button, so clicking the button displayed a popup menu.

Firstly create a user control, here's the XAML:
<UserControl x:Class="SilverlightApplication1.PopupMenu"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid>
        <Rectangle Opacity="0.0" Fill="Azure" MouseLeftButtonUp="Rectangle_MouseLeftButtonUp"/>
        <Popup Name="Popup" IsOpen="True">
            <Border BorderThickness="1" BorderBrush="Black" Background="White">
                <StackPanel Name="MenuItems" Margin="2"/>
            </Border>
        </Popup>
    </Grid>
</UserControl>

And the code for the user control:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using System.Windows.Media;

namespace SilverlightApplication1
{
 public partial class PopupMenu : UserControl
 {
  public delegate void MenuSelectDelegate();

  public PopupMenu(double x, double y)
  {
   InitializeComponent();

   Popup.HorizontalOffset = x;
   Popup.VerticalOffset = y;
  }

  public void Add(string text, MenuSelectDelegate onSelect)
  {
   var textBlock = new TextBlock();
   textBlock.Text = text;
   textBlock.Margin = new Thickness(2);

   var border = new Border();
   border.Child = textBlock;
   border.Tag = onSelect;
   border.MouseEnter += new MouseEventHandler(Border_MouseEnter);
   border.MouseLeave += new MouseEventHandler(Border_MouseLeave);
   border.MouseLeftButtonUp += new MouseButtonEventHandler(Border_MouseLeftButtonUp);
   MenuItems.Children.Add(border);
  }

  private void Close()
  {
   Popup.IsOpen = false;
   Visibility = System.Windows.Visibility.Collapsed;
  }

  void Border_MouseEnter(object sender, MouseEventArgs e)
  {
   Border border = (Border)sender;
   border.Background = new SolidColorBrush(Color.FromArgb(255, 0, 0, 128));

   TextBlock textBlock = (TextBlock)border.Child;
   textBlock.Foreground = new SolidColorBrush(Colors.White);
  }

  void Border_MouseLeave(object sender, MouseEventArgs e)
  {
   Border border = (Border)sender;
   border.Background = new SolidColorBrush(Colors.White);

   TextBlock textBlock = (TextBlock)border.Child;
   textBlock.Foreground = new SolidColorBrush(Colors.Black);
  }

  void Border_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  {
   Close();
   Border border = (Border)sender;
   MenuSelectDelegate onSelect = (MenuSelectDelegate)border.Tag;
   onSelect();
  }

  private void Rectangle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
  {
   Close();
  }
 }
}

Here's some code to display the popup menu in response to a button click, the menu is shown just below the button:
private void DoSomething()
{
 MessageBox.Show("Do something");
}

private void DoSomethingElse()
{
 MessageBox.Show("Do something else");
}

private void Button_Click(object sender, RoutedEventArgs e)
{
 Button button = (Button)sender;
 var transform = button.TransformToVisual(LayoutRoot);
 var point = transform.Transform(new Point(0, 0));
 var popupMenu = new PopupMenu(point.X, point.Y + button.Height);

 popupMenu.Add("Do something", DoSomething);
 popupMenu.Add("Do something else", DoSomethingElse);
 LayoutRoot.Children.Add(popupMenu);
}

Re: Simple popup menu

01-13-2009 2:17 AM |

Hi MagicMarky,

Thanks for sharing your sample with us.   

Best regards,

Jonathan

Re: Simple popup menu

08-12-2009 5:39 PM |

Darn useful little snippet. Thanks for sharing. Tips: set menu grid background to transparent, combine with VisualTree traversal to get the right parent control to perform the transform with (especially useful for Prism apps)