Removing the MouseOver effect from a Silverlight Context Menu

Question

I'm trying to achieve the effect of a pop-up when the user right-clicks in a Silverlight application that shows essentially a custom control. I'm using a Context Menu, and all is working great except that I'm having trouble styling the context menu so that it doesn't highlight itself when the user mouses over.

Here's a snippet of what I'm trying to do:

<toolkit:ContextMenuService.ContextMenu>
        <toolkit:ContextMenu Height="100" Background="Transparent" HorizontalOffset="-100" VerticalOffset="-100" Margin="98,112,0,0" Name="contextMenu1" VerticalAlignment="Top" Width="200">
            <toolkit:ContextMenu.Style>
                <Style TargetType="toolkit:ContextMenu">
                    <Setter Property="BorderThickness" Value="0" />
                    <Setter Property="Padding" Value="0" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="toolkit:ContextMenu">
                                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2">
                                    <Grid>
                                        <ItemsPresenter Margin="{TemplateBinding Padding}" />
                                    </Grid>
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </toolkit:ContextMenu.Style>
            <Canvas Width="100" Height="100" Background="Transparent">
                <Button Width="100" Height="30">Something</Button>
                <Button Width="100" Height="30" Canvas.Top="70">Something Else</Button>
            </Canvas>
        </toolkit:ContextMenu>
    </toolkit:ContextMenuService.ContextMenu>

When the menu is visible I get the effect I want (the two buttons just floating near the mouse), but when I mouse over it the entire box of the context menu highlights itself.

Here's a sample app that demonstrates this:

http://github.com/vermeeca/ContextMenuDemo

How can I disable that effect?

Answer 1

Thanks to a co-worker I've got the solution. I just had to set the ItemContainerStyle on the ContextMenu.

<UserControl.Resources>
    <Style x:Key="NoMouseOverStyle" TargetType="toolkit:MenuItem">
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Padding" Value="4,3,2,3"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:MenuItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Presenter"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <!-- VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Bg"/>
                                        <ColorAnimation Duration="0" To="#40FFFFFF" Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" Storyboard.TargetName="InnerBorder"/>
                                    </Storyboard>
                                </VisualState -->
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Rectangle Fill="{TemplateBinding Background}" RadiusY="2" RadiusX="2" Stroke="{TemplateBinding BorderBrush}" StrokeThickness="1"/>
                        <Rectangle x:Name="Bg" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#8071CBF1" StrokeThickness="1">
                            <Rectangle.Fill>
                                <LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
                                    <GradientStop Color="#34C5EBFF" Offset="0"/>
                                    <GradientStop Color="#3481D8FF" Offset="1"/>
                                </LinearGradientBrush>
                            </Rectangle.Fill>
                        </Rectangle>
                        <Rectangle x:Name="InnerBorder" Margin="1" RadiusY="2" RadiusX="2" Stroke="Transparent"/>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition MinWidth="24" Width="Auto"/>
                                <ColumnDefinition Width="4"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="17"/>
                            </Grid.ColumnDefinitions>
                            <ContentPresenter Content="{TemplateBinding Icon}" Margin="1" VerticalAlignment="Center"/>
                            <ContentPresenter x:Name="Presenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="2" Margin="{TemplateBinding Padding}"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

And then

<toolkit:ContextMenu Height="100" Background="Transparent" HorizontalOffset="-100" VerticalOffset="-100" Margin="98,112,0,0" Name="contextMenu1" VerticalAlignment="Top" Width="200" ItemContainerStyle="{StaticResource NoMouseOverStyle}">