How to smoothly drag an image box in WPF? - wpf

I'm working with WPF 4 and VB.net 2010. My project consists of full-screen windows with a 640x480 grid in the center.
In this project, I want to have various image boxes (which will have the item .png images in them), that the user can drag around and drop in various places on the grid.
In essence, I need to be able to make it possible for the item to be clicked and dragged around the grid, with the image box still visible and the same size as the user moves it around. It should never be able to leave the grid. I also need to be able to determine if the object is over another object, so when the mouse button is released, the dragged object is "dropped", and it triggers a particular block of code.
How do I do this?

Something similar to your 'project', but using C#
From http://pastie.org/1498237
// XAML
<Window x:Class="MyProject.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="500" Width="500">
<Grid>
<Canvas x:Name="mycanv">
<Image Width="150" x:Name="myimg" Source="some_source.png"/>
</Canvas>
</Grid>
</Window>
//C#
private Point mouseClick;
private double canvasLeft;
private double canvasTop;
public Window1()
{
InitializeComponent();
foreach (object obj in mycanv.Children)
{
try
{
Image img = (Image)obj;
img.PreviewMouseDown += new MouseButtonEventHandler(myimg_MouseDown);
img.PreviewMouseMove += new MouseEventHandler(myimg_MouseMove);
img.PreviewMouseUp += new MouseButtonEventHandler(myimg_MouseUp);
img.TextInput += new TextCompositionEventHandler(myimg_TextInput);
img.LostMouseCapture += new MouseEventHandler(myimg_LostMouseCapture);
img.SetValue(Canvas.LeftProperty, 0.0);
img.SetValue(Canvas.TopProperty, 0.0);
}
catch
{
//do something
}
}
}
void myimg_LostMouseCapture(object sender, MouseEventArgs e)
{
((Image)sender).ReleaseMouseCapture();
}
void myimg_TextInput(object sender, TextCompositionEventArgs e)
{
((Image)sender).ReleaseMouseCapture();
}
void myimg_MouseUp(object sender, MouseButtonEventArgs e)
{
((Image)sender).ReleaseMouseCapture();
}
void myimg_MouseMove(object sender, MouseEventArgs e)
{
if (((Image)sender).IsMouseCaptured)
{
Point mouseCurrent = e.GetPosition(null);
double Left = mouseCurrent.X - canvasLeft;
double Top = mouseCurrent.Y - canvasTop;
((Image)sender).SetValue(Canvas.LeftProperty, canvasLeft + Left);
((Image)sender).SetValue(Canvas.TopProperty, canvasTop + Top);
canvasLeft = Canvas.GetLeft(((Image)sender));
canvasTop = Canvas.GetTop(((Image)sender));
}
}
void myimg_MouseDown(object sender, MouseButtonEventArgs e)
{
mouseClick = e.GetPosition(null);
canvasLeft = Canvas.GetLeft(((Image)sender));
canvasTop = Canvas.GetTop(((Image)sender));
((Image)sender).CaptureMouse();
}

Related

How to make drag-able WPF window without default windows style?

I was making a WPF application with Windows style = None, I managed to create and work exit button in my window but i don't know how to make it drag able while pressing left mouse button.
I have created Mouse left button down event in .cs file as below:
private void see(object sender, MouseButtonEventArgs e)
{
this.DragMove();
}
Then I added border in .xaml file to do dragging of the window as below:
<Grid>
<Border BorderThickness="2" BorderBrush="Black" Height="120" Width="100" MouseLeftButtonDown="see" />
</Grid>
Now i don't understand what is the problem here? I will be very thankful if someone help me in this ?
Use a similar pattern to this Window:
public class DragableWindowNoStyle : Window
{
public DragableWindowNoStyle()
{
WindowStyle = WindowStyle.None;
Grid grid = new Grid() { };
_moveBorder = new Border()
{
BorderThickness = new Thickness(2),
BorderBrush = Brushes.Red,
Background = Brushes.Black,
Width = 50,
Height = 20,
HorizontalAlignment= System.Windows.HorizontalAlignment.Center,
VerticalAlignment = System.Windows.VerticalAlignment.Top,
};
grid.Children.Add(_moveBorder);
this.Content = grid;
_moveBorder.PreviewMouseLeftButtonDown += _moveBorder_PreviewMouseLeftButtonDown;
}
Point _startPoint;
bool _isDragging = false;
Border _moveBorder;
private void _moveBorder_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
if (Mouse.Capture(this))
{
_isDragging = true;
_startPoint = PointToScreen(Mouse.GetPosition(this));
}
}
protected override void OnPreviewMouseMove(MouseEventArgs e)
{
if (_isDragging)
{
Point newPoint = PointToScreen(Mouse.GetPosition(this));
int diffX = (int)(newPoint.X - _startPoint.X);
int diffY = (int)(newPoint.Y - _startPoint.Y);
if (Math.Abs(diffX) > 1 || Math.Abs(diffY) > 1)
{
Left += diffX;
Top += diffY;
InvalidateVisual();
_startPoint = newPoint;
}
}
}
protected override void OnPreviewMouseLeftButtonUp(MouseButtonEventArgs e)
{
if (_isDragging)
{
_isDragging = false;
Mouse.Capture(null);
}
}
}
There is an example of how to create a custom window with resize, drag, minimize, restore and close functionality from scratch available here:
How to create a custom window in WPF: https://blog.magnusmontin.net/2013/03/16/how-to-create-a-custom-window-in-wpf/
You could also customize a window while retaining its standard functionality using the WindowChrome class: https://msdn.microsoft.com/en-us/library/system.windows.shell.windowchrome(v=vs.110).aspx. Then you don't have to implement the resize and drag functionality yourself.

Sliding images with finger holding and moving in WPF, just like smartphone

This is my code:
<Grid Grid.Row="1" >
<Image Stretch="Fill" Source="{Binding Path=MyImage}"/>
</Grid>
I have an image in my view, and I set its surce by binding.
Outside of this image, I have two arrows (left arrow and right). If the user clicks on the right arrow, I'm showing him the next image, if he clicks on the right arrow again - the next one, etc. This works very well.
Now I want to do it to work just like we slide images in our smartphones, by using our thumb, without using arrows. So, I need to make the images slide by clicking the mouse button, holding it and then moving it left or right.
How can I do that?
You could create a Behavior that will handle the scrolling:
public class ScrollViewerTouchScrollBehaviour : Behavior<ScrollViewer>
{
private double? _horizontalOffset;
private Point? _position;
private double _sensitivity = 1;
public double Sensitivity
{
get { return _sensitivity; }
set { _sensitivity = value; }
}
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.PreviewMouseLeftButtonDown += PreviewMouseLeftButtonDown;
AssociatedObject.PreviewMouseMove += PreviewMouseMove;
AssociatedObject.PreviewMouseLeftButtonUp += PreviewMouseLeftButtonUp;
}
protected override void OnDetaching()
{
base.OnDetaching();
AssociatedObject.PreviewMouseLeftButtonDown -= PreviewMouseLeftButtonDown;
AssociatedObject.PreviewMouseMove -= PreviewMouseMove;
AssociatedObject.PreviewMouseLeftButtonUp -= PreviewMouseLeftButtonUp;
}
private void PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
_horizontalOffset = AssociatedObject.HorizontalOffset;
_position = e.GetPosition(AssociatedObject);
}
private void PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
AssociatedObject.ReleaseMouseCapture();
}
private void PreviewMouseMove(object sender, MouseEventArgs e)
{
if (e.LeftButton != MouseButtonState.Pressed || !_horizontalOffset.HasValue || !_position.HasValue)
{
return;
}
var point = e.GetPosition(AssociatedObject);
var diff = point.X / Sensitivity - _position.Value.X / Sensitivity;
AssociatedObject.ScrollToHorizontalOffset(_horizontalOffset.Value - diff);
}
}
The Sensitivity property allows you to tweek the speed of the scrolling. Experiment with different values to see what best suits your application.
Then in your xaml place the content that you want to be able to scroll inside a ScrollViewer and add the behavior:
<ScrollViewer CanContentScroll="True"
HorizontalScrollBarVisibility="Hidden"
VerticalScrollBarVisibility="Hidden"
VerticalAlignment="Stretch">
<!-- Your content here -->
<i:Interaction.Behaviors>
<behaviours:ScrollViewerTouchScrollBehaviour Sensitivity="1" />
</i:Interaction.Behaviors>
</ScrollViewer>
You will of course need to add a reference to Systems.Windows.Interactivty in your behavior and in the xaml.
You could alternatively just handle the events in code-behind if you don't want to use a behavior.
You can handle the mouse events on down and up and calculate the X-value
private Point down;
public MainWindow()
{
InitializeComponent();
}
private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
down = e.GetPosition(this);
}
private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
Point up = e.GetPosition(this);
}
On Image_MouseLeftButtonUp you can calculate with down.X and up.X the difference and start your actions.

Android Like ScrollBar for WPF ListView

How to have android like scrollbars for my WPF ListView. I mean to say, the scrollbar should be visible only when the user scrolls. They should fade out as soon as the user stops scrolling. How to achieve this?
You can use the DispatcherTimer class from the System.Windows.Threading namespace.
Here is the XAML markup for your window:
<Window x:Class="testwpf.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ListView Name="list" ScrollViewer.VerticalScrollBarVisibility="Hidden" Loaded="list_Loaded">
</ListView>
</Window>
And here is the code behind:
public partial class MainWindow : Window
{
DispatcherTimer dispatcherTimer;
public MainWindow()
{
InitializeComponent();
dispatcherTimer = new DispatcherTimer();
dispatcherTimer.Tick += dispatcherTimer_Tick;
}
private void dispatcherTimer_Tick(object sender, EventArgs e)
{
// we are here only if for the last 500 ms there were no changes of
// the scrollbar's vertical offset and we can hide a scrollbar
list.SetValue(ScrollViewer.VerticalScrollBarVisibilityProperty, ScrollBarVisibility.Hidden);
dispatcherTimer.Stop();
}
private void list_Loaded(object sender, RoutedEventArgs e)
{
// attach a handler
Decorator border = VisualTreeHelper.GetChild(list, 0) as Decorator;
ScrollViewer scroll = border.Child as ScrollViewer;
scroll.ScrollChanged += list_ScrollChanged;
}
private void list_ScrollChanged(object sender, ScrollChangedEventArgs e)
{
// when vertical scroll position is changed, we set VerticalScrollBarVisibilityProperty
// to Auto (scroll bar is displayed only if needed) and run a timer with 500 ms interval
if (e.VerticalChange != 0)
{
list.SetValue(ScrollViewer.VerticalScrollBarVisibilityProperty, ScrollBarVisibility.Auto);
dispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
dispatcherTimer.Start();
}
}
}
This is a raw example. Of course, you can apply your own conditions defining whether you should hide a scrollbar. For example, you might decide not to hide a scrollbar if left mouse button is still pressed over a scrollbar.

WPF - Zooming in on an image inside a scroll viewer, and having the scrollbars adjust accordingly

I have put together a simple WPF application to demonstrate the issue I am having. My XAML is below:
<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="427" Width="467" Loaded="MainWindow_OnLoaded">
<Grid>
<ScrollViewer Name="MyScrollViewer" CanContentScroll="True">
<Image Name="MyImage" HorizontalAlignment="Left" VerticalAlignment="Top" MouseWheel="UIElement_OnMouseWheel" MouseDown="MyImage_OnMouseDown" MouseUp="MyImage_OnMouseUp"/>
</ScrollViewer>
</Grid>
</Window>
The code-behind is below:
using System;
using System.Windows;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
namespace WpfApplication1
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void UIElement_OnMouseWheel(object sender, MouseWheelEventArgs e)
{
var matrix = MyImage.RenderTransform.Value;
if (e.Delta > 0)
{
matrix.ScaleAt(1.5, 1.5, e.GetPosition(this).X, e.GetPosition(this).Y);
}
else
{
matrix.ScaleAt(1.0 / 1.5, 1.0 / 1.5, e.GetPosition(this).X, e.GetPosition(this).Y);
}
MyImage.RenderTransform = new MatrixTransform(matrix);
}
private WriteableBitmap writeableBitmap;
private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
{
var image = new WriteableBitmap(new BitmapImage(new Uri(#"C:\myImage.png", UriKind.Absolute)));
MyImage.Width = image.Width;
MyImage.Height = image.Height;
image = BitmapFactory.ConvertToPbgra32Format(image);
writeableBitmap = image;
MyImage.Source = image;
}
private Point downPoint;
private Point upPoint;
private void MyImage_OnMouseDown(object sender, MouseButtonEventArgs e)
{
downPoint = e.GetPosition(MyImage);
}
private void MyImage_OnMouseUp(object sender, MouseButtonEventArgs e)
{
upPoint = e.GetPosition(MyImage);
writeableBitmap.DrawRectangle(Convert.ToInt32(downPoint.X), Convert.ToInt32(downPoint.Y), Convert.ToInt32(upPoint.X), Convert.ToInt32(upPoint.Y), Colors.Red);
MyImage.Source = writeableBitmap;
}
}
}
I have added WriteableBitmapEx using Nuget. If you run this, and replace myImage.png with the location of an actual image on your computer, you will find an application that looks something like this:
You can draw a box on the image by clicking on the top-left of where you want the box to go and dragging to the bottom right of where you want the box to go, you get a red rectangle. You can even zoom in with the middle-mouse, and draw a rectangle up close for more precision, this works as expected.
The problem is that, when you scroll in with the middle mouse, the scroll bars don't re-adjust, which is a requirement of the program I am creating. My question is how do I force the scrollbars on the scrollviewer to re-adjust when the image is zoomed in?
I am convinced it has something to do with the RenderTransform property of the ScrollViewer, and that I need to update it at the same time I update the RenderTransform property of the image (on UIElement_OnMouseWheel) but I am unsure of exactly how to go about this.
You should be using LayoutTransform instead of RenderTransform on your Image.
RenderTransform happens after layout completes and is visual only. LayoutTransform is done before the layout pass and so can notify the ScrollViewer of the new size.
See here for more info: http://msdn.microsoft.com/en-us/library/system.windows.frameworkelement.layouttransform.aspx
For pure scrolling I'd rather use a ScaleTransform, it should adjust the scrollbars accordingly.
You can try below code if it fixes your issue.
private double _zoomValue = 1.0;
private void UIElement_OnMouseWheel(object sender, MouseWheelEventArgs e)
{
if (e.Delta > 0)
{
_zoomValue += 0.1;
}
else
{
_zoomValue -= 0.1;
}
ScaleTransform scale = new ScaleTransform(_zoomValue, _zoomValue);
MyImage.LayoutTransform = scale;
e.Handled = true;
}
Let's assume you have a Canvas_Main inside a ViewBox_CanvasMain, which in turn inside a ScrollViewer_CanvasMain. You want to zoom in by turning the mouse wheel, and the ScrollViewer will adjust the offset automatically so the feature (pointed by the mouse in the Canvas_Main) stays during the zoom in/out. It is complex but here is the code called by the mouse wheel eventhandler:
private void MouseWheelZoom(MouseWheelEventArgs e)
{
if(Canvas_Main.IsMouseOver)
{
Point mouseAtImage = e.GetPosition(Canvas_Main); // ScrollViewer_CanvasMain.TranslatePoint(middleOfScrollViewer, Canvas_Main);
Point mouseAtScrollViewer = e.GetPosition(ScrollViewer_CanvasMain);
ScaleTransform st = ViewBox_CanvasMain.LayoutTransform as ScaleTransform;
if (st == null)
{
st = new ScaleTransform();
ViewBox_CanvasMain.LayoutTransform = st;
}
if (e.Delta > 0)
{
st.ScaleX = st.ScaleY = st.ScaleX * 1.25;
if (st.ScaleX > 64) st.ScaleX = st.ScaleY = 64;
}
else
{
st.ScaleX = st.ScaleY = st.ScaleX / 1.25;
if (st.ScaleX < 1) st.ScaleX = st.ScaleY = 1;
}
#region [this step is critical for offset]
ScrollViewer_CanvasMain.ScrollToHorizontalOffset(0);
ScrollViewer_CanvasMain.ScrollToVerticalOffset(0);
this.UpdateLayout();
#endregion
Vector offset = Canvas_Main.TranslatePoint(mouseAtImage, ScrollViewer_CanvasMain) - mouseAtScrollViewer; // (Vector)middleOfScrollViewer;
ScrollViewer_CanvasMain.ScrollToHorizontalOffset(offset.X);
ScrollViewer_CanvasMain.ScrollToVerticalOffset(offset.Y);
this.UpdateLayout();
e.Handled = true;
}
}

Silverlight : MouseLeftButtonUp is not triggered

I'm new to Silverlight and I'm working on drawing a rectangle on the screen in the run time,
I have a class ( SelectionBox ), and on the main page, I have a canvas,
when clicking on that Canvas I have the following function called
private void BeginDrawing(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_initXPos = e.GetPosition(drawingArea).X;
_initYPos = e.GetPosition(drawingArea).Y;
_selectionBox = new SelectionBox ();
drawingArea.Children.Add(_selectionBox);
_isDrawing = true;
}
and that Handler has been added through blend Events (MouseLeftButtonDown)
when the mouse is moving, the following method is called, also added through Blend events,
private void UpdateSelectionBox(object sender, System.Windows.Input.MouseEventArgs e)
{
if(!_isDrawing &&)
return;
double rectWidth, rectHeight, rectXPos, rectYPos;
if (e.GetPosition(drawingArea).X >= _initXPos)
{
rectWidth = e.GetPosition(drawingArea).X - _initXPos;
rectXPos = _initXPos;
}
else
{
rectWidth = _initXPos - e.GetPosition(drawingArea).X;
rectXPos = e.GetPosition(drawingArea).X;
}
if (e.GetPosition(drawingArea).Y >= _initYPos)
{
rectHeight = e.GetPosition(drawingArea).Y - _initYPos;
rectYPos = _initYPos;
}
else
{
rectHeight = _initYPos - e.GetPosition(drawingArea).Y;
rectYPos = e.GetPosition(drawingArea).Y;
}
_selectionBox.Width = Math.Abs(rectWidth - 20);
_selectionBox.Height = Math.Abs(rectHeight - 20);
Canvas.SetLeft(_selectionBox, Math.Abs(rectXPos - 20));
Canvas.SetTop(_selectionBox, Math.Abs(rectYPos - 20));
}
when the mouseLeftButtonUp is triggered, the following Handler should work,
private void StopDrawingAndSelect(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_isDrawing = false;
drawingArea.Children.Remove(_selectionBox);
}
but unfortunately it never triggers, I put a break point and try to debug it but it never reaches,, I'm not sure Why, this is the XAML for the SelectionBox class
<UserControl
...
<Grid x:Name="LayoutRoot">
<Rectangle Fill="#00F4F4F5" Stroke="Black" StrokeDashArray="1 2"/>
</Grid>
</UserControl>
And this is the XAML of the MainPage
<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:SelectionBoxTraining"
x:Class="SelectionBoxTraining.MainPage"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Margin="165,0,0,0" x:Name="drawingArea" MouseLeftButtonDown="BeginDrawing" Background="#FF959FD6" MouseMove="UpdateSelectionBox" MouseLeftButtonUp="StopDrawingAndSelect" />
</Grid>
</UserControl>
Please can anybody help me? I tried a lot of things to do but that didn't work
I hope I find help here,
NOTE: The properties are not included in the XAML code upthere to save space,
Thank You.
I would guess that the reason is that your rectangle is getting the UP event and (somehow?) not bubbling it up to the canvas. So try to set ishitestvisible to false:
private void BeginDrawing(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_initXPos = e.GetPosition(drawingArea).X;
_initYPos = e.GetPosition(drawingArea).Y;
_selectionBox = new SelectionBox ();
_selectionBox.IsHitTestVisible = false;
drawingArea.Children.Add(_selectionBox);
_isDrawing = true;
}
`
It's now working, even though I'm not convinced of the answer,
but I changed the OnMouseUp Function by double-click on Blend's events place for MouseUp, and it became
private void drawingArea_MouseLeftButtonUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
{
_isDrawing = false;
drawingArea.Children.Remove(_selectionBox);
}
does anyone has an explanation for what caused the problem? does the name of the handler has that effect? I Wonder..

Resources