WinRT Controls Over Scrollviewer Consuming Scrolling - c#

My issue is that I have a few controls (buttons, combo-boxes, hit test visible controls, etc) that are on top of a scrollviewer. Now there is no reason for these controls to consume a pointer wheel changed event, and in checking so they do not. But it seems that when the pointer is over these controls and I attempt to scroll, the scrolling event does not get fired on the scrollviewer (I believe that actual event that is supposed to fire is ViewChanged). Now the buttons and stuff should still handle their regular events, such as PointerPressed, KeyDown, etc. But I want to stop them from consuming the event that would cause the scrollviewer to scroll. Any ideas? Thanks in advance.
This is a quick example of what I'm dealing with:
<Grid>
<ScrollViewer>
<StackPanel>
<!-- Insert any number of things here -->
</StackPanel>
</ScrollViewer>
<Button>Hello World</Button>
</Grid>

Add an event to the controls:
public void UIElement_PointerWheelChanged(object sender, PointerWheelChangedEventArgs e)
{
e.Handled = false;
}

Related

How to propagate Home/End button press to a UWP RichEditBox inside of a WPF ScrollViewer?

In a WPF application (targeting .NET core 3.1) on one of the windows, I have a ScrollViewer and inside the ScrollViewer (among other elements) I placed a custom UWP control, which contains a RichEditBox. I added this custom UWP control via XamlHosts:
<Window xmlns:xaml="clr-namespace:Microsoft.Toolkit.Wpf.UI.XamlHost;assembly=Microsoft.Toolkit.Wpf.UI.XamlHost">
...
<ScrollViewer>
<Grid>
...
<xaml:WindowsXamlHost InitialTypeName="UWPControls.MyRichBox" x:Name="UwpRichEditBox"/>
</Grid>
</ScrollViewer>
<Window>
The UWP styled RichEditBox shows up in the WPF app, I can type text, move the caret with the arrow buttons, but some of the key events are not working. For example I can't use the Home/End buttons to go to the beginning or to the ending of a line in the RichEditBox.
The issue is that, the ScrollViewer in the WPF app catches these button presses (Home/End/Ctrl+Right-Left) and it's not propagated towards the Xaml Island RichEditBox control. I know this, because if I remove the ScrollViewer, the issue disappears.
I tried to set Focusable="False" and IsTabStop="False" for the ScrollViewer, but didn't help. I can catch these keyboard events in WPF, but in the XamlIsland UWP control the events are not fired at all when I press the Home or End buttons (nor the KeyDownEvent, neither the PreviewKeyDownEvent). For other keys they are fired.
Can I somehow prevent the ScrollViewer to catch keyboard events? Or can I somehow raise a keyboard event on a UWP RichEditBox when I catch them in WPF?
Finally I could solve this issue, by sub-classing the ScrollViewer and overriding the OnKeyDown method.
namespace MyNameSpace.Custom {
public class MyScrollViewer : ScrollViewer {
protected override void OnKeyDown(KeyEventArgs e) {
// do nothing!
}
}
}
Then use this control in XAML view
<Window x:Class="..."
xmlns:custom="clr-namespace:MyNameSpace.Custom">
<custom:MyScrollViewer>
....
</custom:MyScrollViewer>
</Window>

Why are my custom controls not always receiving MouseEnter events?

Alright, I'm fairly new to WPF and I ran into a very strange problem. The relevant section of my XAML defines a Border around a ScrollViewer around a StackPanel which is populated using an ItemsControl that is then databound to a CollectionViewSource which in turn wraps a standard ObservableCollection. The ItemsControl defines a DataTemplate that contains only one tag: a custom control I've made called a StackElement. I'm handling three events from this control — MouseEnter, MouseLeave, and PreviewMouseLeftButtonUp. These events can fire, but do so unreliably.
For example, after some new StackElements are added, the MouseEnter event generally doesn't fire on the first StackElement until I've moused over a few others. Once a MouseOver manages to fire once, it continues to fire correctly on that StackElement from there on out.
However, the first time mousing over a StackElement doesn't always fail. If I approach the StackElements from beneath and try the last one first, it will always fire. When I do this, sometimes the first one will work, but the second one won't fire. Once, both of them did manage to operate correctly, but it happens infrequently.
I'm not multithreading anything, none of my parent controls handle events of their own, all event handlers consist only of a WriteLine() statement for debugging purposes, and the StackElement code-behind isn't handling any events either.
I've tried decoupling the ItemsControl from the CollectionViewSource in favor of binding it directly to the ObservableCollection, which did nothing other than (as I expected) bypass the sorting functionality I added to the ViewSource. I tried handling the events in the StackElement class itself, in addition to making them be tied to other controls contained within StackElement. I tried using DataTriggers, which if I remember worked as expected, but I need to include more advanced logic such as multiselection and the inability to lightly highlight an already-selected StackElement.
For context, I'm intending to use these events to lightly highlight StackElements when the user drags the mouse over them and to strongly highlight them when the mouse is pressed — basically, I need something that looks and feels like Windows File Explorer. From what I've seen this can't be accomplished in an elegant fashion with DataTriggers alone.
Here's my event handlers (in MainWindow.xaml):
private void StackElement_OnPreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Console.WriteLine("OnPreviewMouseLeftButtonUp fired for a StackElement.");
}
private void StackElement_OnMouseEnter(object sender, MouseEventArgs e)
{
Console.WriteLine("OnMouseEnter fired for a StackElement.");
}
private void StackElement_OnMouseLeave(object sender, MouseEventArgs e)
{
Console.WriteLine("OnMouseLeave fired for a StackElement.");
}
Here's how I'm adding to the bound collection (for testing, which is why it's hooked up to a random button):
private void Btn_File_PreviewMouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
InitiativeStackElement t = new InitiativeStackElement(new Entity("TestName", 10, 11, 12, 13, null)); //InitiativeStackElement implements INotifyPropertyChanged so the databindings work
_entityProvider.Elements.Add(t); //_entityProvider is just a reference to a XAML-defined resource class, which is loaded up in the constructor so I don't have to call TryGetResource() whenever I want to use it. it's currently used for testing purposes only
}
Finally, here's the portion of my XAML containing the StackElements:
<Border Grid.Row="1"
Margin="0,1,0,0"
Style="{StaticResource StandardBorder}">
<ScrollViewer Name="Scv_InitiativeStack">
<StackPanel Name="Stp_InitiativeStack">
<ItemsControl Name="Its_InitiativeStack" ItemsSource="{Binding Source={StaticResource SortedInitiativeStack}}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<con:StackElement Element="{Binding}" PreviewMouseLeftButtonUp="StackElement_OnPreviewMouseLeftButtonUp" MouseEnter="StackElement_OnMouseEnter" MouseLeave="StackElement_OnMouseLeave"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</ScrollViewer>
</Border>
The StackElement class just defines a single DependencyProperty of type InitiativeStackElement. The properties of this object are bound to a few controls within the StackElement, which always displays correctly. It's the behavior of the events that have me confused.
As described, I'm expecting the MouseEnter event to fire whenever the mouse is dragged onto the StackElement. However, it's only firing after I fulfill seemingly random conditions that shouldn't affect it's functionality, like mousing over another StackElement first. There are no error messages.
Alright, I was able to get the functionality I wanted using ListBox:
<Window.Resources>
<DataTemplate x:Key="InitiativeStackTemplate">
<con:StackElement Element="{Binding}"/>
</DataTemplate>
</Window.Resources>
<Border Margin="0,1,0,0"
Grid.Row="1"
Style="{StaticResource StandardBorder}">
<ScrollViewer Name="Scv_InitiativeStack">
<ListBox Name="Lbx_InitiativeStack"
SelectionMode="Extended"
ItemsSource="{Binding Source={StaticResource SortedInitiativeStack}}"
ItemTemplate="{StaticResource InitiativeStackTemplate}"
HorizontalContentAlignment="Stretch"/>
</ScrollViewer>
</Border>
Everything works as expected.

Problems intercepting ManipulationDelta in WP8.1

I just got started with an app for WP8.1, and encounter a problem with intercepting touch move events while leaving the original event treatment in place.
What I want to do is the following:
I have a ListView in a StackPanel in a ScrollViewer in a Grid. The ScrollViewer handles vertical scrolling of the StackPanel/ListView.
Whenever a horizontal touch move appears, I'd like to get a notification so I can adjust some ui element's position based on the horizontal movement.
Sounds simple enough, but any way I tried seems to cancel the original touch move treatment by the ScrollViewer, so the vertical scrolling is not working anymore. I'd really hate to implement the whole scrolling behavior myself ...
I tried already:
Putting a ManipulationMode="TranslationX" ManipulationDelta="handleXTranslation" on the ScrollViewer. The handelXTranslation handler is never called for whatever reason.
Putting the same Manipulation information on the ListView - now the handler gets called (and all handlers of the parent ui elements), but the ScrollViewer is not handling the scrolling anymore, probably because the ListView is not propagating the event to its parents anymore.
Adding a general touch handler to the xaml class when it is loaded. Same problem - either it is not called, and if it is called the scrolling of the ScrollViewer is not done anymore.
The XAML code looks like this (stripped of some data):
<Grid x:Name="LayoutRoot" Background="Transparent" ManipulationMode="TranslationX" ManipulationDelta="gridTranslationX">
<ScrollViewer x:Name="ScrollViewer" ManipulationMode="TranslationX" ManipulationDelta="scrollViewerTranslationX">
<StackPanel x:Name="StackPanel" Orientation="Horizontal" ManipulationMode="TranslationX" ManipulationDelta="scrollViewerTranslationX">
<ListView x:Name="ListView" ManipulationMode="TranslationX" ManipulationDelta="scrollViewerTranslationX">
</ListView>
</StackPanel>
</ScrollViewer>
</Grid>
And the handlers I tried to install in code look like this:
this.AddHandler(UIElement.ManipulationDeltaEvent, new ManipulationDeltaEventHandler(genericDeltaHandler), true);
ListView.PointerMoved += new PointerEventHandler(pointerEvent);
Is there any way to just observe the manipulation events without disturbing their normal treatment?
Sometimes it helps to talk about it ;-) ...
The answer was indeed as simple as adding the System value to the ManipulationMode on the ListView:
<ListView x:Name="ListView" ManipulationMode="TranslateX,System" ManipulationDelta="translationX">

How to receive focus when clicking on the background of a stackpanel?

I have a UserControl which contains a Label and a TextBox. Both are placed inside a stackpanel which is placed in a border.
I now want to receive an Event when the mouse clicks somewere inside the stackpanel or the border. I tried several things, as using transparent Backgrounds, different Events like ismousedirectlyover etc.
Is there a way i can solve this?
You can try by capturing the mousedown event inside your textbox, your label and your stackpanel and bind them all directly to the same method, you will allways get the mousedown event independent on where you clicked.
You can also try to set the
Panel.Zindex
property to a higher number in the stackpanel and then only capture the mousedown event on it.
1) Add an handler for the MouseLeftButtonDown to the border:
<Border MouseLeftButtonDown="Border_MouseLeftButtonDown">
<StackPanel Background="Transparent">
<TextBox x:Name="Text" />
</StackPanel>
</Border>
2) Set the focus manually to the TextBox:
private void Border_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Text.Focus();
}
make sure to set the background of the stackpanel to transparent.

Left Click on Bing Maps and WPF doesnt work properly

I'm creating a WPF application that use the Bing Maps. I put it in a page control that at the same time is called from an iframe control. At the begining it displayed the Map and I can zoom in and out without a problem.
The thing is, that when I click the Map with the left button of my mouse what it does is to go down a little bit of the current location and a zoom in is done automatically instead of holding the point where the click was done to do a kind of drag and drop. Just like Google Maps does.
Here is my XAML code:
<Grid x:Name="LayoutRoot">
<TextBlock Text="News page" FontSize="32" />
<m:Map CredentialsProvider="..."
Center="25.6732109,-100.309201" ZoomLevel="12" Mode="Road"/>
</Grid>
I'm using the following assembly reference: xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Does any one know how can I fix it?
Regards!
If you use the mouse up or down events on the Map control this will work fine. The map itself doesn't expose a Click event of it's own, but you don't need that if you use the mouse up/down events.
I had the same problem. The solution was to add a MouseDown Event to the map:
<m:Map
CredentialsProvider="<your Credentials>"
Center="{Binding Center, Mode=TwoWay}"
ZoomLevel="10"
MouseDown="Map_MouseDown">
</m:Map>
In the code behind you can add:
private void Map_MouseDown(object sender, MouseButtonEventArgs e)
{
e.Handled = true;
}
This handles the event and no further processing is done. After this moving and draging the Map worked as usual maps do.

Categories

Resources