Develop Reference

Drag shape with touch inside a ScrollViewer UWP

I am trying to drag a shape inside a scroll viewer.
My solution was to temporarily disable the scroll viewer when touching the shape, then re-enabling when releasing. Feels a bit hacky, but couldn't find a better solution. Has anyone a better recommendation?
The XAML code below.
<Page
x:Class="testdragshape.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:testdragshape"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Height="390.667">
<Grid>
<ScrollViewer Name="scrollViewer" >
<Grid Name="pageGrid">
<TextBlock Name="log" Text="Position:"/>
<Canvas Name="myCanvas" Width="500" Height="500">
<Rectangle Name="myTarget" Width="272" Height="272" Fill="Red" Canvas.Left="41" Canvas.Top="53" />
</Canvas>
</Grid>
</ScrollViewer>
</Grid>
The C# UWP code below
using Windows.Foundation;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
namespace testdragshape
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
myCanvas.RenderTransform = new TranslateTransform();
myTarget.PointerPressed += Target_PointerPressed;
myTarget.PointerMoved += Target_PointerMoved;
myTarget.PointerReleased += MyTarget_PointerReleased;
}
Point _drag0;
private void Target_PointerPressed(object sender, PointerRoutedEventArgs e)
{
// disable the scroll mode
scrollViewer.HorizontalScrollMode = ScrollMode.Disabled;
scrollViewer.VerticalScrollMode = ScrollMode.Disabled;
_drag0 = e.GetCurrentPoint(myCanvas).Position;
log.Text = "Position - X: " + _drag0.X + " Y: " + _drag0.Y;
}
private void Target_PointerMoved(object sender, PointerRoutedEventArgs e)
{
if (!e.Pointer.IsInContact) return;
var point = e.GetCurrentPoint(myCanvas).Position;
var t = new Point(point.X - _drag0.X, point.Y - _drag0.Y);
TranslateTransform previous = (TranslateTransform)myCanvas.RenderTransform;
myCanvas.RenderTransform = new TranslateTransform()
{
X = previous.X + t.X,
Y = previous.Y + t.Y
};
log.Text = "Position - X: " + point.X + " Y: " + point.Y;
}
private void MyTarget_PointerReleased(object sender, PointerRoutedEventArgs e)
{
// re-enable scroll mode
scrollViewer.HorizontalScrollMode = ScrollMode.Auto;
scrollViewer.VerticalScrollMode = ScrollMode.Auto;
}
}
}

You are almost there, except you should disable the direct manipulation of ScrollViewer instead of disabling scrolling, and re-enable it once you are done.
private void OnPointerPressed(object sender, PointerRoutedEventArgs e)
{
scrollViewer.CancelDirectManipulations();
}
private void OnPointerReleased(object sender, PointerRoutedEventArgs e)
{
TryStartDirectManipulation(e.Pointer);
}

Jumpy and Incomplete XAML Window Drag with C# TouchMove

I have a small undecorated xaml window for a touch screen. The user must be able to move the window using touch and drag. Currently on touch and drag, the window moves in the direction of the drag, but only part way; and there appears to be two windows rather than one, making the touch and drag appear jumpy.
This behavior manifests on the development system (Surface Pro 3 using Visual Studio Professional 2015) as well as on the production system (Windows 7, no keyboard or mouse).
I based this C# on Microsoft's example.
using System.Windows;
using System.Windows.Input;
namespace XAMLApp
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private TouchDevice windowTouchDevice;
private Point lastPoint;
private void Circle_TouchUp(object sender, TouchEventArgs e)
{
// Do stuff.
}
private void Window_TouchDown(object sender, TouchEventArgs e)
{
e.TouchDevice.Capture(this);
if (windowTouchDevice == null)
{
windowTouchDevice = e.TouchDevice;
lastPoint = windowTouchDevice.GetTouchPoint(null).Position;
}
e.Handled = true;
}
private void Window_TouchMove(object sender, TouchEventArgs e)
{
if (e.TouchDevice == windowTouchDevice)
{
var currentTouchPoint = windowTouchDevice.GetTouchPoint(null);
var deltaX = currentTouchPoint.Position.X - lastPoint.X;
var deltaY = currentTouchPoint.Position.Y - lastPoint.Y;
Top += deltaY;
Left += deltaX;
lastPoint = currentTouchPoint.Position;
e.Handled = true;
}
}
private void Window_TouchLeave(object sender, TouchEventArgs e)
{
if (e.TouchDevice == windowTouchDevice)
windowTouchDevice = null;
e.Handled = true;
}
}
}
And here's some xaml for the window.
<Window x:Name="AppWindow" x:Class="XAMLApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:XAMLApp"
mc:Ignorable="d"
Title="XAML Application"
Height="25" Width="25"
AllowsTransparency="True" WindowStyle="None" ResizeMode="NoResize"
ScrollViewer.VerticalScrollBarVisibility="Hidden" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ShowInTaskbar="False" ToolTip="XAML Application" Topmost="True" UseLayoutRounding="True"
MaxHeight="25" MaxWidth="25" MinHeight="25" MinWidth="25"
Left="0" Top="0" Background="Transparent"
TouchDown="Window_TouchDown"
TouchMove="Window_TouchMove"
TouchLeave="Window_TouchLeave">
<Grid>
<Ellipse x:Name="Circle" Fill="Black" HorizontalAlignment="Left"
Height="24" Margin="0" Stroke="Black" VerticalAlignment="Top"
Width="24" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden"
TouchUp="Circle_TouchUp" />
</Grid>
</Window>
I've tried replacing the Grid with a Canvas. That made no difference. I also tried using Manipulation as demonstrated by Microsoft. When trying to drag the window, I was told that the transformation was invalid for the window.
How can I make the touch and drag behave the same as DragMove() using a left-mouse-click-and-drag?

The TouchPoint retrieved through the TouchDevice.GetTouchPoint method and the window's Top and Left attributes do not share the same coordinate system. All you need to do is convert the X and Y values retrieved to screen coordinates:
private void Window_TouchMove(object sender, TouchEventArgs e)
{
if (e.TouchDevice == windowTouchDevice)
{
var currentTouchPoint = windowTouchDevice.GetTouchPoint(null);
var locationOnScreen = this.PointToScreen(new Point(currentTouchPoint.Position.X, currentTouchPoint.Position.Y));
var deltaX = locationOnScreen.X - lastPoint.X;
var deltaY = locationOnScreen.Y - lastPoint.Y;
Top += deltaY;
Left += deltaX;
lastPoint = locationOnScreen;
e.Handled = true;
}
}
EDIT:
Of course, the thing about different coordinate systems applies to the whole project, so the Window_TouchDown event handler method needs to be adapted in a similar way:
private void Window_TouchDown(object sender, TouchEventArgs e)
{
e.TouchDevice.Capture(this);
if (windowTouchDevice == null)
{
windowTouchDevice = e.TouchDevice;
var currentTouchPoint = windowTouchDevice.GetTouchPoint(null);
var locationOnScreen = this.PointToScreen(new Point(currentTouchPoint.Position.X, currentTouchPoint.Position.Y));
lastPoint = locationOnScreen;
}
e.Handled = true;
}

Instead of
Top += deltaY;
Left += deltaX;
I just needed
Top += currentTouchPoint.Position.Y;
Left += currentTouchPoint.Position.X;
Ugh.

Move ellipse on form by mouse

How move ellipse by mouse on window in WPF.
private void ellipse_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
Ellipse ellipse = sender as Ellipse;
if (ellipse != null && e.LeftButton == MouseButtonState.Pressed)
{
DragDrop.DoDragDrop(ellipse,
ellipse.Fill.ToString(),
System.Windows.DragDropEffects.Copy);
}
}
How to create method ellipse_MouseClick?

There is no MouseClick event on Ellipses, however there is the MouseDown and MouseUp events. I assume you are looking for something like this.
WPF:
<Window x:Class="WpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Height="350" Width="525"
MouseMove="Any_MouseMove"
>
<Canvas>
<Ellipse Fill="Lavender" Height="100" Width="100"
MouseLeftButtonDown="Ellipse_MouseLeftButtonDown"
MouseLeftButtonUp="Ellipse_MouseLeftButtonUp"
MouseMove="Any_MouseMove" />
</Canvas>
</Window>
Code Behind:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace WpfApplication
{
public partial class MainWindow : Window
{
private UIElement _lastClickedUIElement;
private Point? _clickOffset;
public MainWindow() { InitializeComponent(); }
private void Ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_lastClickedUIElement = sender as UIElement;
_clickOffset = e.GetPosition(_lastClickedUIElement);
}
private void Ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
_lastClickedUIElement = null;
}
private void Any_MouseMove(object sender, MouseEventArgs e)
{
if (_lastClickedUIElement == null)
return;
_lastClickedUIElement.SetValue(Canvas.LeftProperty, e.GetPosition(this).X - _clickOffset.Value.X);
_lastClickedUIElement.SetValue(Canvas.TopProperty, e.GetPosition(this).Y - _clickOffset.Value.Y);
}
}
}
Click on the circle to move it around. This will work on any UI element as long as long as you give them those methods. feel free to add a Rectangle to the canvas also.
<Rectangle Fill="Lavender" Height="100" Width="100"
MouseLeftButtonDown="Ellipse_MouseLeftButtonDown"
MouseLeftButtonUp="Ellipse_MouseLeftButtonUp"
MouseMove="Any_MouseMove" />

I use three events to accomplish this task:
XAML:
<Window x:Class="WpfPainting.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="500" Width="700" WindowStartupLocation="CenterScreen">
<DockPanel>
<Canvas Background="White" Name="CanvasArea"/>
</DockPanel>
</Window>
Code:
private UIElement source;
private bool captured;
double x_shape, x_canvas, y_shape, y_canvas;
private void ellipse_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Mouse.OverrideCursor = Cursors.SizeAll;
source = (UIElement)sender;
Mouse.Capture(source);
captured = true;
x_shape = Canvas.GetLeft(source);
x_canvas = e.GetPosition(CanvasArea).X;
y_shape = Canvas.GetTop(source);
y_canvas = e.GetPosition(CanvasArea).Y;
}
private void ellipse_MouseMove(object sender, MouseEventArgs e)
{
if (captured)
{
double x = e.GetPosition(CanvasArea).X;
double y = e.GetPosition(CanvasArea).Y;
x_shape += x - x_canvas;
Canvas.SetLeft(source, x_shape);
x_canvas = x;
y_shape += y - y_canvas;
Canvas.SetTop(source, y_shape);
y_canvas = y;
}
}
private void ellipse_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Mouse.Capture(null);
captured = false;
Mouse.OverrideCursor = null;
}
To use the events on a painted ellipse I refer to them like this:
ellipse.MouseLeftButtonDown += conveyor_MouseLeftButtonDown;
ellipse.MouseMove += conveyor_MouseMove;
ellipse.MouseLeftButtonUp += conveyor_MouseLeftButtonUp;

Detect mousedown event on canvas elements

Well, because I have nothing better else to do than getting familiar with C# and WPF I decided to make some simple app with graph with visualisation. So I want to put "nodes" on canvas, and move it, connect by edges e.t.c.
But I don't know how to detect if some "node" is clicked.
I noticed that there's .MouseDown in Ellipse object but don't know how to use it (just if (ellipse.MouseDown) is mot correct) in this situation
xaml:
<Window x:Class="GraphWpf.View"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="View" Height="400" Width="700" ResizeMode="NoResize">
<Grid>
<Canvas x:Name="canvas" MouseDown="Canvas_MouseDown" Background="#227FF2C5" Margin="0,0,107,0" />
<CheckBox Content="Put nodes" Height="32" HorizontalAlignment="Left" Margin="591,67,0,0" Name="putNodes" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>
cs code:
public partial class View : Window
{
public View()
{
InitializeComponent();
}
private Point startPoint;
private Ellipse test;
List<Ellipse> nodesOnCanv = new List<Ellipse>();
private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
{
startPoint = e.GetPosition(canvas);
if ((bool)putNodes.IsChecked)
{
test = new Ellipse();
test.Fill = new SolidColorBrush(Colors.Blue);
test.Width = 20;
test.Height = 20;
var x = startPoint.X;
var y = startPoint.Y;
Canvas.SetLeft(test, x);
Canvas.SetTop(test, y);
canvas.Children.Add(test);
nodesOnCanv.Add(test);
}
else {
foreach(Ellipse element in nodesOnCanv){ //such statment is incorrect
if (element.MouseDown()) {
//do something
}
}
}
}
}

You could use IsMouseOver Property
foreach (Ellipse element in nodesOnCanv)
{
if (element.IsMouseOver)
{
element.Fill = Brushes.Red;
}
}
or handle MouseDown for each node
test = new Ellipse();
test.MouseDown += new MouseButtonEventHandler(test_MouseDown);
.
void test_MouseDown(object sender, MouseButtonEventArgs e)
{
(sender as Ellipse).Fill = Brushes.Red;
}
I would prefer the latter.

How to put bookmark onto slider while timeline marking in c#/xaml metro app

I have checked this sample. It shows me TimeLineMarker API. Now when I press button "Add Marker" at that time markers are added and text block shows the markers, on which time it was added. Now I want to display those markers onto Slider control in the form of any sign like any shape or whatever, so when I want to go directly onto the marker I can go directly clicking on slider. How can I do this ?

Finally got answer from MSDN, thanks Matt
XAML
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<StackPanel VerticalAlignment="Center">
<Grid>
<Canvas x:Name="MyCanvas" Width="{Binding ElementName=MySlider, Path=ActualWidth}" Height="{Binding ElementName=MySlider, Path=ActualHeight}" Background="BlueViolet"/>
<Slider x:Name="MySlider" Orientation="Horizontal" Width="750" Height="50" Loaded="MySlider_Loaded_1"/>
</Grid>
<Button Content="Set marker" Click="Button_Click_1"/>
</StackPanel>
</Grid>
C#
int UniqueId = 0;
List<CustomTick> MyCustomTicks = new List<CustomTick>();
Thumb MySliderThumb;
Point ThumbCurrentPoint;
private void MySlider_Loaded_1(object sender, RoutedEventArgs e)
{
FrameworkElement templateRoot = VisualTreeHelper.GetChild((Slider)sender, 0) as FrameworkElement;
MySliderThumb = templateRoot.FindName("HorizontalThumb") as Thumb;
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
MySliderThumb.TransformToVisual(MyCanvas).TryTransform(new Point(0, 0), out ThumbCurrentPoint);
CustomTick MyCustomTick = new CustomTick();
MyCustomTick.X = ThumbCurrentPoint.X;
MyCustomTick.Y = ThumbCurrentPoint.Y;
MyCustomTick.Value = MySlider.Value;
MyCustomTick.ID = UniqueId++;
MyCustomTicks.Add(MyCustomTick);
Windows.UI.Xaml.Shapes.Rectangle MyRectangle = new Windows.UI.Xaml.Shapes.Rectangle();
MyRectangle.Name = MyCustomTick.ID.ToString();
MyRectangle.Fill = new SolidColorBrush(Windows.UI.Colors.Red);
MyRectangle.Width = MySliderThumb.ActualWidth;
MyRectangle.Height = MySliderThumb.ActualHeight;
MyRectangle.PointerPressed += MyRectangle_PointerPressed;
MyCanvas.Children.Add(MyRectangle);
Canvas.SetTop(MyRectangle, MyCustomTick.Y - MyRectangle.Height );
Canvas.SetLeft(MyRectangle, MyCustomTick.X);
}
void MyRectangle_PointerPressed(object sender, PointerRoutedEventArgs e)
{
Windows.UI.Xaml.Shapes.Rectangle MyRectangle = sender as Windows.UI.Xaml.Shapes.Rectangle;
CustomTick MyCustomTick = new CustomTick();
foreach (CustomTick CT in MyCustomTicks)
{
if (CT.ID.ToString() == MyRectangle.Name)
{
MyCustomTick = CT;
break;
}
}
MySlider.Value = MyCustomTick.Value;
}
List<CustomTick> MyTicks = new System.Collections.Generic.List<CustomTick>();
private class CustomTick
{
public double X;
public double Y;
public double Value;
public int ID;
}