Drag & Drop Between Stack Panel & Grid

Question

 Hi all

i have a stack panel with 20 images on the left side and a grid with 3 rows on the right side. right now am able to drag and drop the images from left to right. i am stuck in 2 things.

1) when the user drops an image to grid on right side only one image per move should be allowed , if the right side grid is having an image they must not be allowed to drop another above it.

2) when the user drags from left and drops to right side grid the orginal image is getting moved

when i use the following code the complete picture of right grid is getting cleared

 

private void AddElementToGrid(FrameworkElement element, Grid grid, Point point)
        {
           
            int column = 0;
            int row = 0;

            double y = 0;
            double x = 0;

            while (column < grid.ColumnDefinitions.Count)
            {
                x += grid.ColumnDefinitions[column].ActualWidth;
                if (x > point.X)
                {
                    break;
                }
                column++;
            }
            while (row < grid.RowDefinitions.Count)
            {
                y += grid.RowDefinitions[row].ActualHeight;
                if (y > point.Y)
                {
                    break;
                }
                row++;
            }
            foreach (UIElement child in grid.Children.ToList())
            {
                grid.Children.Remove(child);
            }
            grid.Children.Add(element);
            Grid.SetColumn(element, column);
            Grid.SetRow(element, row);
        } 

  

 

Regards

Pingo

Answer 1

 You removed each child from the grid in this line, is this what you really want?

  foreach (UIElement child in grid.Children.ToList())
            {
                grid.Children.Remove(child);
            }

 

Answer 2

 no , it removes complete child, if an image exists in the grid cell and user trys to place another image first image should be deleted

Answer 3

I do not see any condition in your code. All I see is that you removed all the images from the grid, then added the new one in. That's what your code is doing.

If you only want to replace the image with the new image on the Grid cell where you dropped your new image, you should only remove that particular image on that cell (with the Grid.Column == col, Grid.Row== row), not all the images in the grid.

 

 

Answer 4

Grid.Column is not there

 can you please drop a bit of code so i can google it down

 

 

Answer 5

             bool isExists = false;
            foreach(FrameworkElement children in grid.Children)
            {
               int r = Grid.GetRow(children);
               int c = Grid.GetColumn(children);
               if (r == row && c == column)
               {
                   // There is an Object in that row and cell
                   isExists = true;

                    break;  
               }
 
            }

            if (!isExists)
            {
              // Add your Element
                grid.Children.Add(element);
                Grid.SetColumn(element, column);
                Grid.SetRow(element, row);

            }

 

Check if it works. Its not an Ideal solution but it might work.

Answer 6

foreach (UIElement child in grid.Children.ToList())
            {
                grid.Children.Remove(child);
            }

 UIElement u = grid.Children.SingleOrDefault(l =>((int)l.GetValue(Grid.ColumnProperty) == column && (int)l.GetValue(Grid.RowProperty) == row));

 if(u!=null)

     grid.Children.Remove(u);

 grid.Children.Add(element);

Answer 7

 Perfect sladapter it works great

one quickie when the user drops an image over another one rather than deleting it is it possible to put it back to left side orginal location

Answer 8

  thanks tanmoy its working good, is there any way to replace it to left panel rather than deleting it

Answer 9

Yes. 

You can make your function return a boolean. So you can check if it returns true (image added to the grid),  you do nothing after this call. If it returns false (there is a image already at the drop point),  add the image back to the StackPanel. Make sure you remember the index of the image before you remove it from your StackPanel so you can insert it back to the same place if that's what you want.

bool yourfunction( ...)

{

 UIElement u = grid.Children.SingleOrDefault(l =>((int)l.GetValue(Grid.ColumnProperty) == column && (int)l.GetValue(Grid.RowProperty) == row));

 if(u!=null)

     return false;

  grid.Children.Add(element);

  ...

  return true;

} 

 

Answer 10

 one last question sladapter

when the user drags image from left stackpanel its place will be occupied with the image below how can i keep that image place blank

 

Answer 11

Because you are using a StackPanel, once you remove a control from StackPanel, the children in below will be moved up. You can temporarily put a Border control in that place.

Or you can even surround every the image in the StackPanel with a border to make them look even nicer. When you drag the image out, leave the border there to act like a place holder for you. Remove it after you finally inserted image to the grid. Otherwise, add the image back to the Border.

 

Answer 12

 I find it tough to align the images properly without stackpanel is there any way around so i can keep the alignment properly

Answer 13

Without knowing how you want to align the images (are they the same size images?) there is no way to tell how you should do it. 

By the way, what do you mean without StackPanel? I thought you used StackPanel on the left. When I say to put a border around image I meant this:

<StackPane>

<Border x:Name="holder1" Loaded="Border_Loaded" >

      <Image .../>

</Border >

<Border x:Name="holder2" Loaded="Border_Loaded">

        <Image .../>

</Border>

...

 

</StackPane>

void Border_Loaded (...)

{

        Border b = sender as Border;

        b.Height = b.ActualHeight;  // Fix the height so when you remove the image from the border, it does not shrink

}

Answer 14

Yes. 

You can make your function return a boolean. So you can check if it returns true (image added to the grid),  you do nothing after this call. If it returns false (there is a image already at the drop point),  add the image back to the StackPanel. Make sure you remember the index of the image before you remove it from your StackPanel so you can insert it back to the same place if that's what you want.

 

 

Hi sladpter

I am in a similar situation i use grid instead of stackpanel, i have got first grid colum and row from where it has been taken. since both are grids how can i replace the first image back because if i use

UIElement u = grid.Children.SingleOrDefault(l =>((int)l.GetValue(Grid.ColumnProperty) == column && (int)l.GetValue(Grid.RowProperty) == row));

 if(u!=null)  grid.Children.Add(element);

it will remove from second grid, since both are grids how can i make it possible that first image goes back to parent grid please refer my post http://silverlight.net/forums/t/52657.aspx

 

 

Answer 15

hi!!

i'm in problem the programmation c# (silverliught)with the xml here the code source a xml: My problem is the drag&drop in the StackPanel

<QUESTION LIBELLE="5175657374696F6E2050757A7A6C65" ID="4F623133" REF="11744" TITRE="513132" IMAGE_FOND="" TYPE="11" VISIBLE="1" MODIFIABLE="1" IMAGEPUZZLE="Clients\1\1\436b0317382f7-44-2.jpg">
      <AREA_PUZZLE ID="1" VISIBLE="0" PosX="165" PosY="282" Largeur="267" Hauteur="373" />
      <AREA_PUZZLE ID="2" VISIBLE="0" PosX="97" PosY="45" Largeur="351" Hauteur="93" />
      <AREA_PUZZLE ID="3" VISIBLE="0" PosX="-2" PosY="98" Largeur="167" Hauteur="218" />
      <AREA_PUZZLE ID="4" VISIBLE="1" PosX="187" PosY="212" Largeur="70" Hauteur="83" />
     
      <AREA_REPONSE ID="1" MOVABLE="1" TYPE="1" VISIBLE="1" IMAGE="icones/cursor.gif" />
      <AREA_REPONSE ID="2" MOVABLE="1" TYPE="2" LIBELLE="3C703E6F6B3C2F703E" />
      <AREA_REPONSE ID="5" MOVABLE="1" TYPE="5" LIBELLE="EssaiLibelle" />
      <AREA_REPONSE ID="3" MOVABLE="1" TYPE="4" IMAGE="Visionneuse\camera.png" PosX="187" PosY="212" Largeur="70" Hauteur="83" />
      <AREA_REPONSE ID="4" MOVABLE="1" TYPE="3" VISIBLE="1" IMAGE="\Visionneuse\iPresentation.jpg" />
    </QUESTION>

to make tha drag&drop in the area_reponse at the area-Puzzle for the alone StackPanel.

 

thank's

Answer 16

Sorry I don't understand your question nor your XML? That XML does not look like a valid Silverlight XAML. What does this XML has to do with StackPanel or Silverlight?

By the way, Silverlight 4 now has built-in drag and drop feature. 

Answer 17

hi ,

Can you post the screen shot since my problem i salso similar to you

 

Answer 18

hi ,

Can you post the screen shot since my problem i salso similar to you

Which post are you talking about?

Answer 19

Hi

Kindly see this link for screen shot of my issue .

 

http://i842.photobucket.com/albums/zz344/vinodh28/image001.png