A very simple-minded Silverlight 4 popup menu that is relatively straightforward to use/configure. There are other popup menus that have been published, but I have found their use somewhat difficult to grok ... so I have written this and publish it for anyone who might find it useful.

- Uses TextBlock to permit WordEllipsis trimming.
- Transparent buttons are used (see resources in App.xaml).
- Slots for images on left/right of menu item title.
- Small library packaged separate from example.

An example XAML that configures a multi-level/nested menu is given as follows:

<UserControl x:Class="Popups.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:sociablesl="clr-namespace:sociable.silverlight;assembly=sociable.silverlight"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<sociablesl:SociablePopupMenuBar x:Name="Menu" Height="30" VerticalAlignment="Center" HorizontalAlignment="Center"
MenuItemHeight="25" MenuItemWidth="100" MenuFontSize="12" MenuFontFamily="Calibri" MenuFontColor="Black"
SeparatorColor="Plum" MenuItemBackgroundColor="Beige" MenuItemBackgroundHoverColor="AliceBlue" Background="LightSlateGray"
MenuItemMargin="4,4,0,4" TransparentButtonTemplate="{StaticResource TransparentButton}"
MenuItemSquareImageWidth="21" MenuItemSquareImageMargin="4">
<sociablesl:SociablePopupMenuBar.Menus>
<sociablesl:SociablePopupMenu MenuName="File">
<sociablesl:SociablePopupMenu.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="New" GroupName="FileOp" ImageSource="images/image1.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Open" GroupName="FileOp" ImageSource="images/image3.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Save" GroupName="FileOp" ImageSource="images/image4.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Close" GroupName="AppOp" ImageSource="images/image2.png"/>
</sociablesl:SociablePopupMenu.MenuItems>
</sociablesl:SociablePopupMenu>
<sociablesl:SociablePopupMenu MenuName="Edit">
<sociablesl:SociablePopupMenu.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 1" GroupName="G1" ImageSource="images/pacman.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2" GroupName="G2" ImageSource="images/image8.png">
<sociablesl:SociablePopupMenuItem.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2a" GroupName="G2a" ImageSource="images/image7.png">
<sociablesl:SociablePopupMenuItem.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2aa" GroupName="G2aa" Click="MenuItemClickTest" ImageSource="images/image6.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2ab" GroupName="G2ab" ImageSource="images/image5.png"/>
</sociablesl:SociablePopupMenuItem.MenuItems>
</sociablesl:SociablePopupMenuItem>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2b" GroupName="G2b" ImageSource="images/pacman.png"/>
</sociablesl:SociablePopupMenuItem.MenuItems>
</sociablesl:SociablePopupMenuItem>
</sociablesl:SociablePopupMenu.MenuItems>
</sociablesl:SociablePopupMenu>
<sociablesl:SociablePopupMenu MenuName="A multiword menu title that should cause text ellipsis">
<sociablesl:SociablePopupMenu.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 1" GroupName="G1" ImageSource="images/pacman.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2" GroupName="G2" ImageSource="images/image8.png">
<sociablesl:SociablePopupMenuItem.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2a" GroupName="G2a" ImageSource="images/image7.png">
<sociablesl:SociablePopupMenuItem.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2aa" GroupName="G2aa" Click="MenuItemClickTest" ImageSource="images/image6.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2ab" GroupName="G2ab" ImageSource="images/image5.png"/>
</sociablesl:SociablePopupMenuItem.MenuItems>
</sociablesl:SociablePopupMenuItem>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2b" GroupName="G2b" ImageSource="images/pacman.png"/>
</sociablesl:SociablePopupMenuItem.MenuItems>
</sociablesl:SociablePopupMenuItem>
</sociablesl:SociablePopupMenu.MenuItems>
</sociablesl:SociablePopupMenu>
<sociablesl:SociablePopupMenu MenuName="And one more multiword menu title that should cause text ellipsis">
<sociablesl:SociablePopupMenu.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 1" GroupName="G1" ImageSource="images/pacman.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2" GroupName="G2" ImageSource="images/image8.png">
<sociablesl:SociablePopupMenuItem.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2a" GroupName="G2a" ImageSource="images/image7.png">
<sociablesl:SociablePopupMenuItem.MenuItems>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2aa" GroupName="G2aa" Click="MenuItemClickTest" ImageSource="images/image6.png"/>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2ab" GroupName="G2ab" ImageSource="images/image5.png"/>
</sociablesl:SociablePopupMenuItem.MenuItems>
</sociablesl:SociablePopupMenuItem>
<sociablesl:SociablePopupMenuItem MenuItemName="Edit 2b" GroupName="G2b" ImageSource="images/pacman.png"/>
</sociablesl:SociablePopupMenuItem.MenuItems>
</sociablesl:SociablePopupMenuItem>
</sociablesl:SociablePopupMenu.MenuItems>
</sociablesl:SociablePopupMenu>
</sociablesl:SociablePopupMenuBar.Menus>
</sociablesl:SociablePopupMenuBar>

</UserControl>

DISCLAIMER: Undoubtedly there are many better UI Silverlight developers than I ... my goal with this menu was to have a popup menu that could be easily understood and configured from XAML. I am happy to learn from Silverlight experts ... so please feel free to feed back and communicate via this site.

Last edited Jan 22, 2011 at 8:40 PM by tomwinans, version 1

Comments

No comments yet.