CODEWITHSUNDEEP
c#wpf
user441521
user441521

Reputation: 6998

WPF moving border around on screen

I'm making a game inventory system where I have a grid and borders that take up a grid space have a background image of the icon. For example in grid position 0,0 I have a border with a background of a health potion. I want to be able to drag this border to any other grid location. Right now I'm working on just clicking and dragging the border to follow the mouse.

What I have so far sort of works but not really. If sort of freaks out when I left click on the icon and move slowly. However I can move out of the icon fast and it doesn't keep up so it then stops moving until I'm back over it. Any ideas on how to get this kind of functionality?

public partial class MainWindow : Window
    {
        TranslateTransform trans = new TranslateTransform();
        Border border;

        public MainWindow()
        {
            InitializeComponent();

            // create a broder and set it's background image
            border = new Border();

            border.Visibility = System.Windows.Visibility.Visible;
            var img = (Image)MasterGrid.FindResource("notepad");
            var imgBrush = new ImageBrush(img.Source);
            border.Background = imgBrush;
            border.Margin = new Thickness(2.0);

            // add the border to the grid
            Grid.SetRow(border, 0);
            Grid.SetColumn(border, 1);
            Grid.SetRowSpan(border, 2);
            Grid.SetColumnSpan(border, 1);
            InvGrid.Children.Add(border);

            // hook up events
            _00.MouseUp += new System.Windows.Input.MouseButtonEventHandler(_00_MouseUp);
            border.MouseDown += border_MouseDown;
            border.MouseMove += border_MouseMove;
        }

        void border_MouseMove(object sender, MouseEventArgs e)
        {
            // make the border follow the mouse position
            trans.X = e.GetPosition(border).X;
            trans.Y = e.GetPosition(border).Y;
        }

        void border_MouseDown(object sender, MouseButtonEventArgs e)
        {
            border.RenderTransform = trans;
        }

        private void _00_MouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e)
        {
            MessageBox.Show("test");
        }
    }

Upvotes: 1

Views: 2325

Answers (1)

Wojciech Kulik
Wojciech Kulik

Reputation: 8510

It's not that easy, so I will give you some steps:

  1. You should know sizes of cells, then you are able to calculate position of each one.

  2. Prepare a container (a Grid for example), which will be only for moving purpose.

  3. When you start dragging put the item in the container (2.), set its position under your cursor and hide the cell's content.

  4. When you drop the item, calculate over which cell you are (maybe there is even a function to get a control under the cursor) and do the rest of logic.

I'm not sure if dragging is possible in case of regular controls, maybe you will have to replace your Grid with Canvas.

Try something like this:

<Grid>
    <Border x:Name="DragContainer" Width="40" Height="40" />

    <!-- OTHER STUFF - YOUR GRID WITH ITEMS -->
</Grid>

and modify only Border's Margin.

Another way to do it is to do dragging inside Canvas, then you will be able to set Canvas.Left, Canvas.Top - it should work properly.

<Canvas>
    <Border x:Name="DragContainer" Width="40" Height="40" />

    <!-- OTHER STUFF - YOUR GRID WITH ITEMS -->
</Canvas>

Upvotes: 0

Related Questions