Develop Reference

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.

Drag and drop onto SwapChainPanel in UWP app

We have a UWP application that uses a SwapChainPanel for rendering 2D content, we'd like to be able to drag and drop files on it.
First approach:
Firstly I just tried using the events on the SwapChainPanel itself, they never get called.
<SwapChainPanel x:Name="swap" AllowDrop="True" DragEnter="Swap_DragEnter" >
</SwapChainPanel>
Second approach:
I then tried putting a transparent rectangle in the SwapChainPanel. The drag events do work now, but the SwapChainPanel now doesn't receive any pointer events at all.
<SwapChainPanel x:Name="swap" >
<Rectangle Fill="Transparent" AllowDrop="True" DragEnter="Swap_DragEnter" />
</SwapChainPanel>
Third approach:
It seems the SwapChainPanel doesn't work like a normal XAML control, so I assumed I'd have to handle the drag events in the c++ code that runs the panel. But there doesn't seem to be any way of doing this, there are only references to the basic pointer events.
...
coreInput_ = renderPanel_.CreateCoreIndependentInputSource(deviceTypes);
coreInput_.PointerPressed({this, &InputManagerImpl::onPointerPressed});
coreInput_.PointerMoved({this, &InputManagerImpl::onPointerMoved});
coreInput_.PointerReleased({this, &InputManagerImpl::onPointerReleased});
coreInput_.PointerEntered({this, &InputManagerImpl::onPointerEntered});
coreInput_.PointerExited({this, &InputManagerImpl::onPointerExited});
coreInput_.PointerCaptureLost({this, &InputManagerImpl::onPointerCaptureLost});
coreInput_.PointerWheelChanged({this, &InputManagerImpl::onPointerWheelChanged});
...
So now I'm not sure how I can peform drag/drop operations? Thanks!

I think you could place your SwapChainPanel inside a Grid, and put the drag and drop onto the grid. You might loose interaction with your render scene though. And, make sure, since it's transparent, it accepts user input.
For example:
<!-- add attributes and drag and drop functionality on Grid -->
<Grid AllowDrop="True" DragEnter="Swap_DragEnter">
<SwapChainPanel x:Name="swap">
</SwapChainPanel>
</Grid>

WinRT Controls Over Scrollviewer Consuming Scrolling

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

Grid inside a scrollviewer with multiple user controls inside

I am new to WPF and xaml and I have a problem with my apps UI.
I am using this xaml code:
<ScrollViewer HorizontalAlignment="Left" Margin="252,12,0,0" Name="captchaControlsScrollableContainer" VerticalAlignment="Top">
<Grid Name="captchaControls" Width="339" Height="286">
</Grid>
</ScrollViewer>
And this code behind code that populates the grid:
captchaControls.Children.Add(new Captcha(data));
which is called more than one time
My problem is that only the first user control app apperas in the grid although in the debugger captchaControls.Children.Count is the right size and the scrollviewer's scrollbar is disabled.
Does anyone have any idea what I am doing wrong? Thank you in advance.

Your Grid in the scrollviewer is set to have 1 column and 1 row.So you will see only the last one you add so far (all others controls are "below" the last).
Take a look to the StackPanel control and maybe this tutorial will be useful.

How can I pop a control out of it's container to make it full screen when clicked in Silverlight/Wp7?

So I have a Panorama control and the PanoramaItems are programmatically added to the control using the following template.
<UserControl>
<Grid x:Name="LayoutRoot">
<controls:PanoramaItem Name="sitePanoramaItem" Header="{Binding Name}">
<Controls:DockPanel VerticalAlignment="Stretch">
<StackPanel Orientation="Horizontal" Margin="0,10,0,0" Controls:DockPanel.Dock="Top">
<Image Source="../Images/action.png" Width="64" />
<TextBlock Text="{Binding Stats, Mode=TwoWay}" FontSize="45" Margin="15,0,0,0" />
</StackPanel>
<Grid x:Name="graphCanvas" HorizontalAlignment="Stretch" Margin="10,10,10,10"> </Grid>
</Controls:DockPanel>
</controls:PanoramaItem>
</Grid>
</UserControl>
When I click on graphCanvas what I'd like to do is sorta pop the graphCanvas out and display that fullscreen then when I click again restore it to where it was. I've been all over this site and Google and can't find anything similar to what I'm looking for.
I would still like to maintain the Panorama control functionality so that the graphCanvas is still the only one visible but you can cycle through them. Currently I have it sorta working in that I remove the Grid from the DockPanel and put it directly in the LayoutRoot while making the sitePanoramaItem collapsed. However, it's not fullscreen as the Panorama name is still visible (I guess I could hide that as well...) When I put the graphCanvas back int he DockPanel the size of the canvas is all screwed up.
I was hoping there was a simpler way.
Is it even possible?

It is possible to create the UI you describe but it's not going to be simple. You're on the right track with removing it in code and adding it the LayoutRoot and making the Panorama hidden. However you would have to code the scrolling behavior yourself and that is going to be quite tricky - especially making it feel the way to panorama does.
One trick you could try is actually layer a PivotControl on top of your Panorama and have it be collapsed by default. Also edit it's template to remove all default content eg: remove the header control, set margins to 0, etc). Then when you want to go full screen you can remove all the graphCanvases from the Panorama items and and add them to new PivotItems in the PivotControl. Then hide the Panorama and show the Pivot. This will give you scrolling capability for free and the illusion of full screen.
Having said all that I'm not sure I would recommend this. The more common approach would be to simply be to navigate to another page when the user selects an item and handle the full screen aspects there (possibly using the Pivot control again for scrolling). And when you want to leave "fullscreen" mode simply navigate back to the first page. Handling Tombstoning of the fullscreen state will be much easier with this approach for one thing.

You can try making the graphCanvas a Page and putting it in a different XAML. Then add a frame (name it InnerFrame for example) in the same place where you have the graphCanvas right now and navigate to that page with InnerFrame. When the frame is clicked, you navigate with the RootFrame of the app to your graphCanvas page. When you decide to close it, just navigate back with the RootFrame.
Hope it's clear enough :)
Edit:
Navigation in WP7 works very similar as the standard navigation in Silverlight 4, but it's a bit more restrictive. Just throw a PhoneApplicationFrame in your XAML like this:
<phone:PhoneApplicationFrame x:Name="Frame" />
This is basically the same as a Silverlight frame. All the pages you create inherit from PhoneApplicationPage by default, so they can be showed in a frame without any changes.
Your whole application actually runs on a PhoneApplicationFrame. If you take a look at your App class you will see this:
public PhoneApplicationFrame RootFrame { get; private set; }
Here's the MSDN documentation for the navigation system on WP7