We Keep Coding

WPF Menu/MenuItem MouseOver prevents click on window

I have a simple window with a menu containing items bound to view models.
<DockPanel>
<Menu DockPanel.Dock="Top" ItemsSource="{Binding ViewModels}">
<Menu.ItemTemplate>
<DataTemplate>
<MenuItem Header="{Binding HeaderName}" Visibility="{Binding MenuVisibility}"
Command="{Binding DataContext.ChangeViewCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
CommandParameter="{Binding }"/>
</DataTemplate>
</Menu.ItemTemplate>
</Menu>
<Viewbox Stretch="Fill">
<ContentControl Content="{Binding CurrentViewModel}"/>
</Viewbox>
</DockPanel>
Everything for the Menu's style is default plane jane. Nothing fancy. No modifications.
I'm noticing some odd hover behavior when testing the UI. If I mouse over one of the menu items and it becomes highlighted, it seems to 'trap' focus on that item even if the mouse leaves.
So lets says I'm mousing UP through my application, my mouse cursor passes over the menu, highlighting an item. My mouse never stops and attempts to click the Window bar to move the UI to another monitor, the click never lands on the menu bar. I have to click twice, once to remove focus from the menu item, and again to select and drag the window. This also prevents clicks on the minimize, maximize and close buttons as well, or any focus back inside the form. It seems that the MenuItem does not properly notice the mouse has left.
Any ideas? I've tried gutting the Menu and MenuItem styles and have had no success. I've changed the DataTemplate to contain a Grid and used Interactions to trigger the commands, but its ugly and seems hacky.

Keyboard focus not being given to region

I have a project using prism and mvvm light. I have a shell that defines two regions, Left region and Main Region.
The left region is populated with a user control, it has a data grid with two columns.
The main region is a user control which has an items control inside which is used to display a number of lines on a canvas. It also has a blank data grid which will be used later.
What I am trying to do is have keyboard focus on the canvas so that I can select multiple lines using a ctrl+click system. I have added the following:
<Canvas x:Name="canvas">
<Canvas.Background>
<SolidColorBrush Color="White" Opacity="100"/>
</Canvas.Background>
<i:Interaction.Triggers>
<i:EventTrigger EventName="KeyDown">
<cmd:EventToCommand Command="{Binding KeyDownCommand}" PassEventArgsToCommand="True"/>
</i:EventTrigger>
...
</i:Interaction.Triggers>
</canvas>
The issue is that the canvas is not being given keyboard focus. When I attempt to press tab, the data grid in the left region changes cells is how I know this. Is there a way I can give the canvas keyboard focus while the mouse is in its region?

The default value of the Focusable property of a Canvas is false. You should set this property to true:
<Canvas x:Name="canvas" Focusable="True">
<!-- your xaml here -->
</Canvas>

Placing a Context Menu relative to button

I'm trying to do exactly what is described here, except with a Rectangle instead of a Button. I did what is described in the answer (among many other things), and I cannot get it to display as shown relative to the rectangle (which, in my case is being used by a button).
I am using a rectangle as a button because I didn't like the mouseover effects of a button and it seemed easier to just use a rectangle rather than building a custom button. As a note, I had this same problem even when I was using a button, in Expression Blend 4.
This is the XAML for my rectangle:
<Rectangle x:Name="rectangle" HorizontalAlignment="Left" MouseDown="MenuClicked" Height="55" VerticalAlignment="Top" Width="135" Grid.ColumnSpan="2" Margin="0,1,0,0" ContextMenuService.Placement="Bottom">
<Rectangle.ContextMenu>
<ContextMenu x:Name="Menu" >
<MenuItem x:Name="LoadXML" Header="Load XML" Command="{Binding Command}" CommandParameter="BrowseXML"/>
<MenuItem x:Name="SaveXML" Header="Save XML" Command="{Binding Command}" CommandParameter="SaveXML"/>
<MenuItem x:Name="SaveBinary" Header="Save Binary" Command="{Binding Command}" CommandParameter="SaveBinary"/>
<MenuItem x:Name="SaveText" Header="Save Text" Command="{Binding Command}" CommandParameter="SaveText"/>
</ContextMenu>
</Rectangle.ContextMenu>
<Rectangle.Fill>
<ImageBrush ImageSource="Resources/Logo.png" Stretch="Uniform" />
</Rectangle.Fill>
</Rectangle>
This still displays the contextmenu directly next to the point of mouse click. If I set Placement to bottom within the Context Menu code, rather than adding the ContextMenuService bit to the Rectangle, it displays it at the bottom or top relative to the entire window.
Any help would be appreciated. Thanks!
EDIT: I am also using a method to enable left-clicking of the rectangle. On MouseDown, it calls this method:
private void MenuClicked(object sender, System.Windows.RoutedEventArgs e)
{
Menu.PlacementTarget = this;
Menu.IsOpen = true;
}

You need to set the ContextMenuService.PlacementTarget property so the framework knows which element the context menu should be positioned relative to, e.g.:
<Rectangle x:Name="rectangle" ContextMenuService.PlacementTarget="{Binding RelativeSource={RelativeSource Self}}" ... />
Just add that property to your Rectangle declaration. When combined with ContextMenuService.Placement="Bottom", the context menu will appear at the bottom as you intended.
EDIT: Since you are opening the menu programatically, you need to set the Placement and PlacementTarget properties directly on the menu itself. The attached properties from ContextMenuService, when set on the menu's owner, will only take effect if the context menu is opened by conventional means, e.g., a right click. In your MouseDown handler, you are setting PlacementTarget = this;, but you should be setting PlacementTarget = rectangle;.

Disabled menu element in WPF looks enabled

My problem is twofold, but i guess that they are related, and if I manage to fix one of them, I will solve both.
First of, lets see the xaml code for a ContextMenu that is linked to a Caliburn.Micro view model:
<ContextMenu>
<MenuItem Header="Configure modem" ItemsSource="{Binding Modems}">
<MenuItem.ItemTemplate>
<DataTemplate>
<MenuItem>
<i:Interaction.Triggers>
<i:EventTrigger EventName="Click">
<ca:ActionMessage MethodName="SelectModem">
<ca:Parameter Value="{Binding Path=DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}" />
</ca:ActionMessage>
</i:EventTrigger>
</i:Interaction.Triggers>
<MenuItem.Header>
<DockPanel>
<Image DockPanel.Dock="Left" Source="{Binding CarrierProfile.CarrierProfileIcon}" Width="40" Height="40"/>
<TextBlock Text="{Binding MenuText}" VerticalAlignment="Center" Margin="10 0"/>
</DockPanel>
</MenuItem.Header>
</MenuItem>
</DataTemplate>
</MenuItem.ItemTemplate>
</MenuItem>
</ContextMenu>
So basically this is just a DataTemplate where I set the Header to a DockPanel containing an image and a TextBlock.
One MenuItem looks like this:
Here you can see the main problem. You can see that there are "two selections". One outer selection, and one inner. If I click the inner selection, everything is fine, and my SelectModem method is called from my view model. However, if you click the outer selection the context menu goes away so that user thinks he has made a selection, but actually no method is called on the view model.
My second problem is that if I disable the MenuItem by adding IsEnabled="False" in the code above, the menu item looks disabled (text is grayed out), I cannot make the inner selection, but on hover is still shows the outer selection, and when clicked the menu goes away (but nothing is triggered in my view model)
So the question is: How can I get rid of the the outer selection?

Listpicker with button in full mode in WP7

I put one button in listpicker full mode template. I want when this button is pressed. It Just invoke my defined event. Not act as normal tap on listpicker And closes the full mode of listpicker.
Please see screenshot below.

To include the button in the listPicker full mode, you have to define the data template as such. Go through the listPicker given here
<DataTemplate x:Name="PickerFullModeItemTemplate">
<StackPanel Orientation="Horizontal" Margin="16 21 0 20">
<Button Click="event">
<Button.Content>
<StackPanel>
<Image Source="myImg.png"/>
<TextBlock Text="test"/>
</StackPanel>
</Button.Content>
</Button>
</StackPanel>
</DataTemplate>
For the behavior you require. Try and test by handling event function on click event in the button. I guess it should work. If not then you have to use popUp instead of listPicker. Or you would have to define your own UserControl in the worst case.