Karine Bosch’s Blog

On SharePoint

WPF for Dummies: a simple ContextMenu


I’m playing around with WPF lately and I just wanted to create a simple context menu that appears when the user right-clicks a TextBlock control. I defined the following XAML:

        <TextBlock x:Name="OperatorTextBlock" Canvas.Top="15" Canvas.Left="0" Width="40" TextAlignment="Center" 
                   Foreground="White" Text="=">
            <TextBlock.ContextMenu>
                <ContextMenu >
                    <MenuItem Header="Equal" Click="MenuItem_Click" />
                    <MenuItem Header="Not equal" Click="MenuItem_Click" />
                    <MenuItem Header="Greater than" Click="MenuItem_Click" />
                    <MenuItem Header="Greater than or equal" Click="MenuItem_Click" />
                    <MenuItem Header="Less than" Click="MenuItem_Click" />
                    <MenuItem Header="Less than or equal" Click="MenuItem_Click" />
                    <MenuItem Header="Is null" Click="MenuItem_Click" />
                    <MenuItem Header="Begins with" Click="MenuItem_Click" />
                    <MenuItem Header="Contains" Click="MenuItem_Click" />
                </ContextMenu>
            </TextBlock.ContextMenu>
        </TextBlock>

but when I tried to run it, it looked this way:

Context menu with centered menu items

What the hell! I don’t want the context menu items to be centered! I started googling around but all I found was hundreds of  complex samples for highly customized context menus, while all I wanted was a normal context menu with the menu items left aligned. I’m just a SharePoint developer looking for a fancier user interface than a classic Windows Forms application…

After two hours of googling and lots of trials and more errors I finally came up with the following XAML:

        <TextBlock x:Name="OperatorTextBlock" Canvas.Top="15" Canvas.Left="0" Width="40" TextAlignment="Center" 
                   Foreground="White" Text="=">
            <TextBlock.ContextMenu>
                <ContextMenu >
                    <ContextMenu.Resources>
                        <Style x:Key="MenuItemStyle" TargetType="MenuItem">
                            <Setter Property="MenuItem.Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <TextBlock Width="140" Height="18" Foreground="Black" TextAlignment="Left" 
                                                   Margin="15,2" Text="{TemplateBinding MenuItem.Header}" />                                                                            
                                    </ControlTemplate>
                                </Setter.Value>                                
                            </Setter>
                        </Style>
                    </ContextMenu.Resources>
                    <MenuItem Header="Equal" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Not equal" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Greater than" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Greater than or equal" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Less than" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Less than or equal" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Is null" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Begins with" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                    <MenuItem Header="Contains" Style="{StaticResource MenuItemStyle}" Click="MenuItem_Click" />
                </ContextMenu>
            </TextBlock.ContextMenu>
        </TextBlock> 

giving me just what I wanted:

Advertisements

June 11, 2011 - Posted by | WPF

2 Comments »

  1. Hello Karine,

    sorry for my previous post that came out sort of empty.

    Here is modified code I was talking about: http://pastebin.com/DQBS01Mq

    Regards,
    Michal

    Comment by Michal Brndiar | October 17, 2011 | Reply

  2. Hello Karine,

    I’m really sorry for this “triple-posting”, but here is even more simplified markup: http://pastebin.com/ksPeUS7Z.

    Hope this helps,
    Michal

    Comment by Michal Brndiar | October 17, 2011 | Reply


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: