Keyboard focus not being given to region - c#

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>

Related

Overlay Grid on top of Image inside ScrollViewer

I have the following markup:
<ScrollViewer>
<StackPanel Orientation=Vertical>
<Image />
<Grid />
<ItemsControl />
</StackPanel>
</ScrollViewer>
Okay so the image is an animated loading gif. When an event is completed the program displays the grid and the items control as well, and the user is able to scroll up and down.
In order to do this currently I just set the image to Visiblity='Collapsed' and the Grid and the ItemsControl to Visible. How can I layer them so that the image is always underneath, and the grid and the items control are on top - so that when I fade out the grid and the items control the image appears underneath?
I know that there is an option for Z-Index, I tried placing the Image, Grid and ItemsControl inside a canvas and setting the Panel.ZIndex property but it didnt seem to work - for one when I set the opacity on the Grid to .5 I couldn't see the image underneath, and also the Grid didn't fill the space either (I need it to stretch to the size of the form).
This should work:
<ScrollViewer>
<Grid>
<Image/>
<StackPanel>
<Grid/>
<ItemsControl/>
</StackPanel>
</Grid>
</ScrollViewer>

WPF C# - WindowChrome Resize Overlaping Button

I have a window with a WindowChrome object and a UserControl full of buttons
<WindowChrome.WindowChrome>
<WindowChrome GlassFrameThickness="0,0,0,1" ResizeBorderThickness="2,0,2,2" />
</WindowChrome.WindowChrome>
<Objects:WindowButtons x:Name="WinButtons" Grid.Column="5" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,0,0" Grid.ColumnSpan="2"/>
I want to have a nice unbordered window while maintaining ease of controlling the size.
However the resize tool overlaps the buttons so I cannot click on it and I can only click on the bottom left of the button
How can I place the buttons above the resize dialog?
It sounds like you simply need to add this property to your button:
WindowChrome.IsHitTestVisibleInChrome="True"

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.

WPF Button does not show ToolTip when TapAndHold consecutively

I'm implementing a .NET 4.5 WPF application on a touchscreen desktop. When testing my application, I realised that the tooltips for my buttons will not appear when I tap and hold the same button twice consecutively.
1) I tap and hold on Button A once, the tooltip for Button A appears as expected.
2) I tap and hold on Button A again (after the initial tooltip has disappeared), the tooltip will not appear again.
3) I tap and hold on Button B, tooltip for Button B appears.
4) I tap and hold on Button A now, tooltip for Button A now able to appear.
I am not sure whether this is the default behavior or it's something I did somewhere in my code that caused this to happen. Is there anything I can do to ensure the tooltip appears everytime?
Thanks for the help.
</StackPanel.Resources>
<ContentControl HorizontalAlignment="Center" VerticalAlignment="Center" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<MvvmLight:EventToCommand Command="{Binding MessageInfoVm.ShowInfoMessageCommand}" CommandParameter="{Binding ToolTipOk}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Button ToolTipService.ShowOnDisabled="True" ToolTip="{Binding ToolTipOk}" Command="{Binding OkCommand}" />
</ContentControl>
Try ToolTipService.ShowOnDisabled="True"
or additional event for MouseLeftButtonDown

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;.

Categories