User avatar
digimbyte
Topic Author
Posts: 47
Joined: 14 Nov 2017, 21:42

Move panels on mouse down over element

25 Jun 2019, 17:08

I have made some successful strides in my script, and things are coming along nicely.
https://video.twimg.com/ext_tw_video/11 ... bHvI0z.mp4

but I have realised that I need to impliment some sort of drag-drop features, but not as per the documentation.
the documentation seems to be for inventory managment, not changing the margin's of an element.

I am currently using a Grid for the header of my panels, but i am not sure how I would add a 'mouseDown' event exclusivly in the header and adjust the position.
any help is greatly appreciated.
        Noesis.Grid Header = new Noesis.Grid
        {
            HorizontalAlignment = HorizontalAlignment.Stretch,
            VerticalAlignment = VerticalAlignment.Top,
            Height = 20,
            Background = Brushes.SlateGray
        };
        Header.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Parse("*") });
        Header.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
        Header.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });

        Header.Children.Add(new TextBlock { Text = element.Name, VerticalAlignment = VerticalAlignment.Center, Margin = new Thickness(6, 0, 6, 0) });
        Header.Children.Add(new Button { Content = "_", Width = 18, Height = 16, Margin = new Thickness(2), Padding = new Thickness(0) });
        Header.Children.Add(new Button { Content = "X", Width = 18, Height = 16, Margin = new Thickness(2), Padding = new Thickness(0) });
        for (int i = 1; i < Header.Children.Count; i++) { Noesis.Grid.SetColumn((ContentControl)Header.Children[i], i); }
        
        ((Button)Header.Children[2]).Click += (object sender, RoutedEventArgs args) =>
        {
            uiRoot.Children.Remove(Window);
            ActiveWindows.Remove(WindowId);
        };

Tags:
 
User avatar
digimbyte
Topic Author
Posts: 47
Joined: 14 Nov 2017, 21:42

Re: Move panels on mouse down over element

26 Jun 2019, 04:43

Ah nvm,
Header.MouseDown += (object sender, MouseButtonEventArgs args) => { };
I originally had trouble because my IDE reported that MouseDown should be on the right side of += and no matter what form i did to apply a mouse Event, it wasn't compiling.
and when looking at the documentation on Mouse events was only a few xaml examples.

regardless, it's just working today for what ever reason.

UPDATE:
Looks like I'm having some persistance issues with events,
I added a mouse down and mouse up events to control when it should track Movement,
but it only seems to track it when the mouse is over the element
        Header.MouseDown += (object sender, MouseButtonEventArgs args) =>
        {
            Header.MouseMove += MovePanel;
        };
        Header.MouseUp -= (object sender, MouseButtonEventArgs args) =>
        {
            Header.MouseMove -= MovePanel;
        };
        
    private void MovePanel(object sender, MouseButtonEventArgs args) // BaseComponent sender
    {
        // get parent
        FrameworkElement Parent = ((Noesis.FrameworkElement)sender).Parent;
        // get new position
        Point offset = args.GetPosition(Parent);
        UnityEngine.Vector3 mousePos = Input.mousePosition;
        Point Position = uiRoot.PointFromScreen(new Point(mousePos.x, Screen.height - mousePos.y));
        // set new position
        Parent.Margin = new Thickness(Position.X - offset.X, Position.Y - offset.Y, 0, 0);
    }
i tried adding the event to the root but it doesn't update unless the mouse is over a UI element (and I know the position point isn't accurate yet)
 
User avatar
sfernandez
Site Admin
Posts: 1648
Joined: 22 Dec 2011, 19:20

Re: Move panels on mouse down over element

26 Jun 2019, 10:27

Hi,

In order to receive all mouse movement while mouse button is down you should capture the mouse:
Header.MouseLeftButtonDown += (s, e) =>
{
  Header.CaptureMouse();
  Header.MouseMove += MovePanel;
}

Header.MouseLeftButtonUp += (s, e) =>
{
  Header.MouseMove -= MovePanel;
  Header.ReleaseMouseCapture();
}
Hope this helps.
 
User avatar
digimbyte
Topic Author
Posts: 47
Joined: 14 Nov 2017, 21:42

Re: Move panels on mouse down over element

26 Jun 2019, 16:04

how would I find the values from the args?
I read on the forums this contains vector movement information regarding the MouseMove
alternatively, I would have to feed in a vector2 on MouseDown but when removing events from elements,
are anon/lamba functions comparible?

There doesn't appear to be much regards to documentation of properties and methods
what would be the best location to read up on these particular events?

Current progress:
https://i.gyazo.com/d864f47d7f3f7ad09c3 ... 138c5f.mp4
Despite using the CaptureMouse() as your example, the window isn't changing position unless the mouse is in contact with the object
I'm fairly confident I maybe approaching this all wrong
 
User avatar
sfernandez
Site Admin
Posts: 1648
Joined: 22 Dec 2011, 19:20

Re: Move panels on mouse down over element

28 Jun 2019, 13:20

how would I find the values from the args?
MouseMove event args (of MouseEventArgs type) provide a GetPosition() method you can use to determine where the mouse is relative to any element in the UI.
I read on the forums this contains vector movement information regarding the MouseMove
alternatively, I would have to feed in a vector2 on MouseDown but when removing events from elements,
are anon/lamba functions comparible?
You can store the lambda in a variable, that way you can remove it the handler later (see example below).
There doesn't appear to be much regards to documentation of properties and methods
what would be the best location to read up on these particular events?
First you can look at our documentation and tutorials, but you can also search in google for xaml related questions, as Noesis implements a great subset of WPF, anything you find in StackOverflow would help you.
Current progress:
https://i.gyazo.com/d864f47d7f3f7ad09c3 ... 138c5f.mp4
Despite using the CaptureMouse() as your example, the window isn't changing position unless the mouse is in contact with the object
I'm fairly confident I maybe approaching this all wrong
From what I see in the video mouse doesn't seem to be captured, because when you move it over the 'Account' menu, that is still opened, the menu options are highlighted.
I just made the following test in Unity that I think reproduces what you want to achieve:
<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Rectangle x:Name="rect" Width="200" Height="100" Fill="Red">
        <Rectangle.RenderTransform>
            <TranslateTransform />
        </Rectangle.RenderTransform>
    </Rectangle>
</Grid>
using Noesis;

public class TestBehavior : UnityEngine.MonoBehaviour
{
    private void Start()
    {
        NoesisView view = GetComponent<NoesisView>();

        Rectangle rect = (Rectangle)view.Content.FindName("rect");

        Point pos = new Point();
        MouseEventHandler lambda = (s, e) =>
        {
            Vector delta = e.GetPosition(rect) - pos;
            TranslateTransform t = (TranslateTransform)rect.RenderTransform;
            t.X += delta.X;
            t.Y += delta.Y;
            
            e.Handled = true;
        };

        rect.MouseLeftButtonDown += (s, e) =>
        {
            pos = e.GetPosition(rect);

            rect.CaptureMouse();
            rect.MouseMove += lambda;
            
            e.Handled = true;
        };

        rect.MouseLeftButtonUp += (s, e) =>
        {
            rect.MouseMove -= lambda;
            rect.ReleaseMouseCapture();
            
            e.Handled = true;
        };
    }
}

Who is online

Users browsing this forum: Bing [Bot] and 3 guests