Re: Simple popup menu

headbiznatch — Wed, 12 Aug 2009 21:39:10 GMT

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)

Re: Simple popup menu

WindowsRich — Thu, 16 Jul 2009 17:48:06 GMT

Good post!

One issue

> the menu is shown just below the button

My popup appears in the top left portion of the Silverlight content region. This behavior is consistent with what I read in Matthew MacDonald's Silverlight 2 book. Comments?

One other issue

> Popup.HorizontalOffset = x;
I needed to add the property to the class definition.

Re: Simple popup menu

Jonathan Shen – MSFT — Tue, 13 Jan 2009 07:17:30 GMT

Hi MagicMarky,

Thanks for sharing your sample with us.

Best regards,

Jonathan

Simple popup menu

magicmarky — Wed, 07 Jan 2009 13:48:18 GMT

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);
}

Silverlight Controls and Silverlight Toolkit

Re: Simple popup menu

Re: Simple popup menu

Re: Simple popup menu

Simple popup menu