Develop Reference

how to bubble pointer event to child overlapping each other in same parent

I have a situation where I have several images overlapping each other and on the pointer pressed I want to test if the clicked point is clicked on the transparent part of the image I want it to let go of the event and let the image below it test it out and repeat but it's passing the pointer event directly to the parent and remaining image is not being tested
<Grid Background="Red"
Width="200"
Height="200"
x:Name="grdRed"
PointerPressed="grdRed_PointerPressed"
VerticalAlignment="Center"
HorizontalAlignment="Center">
<Grid Background="Blue"
Width="150"
Height="150"
x:Name="grdBlue"
PointerPressed="grdBlue_PointerPressed"/>
<Grid Background="Green"
Width="100"
Height="100"
x:Name="grdGreen"
PointerPressed="grdGreen_PointerPressed"/>
</Grid>
private void grdRed_PointerPressed(object sender, PointerRoutedEventArgs e)
{
Debug.WriteLine("Red Pressed ");
e.Handled = false;
}
private void grdBlue_PointerPressed(object sender, PointerRoutedEventArgs e)
{
Debug.WriteLine("Blue Pressed ");
e.Handled = false;
}
private void grdGreen_PointerPressed(object sender, PointerRoutedEventArgs e)
{
Debug.WriteLine("Green Pressed ");
e.Handled = false;
}
now when I click the green Color Grid
output is
Green Pressed
Red Pressed
what I want is
Green Pressed
Blue Pressed
Red Pressed
but I want it to go through the blue grid since the blue grid is below the green one,
I'll set the e.Handled as per the calculation if the clicked part is transparent I'll set it to false else true then it should go to blue grid I'll test it again and so on
So the question is how can I make the event get passed through the blue grid currently it moving from child to parent directly
thanks

Drag and drop Elements on a Canvas

This may be a very basic question. I have a canvas, which I put different Elements on in runtime (TextBoxes, Shapes, Buttons). Now I want to be able to drag and drop those elements to another location on the same canvas.
Can anyone provide me with some code, how to implement something like onDrag in runtime?

You can use for example the MouseDown, MouseMove and MouseUp events and then the MouseEventArgs's GetPosition(element) that returns you the coordinates relative to element (there are more events that expose this method).
Also, take advantage of the RoutedEvent's OriginalSource to check which element inside the canvas was clicked (in this case it's only the rectangle).
Here's an example:
<Grid>
<Canvas Name="MyCanvas" PreviewMouseLeftButtonDown="OnMouseDown" MouseMove="OnMouseMove">
<Rectangle Width="20" Height="20" Canvas.Left="10" Canvas.Top="10" Fill="Blue"/>
<Rectangle Width="20" Height="20" Canvas.Left="50" Canvas.Top="10" Fill="Red"/>
</Canvas>
</Grid>
Code-behind:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
AddHandler(Mouse.MouseUpEvent, new MouseButtonEventHandler(OnMouseUp), true);
}
private bool _isBeingDragged;
public void OnMouseDown(object sender, MouseEventArgs args)
{
if (!(args.OriginalSource is Canvas))
{
_isBeingDragged = true;
}
}
public void OnMouseMove(object sender, MouseEventArgs args)
{
if (_isBeingDragged)
{
var elementBeingDragged = (FrameworkElement) args.OriginalSource;
var position = args.GetPosition(MyCanvas);
Canvas.SetLeft(elementBeingDragged, position.X - elementBeingDragged.ActualWidth / 2);
Canvas.SetTop(elementBeingDragged, position.Y - elementBeingDragged.ActualHeight / 2);
}
}
public void OnMouseUp(object sender, MouseEventArgs args)
{
_isBeingDragged = false;
}
}
I had to use the UIElement's AddHandler method to register MouseUp because somehow it has being marked as Handled (the AddHandler method allows you to register an event handler for events that have been handled previously, i.e. e.Handled = true)

WPF C# Media Element Show first image of video

i have a .mov file that i want to play using MediaElement of WPF , i can play and pause with no worries as i use MediaState.Manual , but i want to show the first image or frame of the video when i load it , the source is set in code behind , i tried MediaElement.ScrubbingEnabled = true both code behind and xaml but it still doesn't show.
Here is my code ( xaml side ) :
<DockPanel Height="386" HorizontalAlignment="Center" Name="dockPanel1" VerticalAlignment="Top" Width="731">
<MediaElement Name="McMediaElement" LoadedBehavior="Manual" UnloadedBehavior="Manual" Stretch="Fill" MediaOpened="Element_MediaOpened" MediaEnded="Element_MediaEnded" OpacityMask="#FF040410" Height="386" IsVisibleChanged="SingAlong_IsVisibleChanged" ScrubbingEnabled="True"></MediaElement>
</DockPanel>
Code behind ( xaml.cs) :
private void PlayAudio()
{
McMediaElement.LoadedBehavior = MediaState.Manual;
McMediaElement.Source = new Uri("../../SingAlong/GrassHopper and Ants/ants2.mov", UriKind.RelativeOrAbsolute);
McMediaElement.ScrubbingEnabled = true;
McMediaElement.Play();
}
private void button1_Click_1(object sender, RoutedEventArgs e) // Play button
{
if (McMediaElement.Source != null)
{
McMediaElement.Play();
}
else
PlayAudio();
}
private void button2_Click(object sender, RoutedEventArgs e) // Pause button
{
McMediaElement.Pause();
}

From what I can gather, you are loading your video (setting the Source) only when you click button1, yet you want the first frame to show before this happens. To accomplish this, you will have to load your video in another method, preferably when your Page or Window loads. Then you can do the following:
McMediaElement.ScrubbingEnabled = true;
McMediaElement.Play();
McMediaElement.Pause();

Why does the MouseMove event not work if mouse loses focus on object?

I basically have a simple problem in my program that I just want to make sure goes right. It should on the click of the mouse button add the MouseEventHandler and then move the circle along with the mouse until the event handler gets removed. I simplified the code to the very basics:
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid Name="grid1" Background="White" MouseLeftButtonUp="grid_MouseUp">
<Ellipse Height="50" HorizontalAlignment="Left" Margin="12,12,0,0" Name="ellipse1" Stroke="{x:Null}" VerticalAlignment="Top" Width="50" Fill="Black" MouseLeftButtonDown="ellipse1_MouseDown" />
</Grid>
</Window>
C#:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private static Point _oldPoint = new Point(), _newPoint = new Point();
private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e)
{
_oldPoint = e.GetPosition(grid1);
grid1.MouseMove += new MouseEventHandler(grid_MouseMove);
}
private void grid_MouseUp(object sender, MouseButtonEventArgs e)
{
grid1.MouseMove -= new MouseEventHandler(grid_MouseMove);
}
private void grid_MouseMove(object sender, MouseEventArgs e)
{
_newPoint = e.GetPosition(grid1);
ellipse1.Margin = new Thickness(ellipse1.Margin.Left - _oldPoint.X + _newPoint.X, ellipse1.Margin.Top - _oldPoint.Y + _newPoint.Y, 0, 0);
_oldPoint = _newPoint;
}
}
Now in general this code works fine and I think is quite neat as it doesn't check the movement of the mouse until one actually presses the button. However, my question is as follows:
I had to add the MouseMove event to the grid rather than to the circle, because once the mouse pointer loses focus of the circle (by moving the mouse too fast) it doesn't trigger the MouseMove event anymore. But why exactly does that happen? At the beginning of the event the mouse was definitely above the circle and then it moved. Yes, it moved away from the circle but shouldn't that still trigger the event?

You can capture the mouse and handle all events in your ellipse.
<Grid Name="grid1" Background="White">
<Ellipse Height="50" HorizontalAlignment="Left" Margin="12,12,0,0" Name="ellipse1" Stroke="{x:Null}" VerticalAlignment="Top" Width="50" Fill="Black"
MouseLeftButtonDown="ellipse1_MouseDown" MouseLeftButtonUp="ellipse1_MouseUp" />
</Grid>
with this code behind
private void ellipse1_MouseDown(object sender, MouseButtonEventArgs e)
{
Mouse.Capture(ellipse1);
_oldPoint = e.GetPosition(grid1);
ellipse1.MouseMove += new MouseEventHandler(ellipse1_MouseMove);
}
private void ellipse1_MouseUp(object sender, MouseButtonEventArgs e)
{
Mouse.Capture(null);
ellipse1.MouseMove -= new MouseEventHandler(ellipse1_MouseMove);
}
I've moved and renamed grid_MouseMove to ellipse1_MouseMove.

Adding to what Peter said, if you use the Grid.MouseDown event and checked if the oldPoint is within Ellipse and have then handled the MouseMove event, this odd behavior wont be seen.
I also suggest exploring drag events.

A control only gets the mouse-events as long as the mouse is hovering over that particularly control.
If moving to a new control, the mouse is getting unhooked from the old control and hooked to the new control.
There are ways where you can create a global hook attached to the entire process, but I guess this is not what we are talking about.

Dragging a window in WPF using DragMove method and click handler on the same button

I need a button for two purposes:
- Users can drag the application's window using the button
- Users can simply click the button to toggle visibility of some other element in the window.
The button is a PNG image.
I am trying to do it in the following way:
XAML:
<Button Name="toggleButton" Click="toggleButton_Click" Canvas.Left="177" Canvas.Top="0">
<Button.Template>
<ControlTemplate>
<Image Source="/FootballRssReader;component/images/ball.png" MouseLeftButtonDown="toggleButton_MouseLeftButtonDown"/>
</ControlTemplate>
</Button.Template>
</Button>
C#:
private void toggleButton_Click(object sender, RoutedEventArgs e)
{
contentVisible = !contentVisible;
content.Visibility = contentVisible ? Visibility.Visible : Visibility.Collapsed;
}
private void toggleButton_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
DragMove();
}
The problem is that only the window moving works. Clicks on the button don't invoke the Click event handler. When I remove MouseLeftButtonDown event handling from the button's image, the Click event is executed.
Can anybody help me? Is it possible to create such a button?
I tried setting Handled to false in the Image but it didn't help.
Thanks, Michal

DragMove starts a modal message loop and doesn't return until the mouse button is released, so by the time the button receives the MouseLeftButtonDown event it's already lost the chance to click.
I'm assuming you don't want the Click to happen if the user drags the window. One approach is to do something similar to drag-drop, and only call DragMove if the mouse starts moving while it is pressed. Attach handlers to PreviewMouseLeftButtonDown and PreviewMouseMove on the Button:
<Button Name="toggleButton" Click="toggleButton_Click"
Canvas.Left="177" Canvas.Top="0"
PreviewMouseMove="toggleButton_PreviewMouseMove"
PreviewMouseLeftButtonDown="toggleButton_PreviewMouseLeftButtonDown">
<Button.Template>
<ControlTemplate>
<Image Source="/FootballRssReader;component/images/ball.png"/>
</ControlTemplate>
</Button.Template>
</Button>
Record the mouse position in the PreviewLeftMouseButtonDown handler, and then start the DragMove in the PreviewMouseMove handler if the mouse has started moving:
private Point startPoint;
private void toggleButton_PreviewMouseLeftButtonDown(
object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(toggleButton);
}
private void toggleButton_PreviewMouseMove(object sender, MouseEventArgs e)
{
var currentPoint = e.GetPosition(toggleButton);
if (e.LeftButton == MouseButtonState.Pressed &&
toggleButton.IsMouseCaptured &&
(Math.Abs(currentPoint.X - startPoint.X) >
SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(currentPoint.Y - startPoint.Y) >
SystemParameters.MinimumVerticalDragDistance))
{
// Prevent Click from firing
toggleButton.ReleaseMouseCapture();
DragMove();
}
}