none
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

    Tuesday, November 18, 2008 7:09 AM

Answers

  •              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.

    Tuesday, November 18, 2008 10:32 AM
  • 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);

    Tuesday, November 18, 2008 10:38 AM
  • 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;


     

    Tuesday, November 18, 2008 10:55 AM

All replies

  •  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);
    }

     

     

    Tuesday, November 18, 2008 10:04 AM
  •  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

    Tuesday, November 18, 2008 10:19 AM
  • 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.

     

     

    Tuesday, November 18, 2008 10:27 AM
  • Grid.Column is not there

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

     

     

    Tuesday, November 18, 2008 10:31 AM
  •              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.

    Tuesday, November 18, 2008 10:32 AM
  • 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);

    Tuesday, November 18, 2008 10:38 AM
  •  Perfect sladapter it works great Smile

    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

    Tuesday, November 18, 2008 10:47 AM
  •  Smile thanks tanmoy its working good, is there any way to replace it to left panel rather than deleting it

    Tuesday, November 18, 2008 10:51 AM
  • 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;


     

    Tuesday, November 18, 2008 10:55 AM
  •  one last question sladapter Smile

    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

     

    Tuesday, November 18, 2008 11:17 AM
  • 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.

     

    Tuesday, November 18, 2008 11:46 AM
  •  I find it tough to align the images properly without stackpanel is there any way around so i can keep the alignment properly

    Tuesday, November 18, 2008 12:49 PM
  • 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

    }

    Tuesday, November 18, 2008 1:25 PM
  • 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

     

     

    Tuesday, November 25, 2008 6:15 AM
  • 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

    Monday, February 08, 2010 4:26 AM
  • 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. 

    Monday, February 08, 2010 9:24 AM
  • hi ,

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

     

    Thursday, July 22, 2010 4:56 AM
  • hi ,

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

    Which post are you talking about?


    Thursday, July 22, 2010 4:27 PM
  • Hi

    Kindly see this link for screen shot of my issue .

     

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

    Friday, July 23, 2010 8:35 AM