Develop Reference

WPF C# Animating a Thumb

I need help correcting either my thumb drag or my animation after the dragging. The steps I basically want is:
user left-clicks on the scroll handle and drags handle+image
horizontally across the window.
the handle+image will either snap to the left window edge, or the handle
will snap to the right window edge with the image hidden to the
right
if the user release the left click while dragging, the
handle+image will continue on the direction its going to either the
left or right window edge and snaps to that, c.f. #2
Now, upon loading, it is working as I want, but for the subsequent drags, the thumb dragging visibility is gone. It just jumps to where I release the left click and continue the snapping animation from there.
I've tried various workarounds, to the best of my ability, but nothing seems to be the solution. Minimal code is as below.
MainWindow.xaml
<Window x:Class="TouchSample.MainWindow"
Name="Window_TouchSample"
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:TouchSample"
mc:Ignorable="d"
Title="MainWindow"
Height="600" Width="600"
xmlns:custom="clr-namespace:TouchSample">
<Grid Name="Grid_TouchableThing">
<custom:TouchableThing />
</Grid>
</Window>
TouchableThing.xaml
<UserControl x:Class="TouchSample.TouchableThing"
Name="Scroll_UserControl"
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:TouchSample"
mc:Ignorable="d"
d:DesignHeight="600" d:DesignWidth="600">
<Canvas x:Name="Scroll_Canvas">
<Thumb Name="Scroll_thumb"
Canvas.Left="20"
Canvas.Top="120"
Canvas.ZIndex="3"
DragDelta="Thumb_DragDelta"
PreviewMouseLeftButtonUp="Scroll_thumb_PreviewMouseLeftButtonUp">
<Thumb.Template>
<ControlTemplate>
<StackPanel Name="Scroll_thumb_StackPanel"
Orientation="Horizontal">
<Border Name="Scroll_thumb_StackPanel_Border" Background="Black" Padding="1">
<TextBlock Name="Scroll_thumb_StackPanel_Border_TextBlock"
Text="Scroll"
Background="Silver"
TextAlignment="Center"
MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"
>
<TextBlock.LayoutTransform>
<RotateTransform Angle="90"/>
</TextBlock.LayoutTransform>
</TextBlock>
</Border>
<Button Background="Yellow" Padding="1">
<Image Name="Scroll_thumb_StackPanel_Button_Image" Source="Assets/long-ancient-scroll-4499037_x4.jpg" />
</Button>
</StackPanel>
</ControlTemplate>
</Thumb.Template>
</Thumb>
</Canvas>
</UserControl>
TouchableThing.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
namespace TouchSample
{
/// <summary>
/// Interaction logic for TouchableThing.xaml
/// </summary>
public partial class TouchableThing : UserControl
{
private double toLeftValue = 0;
private double toRightValue = 550; // will get overwritten in OnWindowSizeChanged
private bool isGoingLeft = false;
private bool isGoingRight = false;
private double lastDiffX;
public TouchableThing()
{
InitializeComponent();
this.SizeChanged += OnWindowSizeChanged;
}
private void OnWindowSizeChanged(object sender, SizeChangedEventArgs e)
{
//throw new NotImplementedException();
//Console.WriteLine("sender: " + sender.ToString());
//Console.WriteLine("sender.GetType(): " + sender.GetType().ToString());
//Console.WriteLine("e: " + e.ToString());
toRightValue = e.NewSize.Width;
var aBorder = VisualHierarchyHelper.FindChild<Border>(Scroll_thumb, "Scroll_thumb_StackPanel_Border");
if (aBorder != null)
{
Console.WriteLine("aBorder.ActualWidth: " + aBorder.ActualWidth.ToString());
Console.WriteLine("aBorder.RenderSize.Height: " + aBorder.RenderSize.Height.ToString());
toRightValue -= aBorder.ActualWidth;
}
Console.WriteLine("toRightValue=" + toRightValue.ToString());
}
// https://wpf.2000things.com/2012/12/19/715-using-the-thumb-control-to-drag-objects-on-a-canvas/
private void Thumb_DragDelta(object sender, DragDeltaEventArgs e)
{
//UIElement thumb = e.Source as UIElement;
UIElement thumb = sender as UIElement;
double xChange = Canvas.GetLeft(thumb) + e.HorizontalChange;
if(xChange >= toLeftValue && xChange <= toRightValue)
{
Canvas.SetLeft(thumb, xChange);
//Canvas.SetTop(thumb, Canvas.GetTop(thumb) + e.VerticalChange);
//Console.WriteLine("e.HorizontalChange=" + e.HorizontalChange);
if (e.HorizontalChange > 0)
{
isGoingLeft = false;
isGoingRight = true;
}
else if (e.HorizontalChange < 0)
{
isGoingLeft = true;
isGoingRight = false;
}
else
{
isGoingLeft = false;
isGoingRight = false;
}
lastDiffX = xChange;
}
}
private void goLeft(UIElement theUIElement, double fromX)
{
DoubleAnimation goLeftAnim = new DoubleAnimation();
goLeftAnim.From = fromX;
goLeftAnim.To = toLeftValue;
goLeftAnim.Duration = new Duration(TimeSpan.FromSeconds(2));
theUIElement.BeginAnimation(Canvas.LeftProperty, goLeftAnim);
}
private void goRight(UIElement theUIElement, double fromX)
{
DoubleAnimation goRightAnim = new DoubleAnimation();
goRightAnim.From = fromX;
goRightAnim.To = toRightValue;
goRightAnim.Duration = new Duration(TimeSpan.FromSeconds(2));
theUIElement.BeginAnimation(Canvas.LeftProperty, goRightAnim);
}
private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
TextBlock aTextBlock = sender as TextBlock;
//Console.WriteLine("TextBlock_MouseLeftButtonDown: Changing TextBlock Background colour to Gray");
aTextBlock.Background = Brushes.Gray;
}
private void Scroll_thumb_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
var aTextBlock = VisualHierarchyHelper.FindChild<TextBlock>(Scroll_thumb, "Scroll_thumb_StackPanel_Border_TextBlock");
if (Mouse.LeftButton == MouseButtonState.Released && aTextBlock != null)
{
//Console.WriteLine("Scroll_thumb_PreviewMouseLeftButtonUp: Changing TextBlock Background colour to Silver");
//Console.WriteLine(" found aTextBlock");
aTextBlock.Background = Brushes.Silver;
}
if (isGoingLeft)
goLeft(Scroll_thumb, lastDiffX);
else if (isGoingRight)
goRight(Scroll_thumb, lastDiffX);
}
}
}
I'm just starting with WPF with just a year's experience on C# and WinForms, so any help is greatly appreciated.
Sryn

I asked this same question on MSDN and a moderator there, Yohann Lu, gave a working code for my requirements. S/He mentioned that I needed to 'clear the animation' by using this code
theUIElement.BeginAnimation(Canvas.LeftProperty, null);
The thread containing the complete code is at the link below
https://social.msdn.microsoft.com/Forums/en-US/863c85e5-f372-4439-b3dc-f37623665e3a/c-animating-a-thumb?forum=wpf
Thank you Yohann and to anybody who attempted this.
Sryn

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.

How do I drag and move an image around inside a Grid in WPF?

How do I drag and move an image around inside a Grid?
Have been trying to solve my problem for days, to no outcome.. here is my code for the xaml.
<Canvas>
<Grid Canvas.Left="134" Canvas.Top="98" Height="500" Width="1010">
<ContentControl x:Name="poolContainer">
</ContentControl>
<Grid DragEnter="Grid_DragEnter" AllowDrop="True">
<Image Canvas.Left="902" Canvas.Top="324" Height="42" Name="CueStick" Visibility="Visible" Source="/NYP_FYPJ_VP2014;component/Images/cue.png" Margin="780,230,-92,228" Drop="CueStick_DragDrop" MouseMove="CueStick_MouseMove" MouseDown="CueStick_MouseDown" MouseUp="CueStick_MouseUp"></Image>
</Grid>
</Grid>
<RepeatButton Canvas.Left="1175" Canvas.Top="397" Content="Rotate" Height="23" Name="buttonUp" Width="74" Click="buttonUp_Click" />
</Canvas>
Here is my xaml.cs code for the image drag
bool drag = false;
int x = 0;
int y = 0;
private bool isPictureReadyToDrag;
private void SetPosition()
{
CueStick.Location = new Point(MousePosition.X - this.Left - CueStick.Width / 2,
MousePosition.Y - this.Top - CueStick.Height);
}
private void CueStick_MouseMove(object sender, MouseEventArgs e)
{
if (isPictureReadyToDrag)
SetPosition();
}
private void CueStick_MouseDown(object sender, MouseButtonEventArgs e)
{
isPictureReadyToDrag = true;
SetPosition();
}
private void CueStick_MouseUp(object sender, MouseButtonEventArgs e)
{
isPictureReadyToDrag = false;
}

You are doing wrong in several places.
The image is put inside a Grid, its position is solely controlled by the Margin property, Canvas.Top/Left do not take effect and you can remove them.
<Image Canvas.Left="202" Canvas.Top="324" Margin="780,230,-92,228"
and in the code behind, set the image's Margin property, not Location (there is no such property).
CueStick.Margin = new Thickness(...
b. Set an explicit Width to the image, because you are using this value in the code behind.
<Image Width="229" Height="42"
c. You are not using the mouse position correctly; you can get it from MouseEventArgs/MouseButtonEventArgs, something like
private void CueStick_MouseDown(object sender, MouseButtonEventArgs e)
{
isPictureReadyToDrag = true;
double x = e.GetPosition(grid1).X;
double y = e.GetPosition(grid1).Y;
SetPosition(x, y);
}
private void SetPosition(double x, double y)
{
CueStick.Margin = new Thickness(x - CueStick.Width / 2,
y - CueStick.Height / 2, 0, 0);
}
Noted that grid1 is the containing Grid of the image.
<Grid x:Name="grid1" DragEnter="Grid_DragEnter" AllowDrop="True">
<Image...
The hard work of debugging to get the correct Margin is left to you.

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;

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