moving any control in wpf - wpf

I am trying to move control in wpf using Canvas
This is the XAML
<Canvas Grid.Column="1" Grid.Row="0" x:Name="DropCanvas" AllowDrop="True" DragOver="DropCanvas_DragOver"
Drop="Canvas_Drop" DragEnter="Canvas_DragEnter" Background="#12000000" >
<TextBox Canvas.Left="162" Canvas.Top="188" Height="23" Name="textBox1" Width="120"
PreviewMouseMove="textBox1_PreviewMouseMove"
PreviewMouseLeftButtonDown="textBox1_PreviewMouseLeftButtonDown"
PreviewMouseUp="textBox1_PreviewMouseUp" />
</Canvas>
and this is the Code
Point p = new Point();
private void textBox1_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Control control = sender as Control;
control.CaptureMouse();
p = e.GetPosition(control);
}
private void textBox1_PreviewMouseMove(object sender, MouseEventArgs e)
{
Control control = sender as Control;
Point x = e.GetPosition(control);
if (e.LeftButton == MouseButtonState.Pressed)
{
Canvas.SetLeft(control, Canvas.GetLeft(control) + (x.X - p.X));
Canvas.SetTop(control, Canvas.GetTop(control) + (x.Y - p.Y));
}
p = x;
}
private void textBox1_PreviewMouseUp(object sender, MouseButtonEventArgs e)
{
Control control = sender as Control;
control.ReleaseMouseCapture();
activated = false;
}
The code is working, but when it moves, the control shakes.
What is the proplem

When you call GetPosition you should use DropCanvas as the parameter instead of the control. You're seeing vibrations because the TextBox keeps moving and you need something fixed.
Alternatively, you can use the MouseDragElementBehavior available in Expression Blend SDK to move objects in a container.
Also, this project can be useful to you: http://www.codeproject.com/Articles/24681/WPF-Diagram-Designer-Part-4

public void dragme(object sender, MouseButtonEventArgs e)
{
if (_Move.IsChecked == true)
db.Attach((DependencyObject)sender);
}
//// MouseDragElementBehavior db;
private void canvass_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
if (_Move.IsChecked == true && filmgrid.Visibility == Visibility.Visible)// == true)
{
filmgrid.PreviewMouseDown += new MouseButtonEventHandler(dragme);
}

Related

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.

WPF Scatterview items - how to clear all the items by clicking a button?

I created a button and wrote its behaviour to clear the scatter view, but it didnt work:
private void Button1_Click(object sender, RoutedEventArgs e)
{
DependencyObject parent = VisualTreeHelper.GetParent(this);
ScatterViewItem svi = null;
while (parent as ScatterView == null)
{
if (parent is ScatterViewItem)
svi = parent as ScatterViewItem;
parent = VisualTreeHelper.GetParent(parent);
}
((ScatterView)parent).Items.Remove(svi);
}
Before this, I thought to reset the application by this code which didnt work either: (I added using System.Diagnostics; )
private void Button1_Click(object sender, RoutedEventArgs e)
{
Process.Start(Application.ResourceAssembly.Location);
Application.Current.Shutdown();
}
the xaml:
<s:SurfaceButton Content="Clear" Name="Button1" Click="Button1_Click" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>
can you tell me what i miss,
thanks
You can simply give the ScatterView a name
<s:ScatterView x:Name="scatterView" ... />
and then access it from code behind:
private void Button1_Click(object sender, RoutedEventArgs e)
{
scatterView.Items.Clear();
}

Set events for new UIelements on runtime

I'm kinda confused with some problem, I'm doing a project where the user should be able to design questions with radio buttons, combo box, etc (kinda like toolbox from VS10 to design your XAML).
So far I can drag and drop an UIElement that I previously created, problem comes when the user creates a new element from my toolbox, I can't find the way to make that new UIElement to get the same events from my previosly created UIElement. Take a look at the code
<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>
<Canvas Height="190" HorizontalAlignment="Left" Margin="158,41,0,0" Name="canvas1" VerticalAlignment="Top" Width="322" AllowDrop="True">
<Button Content="PROBANDO" Height="23" Name="button" Width="75" Canvas.Left="113" Canvas.Top="43" PreviewMouseDown="button_PreviewMouseDown" PreviewMouseMove="button_PreviewMouseMove" MouseUp="button_MouseUp" IsEnabled="True" />
<TextBlock Canvas.Left="99" Canvas.Top="147" Height="23" Name="textBlock" Text="" Width="107" />
</Canvas>
<ListBox Height="190" Name="listBox" Width="126" Margin="12,41,365,80" >
<ListBoxItem Content="Radio Button" Selected="radio_Selected" Name="radio" />
<ListBoxItem Content="Text" Selected="text_Selected" Name="text" />
<ListBoxItem Content="Combo Box" Name="combo" Selected="combo_Selected" />
</ListBox>
</Grid>
</Window>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
Point p;
private void button_MouseUp(object sender, MouseButtonEventArgs e)
{
button.ReleaseMouseCapture();
}
private void button_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
button.CaptureMouse();
p = e.GetPosition(canvas1);
}
private void button_PreviewMouseMove(object sender, MouseEventArgs e)
{
Point x = e.GetPosition(canvas1);
if (e.LeftButton == MouseButtonState.Pressed)
{
Canvas.SetLeft(button, Canvas.GetLeft(button) + (x.X - p.X));
Canvas.SetTop(button, Canvas.GetTop(button) + (x.Y - p.Y));
}
p = x;
}
private void generic_PreviewMouseDown(UIElement sender, MouseEventArgs e)
{
Point x = e.GetPosition(canvas1);
if (e.LeftButton == MouseButtonState.Pressed)
{
Canvas.SetLeft(sender, Canvas.GetLeft(sender) + (x.X - p.X));
Canvas.SetTop(sender, Canvas.GetTop(sender) + (x.Y - p.Y));
}
p = x;
}
private void radio_Selected(object sender, RoutedEventArgs e)
{
RadioButton newRadio = new RadioButton();
canvas1.Children.Add(newRadio);
newRadio.PreviewMouseDown += generic_PreviewMouseDown(newRadio,?????);
textBlock.Text = listBox.SelectedIndex.ToString();
}
private void text_Selected(object sender, RoutedEventArgs e)
{
TextBox newText = new TextBox();
canvas1.Children.Add(newText);
textBlock.Text = (String)listBox.SelectedIndex.ToString();
}
private void combo_Selected(object sender, RoutedEventArgs e)
{
Console.Write("Combo");
textBlock.Text = (String)listBox.SelectedIndex.ToString();
}
}
Thanks!
If all you want to do is handle the mouse down on the new RadioButton, change this line:
newRadio.PreviewMouseDown += generic_PreviewMouseDown(newRadio,?????);
To this:
newRadio.PreviewMouseDown += generic_PreviewMouseDown;
Edit
And then you need to change the generic_PreviewMouseDown to the following:
private void generic_PreviewMouseDown(object sender, MouseEventArgs e)
{
UIElement elem = sender as UIElement;
Point x = e.GetPosition(canvas1);
if (e.LeftButton == MouseButtonState.Pressed)
{
Canvas.SetLeft(elem, Canvas.GetLeft(elem) + (x.X - p.X));
Canvas.SetTop(elem, Canvas.GetTop(elem) + (x.Y - p.Y));
}
p = x;
}

Can't get simple WPF drag and drop to work

For a simple test I want to drag a Button to a TextBox. I can start dragging the Button, but the Drop event is not raised. What am I missing?
Xaml:
<Window x:Class="DayPlanner.View.DnDTest"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DnDTest" Height="200" Width="200">
<StackPanel>
<Button Name="button"
Content="OK"
PreviewMouseLeftButtonDown="button_PreviewMouseLeftButtonDown"
PreviewMouseMove="button_PreviewMouseMove"/>
<TextBox Name="textBox"
AllowDrop="True"
DragEnter="textBox_DragEnter"
Drop="textBox_Drop"/>
</StackPanel>
</Window>
Code:
public partial class DnDTest : Window
{
public DnDTest()
{
InitializeComponent();
}
private Point dragStartPoint;
private void button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
dragStartPoint = e.GetPosition(null);
}
private static bool IsDragging(Point dragStartPoint, MouseEventArgs e)
{
var diff = e.GetPosition(null) - dragStartPoint;
return
e.LeftButton == MouseButtonState.Pressed &&
(Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance);
}
private void button_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (IsDragging(dragStartPoint, e))
{
DragDrop.DoDragDrop(button, new DataObject("Button", button), DragDropEffects.Move);
e.Handled = true;
}
}
private void textBox_DragEnter(object sender, DragEventArgs e)
{
e.Handled = true;
}
private void textBox_Drop(object sender, DragEventArgs e)
{
var button = (Button)e.Data.GetData("Button");
textBox.Text = string.Format("[0]", button.Content.ToString());
e.Handled = true;
}
}
This might be some strange case, but to fix it, I needed to handle or dragging events, including the Preview versions.
Here's how to make it work.
Xaml:
<Window x:Class="DayPlanner.View.DnDTestBasic"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="DnDTestBasic" Height="200" Width="200">
<StackPanel>
<Button Name="button"
Content="OK"
PreviewMouseLeftButtonDown="button_PreviewMouseLeftButtonDown"
PreviewMouseMove="button_PreviewMouseMove"/>
<TextBox Name="textBox"
AllowDrop="True"
PreviewDragEnter="textBox_Dragging"
DragEnter="textBox_Dragging"
PreviewDragOver="textBox_Dragging"
DragOver="textBox_Dragging"
Drop="textBox_Drop"/>
<TextBlock Name="status"
Text="No dragging"/>
</StackPanel>
</Window>
Code:
public partial class DnDTestBasic : Window
{
public DnDTestBasic()
{
InitializeComponent();
}
private Point dragStartPoint;
private void button_PreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
dragStartPoint = e.GetPosition(null);
status.Text = "New drag start position";
}
private static bool IsDragging(Point dragStartPoint, MouseEventArgs e)
{
var diff = e.GetPosition(null) - dragStartPoint;
return
e.LeftButton == MouseButtonState.Pressed &&
(Math.Abs(diff.X) > SystemParameters.MinimumHorizontalDragDistance ||
Math.Abs(diff.Y) > SystemParameters.MinimumVerticalDragDistance);
}
private void button_PreviewMouseMove(object sender, MouseEventArgs e)
{
if (IsDragging(dragStartPoint, e))
{
status.Text = "Starting drag...";
DragDrop.DoDragDrop(button, new DataObject("Button", button), DragDropEffects.Copy);
status.Text = "Dragging done.";
e.Handled = true;
}
}
private void textBox_Dragging(object sender, DragEventArgs e)
{
if (e.Data.GetDataPresent("Button"))
e.Effects = DragDropEffects.Copy;
else
e.Effects = DragDropEffects.None;
e.Handled = true;
}
private void textBox_Drop(object sender, DragEventArgs e)
{
var button = (Button)e.Data.GetData("Button");
textBox.Text = string.Format("[{0}]", button.Content.ToString());
e.Handled = true;
}
}
I believe it has to do with the fact that when you start the drag event, the button control is capturing mouse input. Any mouse movements you do after that are registered to the button instead of to the application
I actually had a similar problem and ended up using MouseEnter/Leave events instead of the built in WPF drag/drop framework.

Interpret enter as tab WPF

I want to interpret Enter key as Tab key in whole my WPF application, that is, everywhere in my application when user press Enter I want to focus the next focusable control,except when button is focused. Is there any way to do that in application life circle? Can anyone give me an example?
Thanks a lot!
You can use my EnterKeyTraversal attached property code if you like. Add it to the top-level container on a WPF window and everything inside will treat enter as tab:
<StackPanel my:EnterKeyTraversal.IsEnabled="True">
...
</StackPanel>
Based on Richard Aguirre's answer, which is better than the selected answer for ease of use, imho, you can make this more generic by simply changing the Grid to a UIElement.
To change it in whole project you need to do this
In App.xaml.cs:
protected override void OnStartup(StartupEventArgs e)
{
EventManager.RegisterClassHandler(typeof(UIElement), UIElement.PreviewKeyDownEvent, new KeyEventHandler(Grid_PreviewKeyDown));
base.OnStartup(e);
}
private void Grid_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
var uie = e.OriginalSource as UIElement;
if (e.Key == Key.Enter)
{
e.Handled = true;
uie.MoveFocus(
new TraversalRequest(
FocusNavigationDirection.Next));
}
}
Compile.
And done it. Now you can use enter like tab.
Note: This work for elements in the grid
I got around woodyiii's issue by adding a FrameworkElement.Tag (whose value is IgnoreEnterKeyTraversal) to certain elements (buttons, comboboxes, or anything I want to ignore the enter key traversal) in my XAML. I then looked for this tag & value in the attached property. Like so:
if (e.Key == Key.Enter)
{
if (ue.Tag != null && ue.Tag.ToString() == "IgnoreEnterKeyTraversal")
{
//ignore
}
else
{
e.Handled = true;
ue.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
}
}
woodyiii, There is a function in the UIElement called PredictFocus() which by its name know its function, then you can check if that element is enabled or not so as to move the focus to it or not...
Here is Matt Hamilton's code, if anyone is wondering since his site is down apparently:
public class EnterKeyTraversal
{
public static bool GetIsEnabled(DependencyObject obj)
{
return (bool)obj.GetValue(IsEnabledProperty);
}
public static void SetIsEnabled(DependencyObject obj, bool value)
{
obj.SetValue(IsEnabledProperty, value);
}
static void ue_PreviewKeyDown(object sender, System.Windows.Input.KeyEventArgs e)
{
var ue = e.OriginalSource as FrameworkElement;
if (e.Key == Key.Enter)
{
e.Handled = true;
ue.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
}
}
private static void ue_Unloaded(object sender, RoutedEventArgs e)
{
var ue = sender as FrameworkElement;
if (ue == null) return;
ue.Unloaded -= ue_Unloaded;
ue.PreviewKeyDown -= ue_PreviewKeyDown;
}
public static readonly DependencyProperty IsEnabledProperty =
DependencyProperty.RegisterAttached("IsEnabled", typeof(bool),
typeof(EnterKeyTraversal), new UIPropertyMetadata(false, IsEnabledChanged));
static void IsEnabledChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var ue = d as FrameworkElement;
if (ue == null) return;
if ((bool)e.NewValue)
{
ue.Unloaded += ue_Unloaded;
ue.PreviewKeyDown += ue_PreviewKeyDown;
}
else
{
ue.PreviewKeyDown -= ue_PreviewKeyDown;
}
}
}
Another, a more on/off implementation approach would be to use behaviors:
public class TextBoxEnterFocusesNextBehavior :
Behavior<TextBox>
{
protected override void OnAttached()
{
base.OnAttached();
AssociatedObject.PreviewKeyDown += AssociatedObjectOnPreviewKeyDown;
}
protected override void OnDetaching()
{
AssociatedObject.PreviewKeyDown -= AssociatedObjectOnPreviewKeyDown;
base.OnDetaching();
}
private void AssociatedObjectOnPreviewKeyDown(object sender, KeyEventArgs args)
{
if (args.Key != Key.Enter) { return; }
args.Handled = true;
AssociatedObject.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
}
}
Usage example:
<UserControl xmlns:b="http://schemas.microsoft.com/xaml/behaviors"
xmlns:behaviors="clr-namespace:Your.Namespace.To.Behaviors"
...>
<DockPanel>
<TextBox x:Name="TextBoxWithBehavior"
DockPanel.Dock="Top">
<b:Interaction.Behaviors>
<behaviors:TextBoxEnterFocusesNextBehavior />
</b:Interaction.Behaviors>
</TextBox>
<TextBox x:Name="TextBoxWithoutBehavior"
DockPanel.Dock="Top" />
<TextBox x:Name="AnotherTextBoxWithBehavior"
DockPanel.Dock="Top">
<b:Interaction.Behaviors>
<behaviors:TextBoxEnterFocusesNextBehavior />
</b:Interaction.Behaviors>
</TextBox>
</DockPanel>
</UserControl>
My solution:
public class MoveToNext : TriggerAction<DependencyObject>
{
protected override void Invoke(object parameter)
{
if (parameter is RoutedEventArgs routedEventArgs && routedEventArgs.OriginalSource is FrameworkElement element)
{
routedEventArgs.Handled = true;
element.MoveFocus(new TraversalRequest(FocusNavigationDirection.Next));
}
}
}
Usage:
<StackPanel>
<i:Interaction.Triggers>
<i:KeyTrigger Key="Return">
<util:MoveToNext/>
</i:KeyTrigger>
</i:Interaction.Triggers>
<!-- put your controls here -->
</StackPanel>
If you want the behavior to be attached to only one control instead of all controls within a layouter, simply add the <i:Interaction.Triggers block to that specific control.

Resources