locked
Silverlight Drag and Drop across Canvas or StackPanel RRS feed

  • Question

  • <Grid Canvas.Left="75" Canvas.Top="130" Background="Transparent" Width="595" MaxWidth="595" Canvas.ZIndex="4" > <StackPanel x:Name="MainSP" Background="Transparent" Orientation="Horizontal" HorizontalAlignment="Center"> <StackPanel x:Name="StackPanelGroup1" Tag="Group1" MinHeight="129" Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Center"> <Canvas x:Name="CanvasGroup1" Tag="Group1" HorizontalAlignment="Stretch" > <Button x:Name="ToGroup1" Tag="Group1" Cursor="Hand" Click="ToGroup1_Click" Height="20" Canvas.Left="0" Canvas.Top="20" Content="Add Here" Visibility="Collapsed" Canvas.ZIndex="4" /> <!--<this:CustomCard x:Name="myCustomCard" Canvas.Left="0" Canvas.Top="0" HorizontalAlignment="Center" DiscardCard="myCustomCard_DiscardCard" FinishCard="myCustomCard_FinishCard" MouseLeftDown="myCustomCard_MouseLeftDown" > </this:CustomCard>--> </Canvas> </StackPanel> </StackPanel>

    I am having XAML structure like thi, there will will up to 7 group for StackPanel and Canvas also. Now wehen I will get 13 card from server in different group I will dynamically add them to respective canvas group.

    Issue is MainSP is 7 group of StackPanel and Canvas now their Canvas's default ZIndex property will be assigned autometically like CanavsGroup1 has 1, and CanvasGroup2 has 2 ans so on...

    When I want to drag card from CanvasGroup3 it is draggable all over screen and CanvasGroup 1 and 2 but when I tries to drag it over CanvasGroup4 or 5 it's not working. I think it's ZIndex property issue.

    I tried somany things to give Zindex property of Card and Canvas to max zindex property but then also it's not working.

    Is there any solution that I can move card without using Canvas? or bring that Card to front(top) while dragging?



    • Edited by Bhargav K Monday, January 6, 2014 5:48 AM
    Monday, January 6, 2014 5:47 AM

Answers

  • Hi Bhargav K,

    Below is a simple sample I tested, which works well in my side, please take a look at:

    //xaml design
    <StackPanel x:Name="MainSP"  Orientation="Horizontal" HorizontalAlignment="Center">
    
            <Canvas x:Name="rootCanvas"
      Width="640"
      Height="480"
      Background="Transparent"
      >
                <!-- You can drag this rectangle cross the canvas. -->
                <Rectangle
        MouseLeftButtonDown="Handle_MouseDown"
        MouseMove="Handle_MouseMove"
        MouseLeftButtonUp="Handle_MouseUp"
        Canvas.Left="30" Canvas.Top="30" Fill="Red"
        Width="50" Height="50" Canvas.ZIndex="4" />
            </Canvas>
    
            <Canvas x:Name="CanvasGroup1" Tag="Group1" HorizontalAlignment="Stretch"  Width="200" Height="200" Background="Transparent">
                <Button x:Name="ToGroup1" Tag="Group1" Cursor="Hand"  Height="20" Content="Add Here"  Background="Orange" />
            </Canvas>
    
        </StackPanel>
    
    //code behind
    bool isMouseCaptured;
            double mouseVerticalPosition;
            double mouseHorizontalPosition;
    
            public void Handle_MouseDown(object sender, MouseEventArgs args)
            {
                Rectangle item = sender as Rectangle;
                mouseVerticalPosition = args.GetPosition(null).Y;
                mouseHorizontalPosition = args.GetPosition(null).X;
                isMouseCaptured = true;
                item.CaptureMouse();
            }
    
            public void Handle_MouseMove(object sender, MouseEventArgs args)
            {
                Rectangle item = sender as Rectangle;
                if (isMouseCaptured)
                {
    
                    // Calculate the current position of the object.
                    double deltaV = args.GetPosition(null).Y - mouseVerticalPosition;
                    double deltaH = args.GetPosition(null).X - mouseHorizontalPosition;
                    double newTop = deltaV + (double)item.GetValue(System.Windows.Controls.Canvas.TopProperty);
                    double newLeft = deltaH + (double)item.GetValue(System.Windows.Controls.Canvas.LeftProperty);
    
                    // Set new position of object.
                    item.SetValue(System.Windows.Controls.Canvas.TopProperty, newTop);
                    item.SetValue(System.Windows.Controls.Canvas.LeftProperty, newLeft);
    
                    // Update position global variables.
                    mouseVerticalPosition = args.GetPosition(null).Y;
                    mouseHorizontalPosition = args.GetPosition(null).X;
                }
            }
    
            public void Handle_MouseUp(object sender, MouseEventArgs args)
            {
                Rectangle item = sender as Rectangle;
                isMouseCaptured = false;
                item.ReleaseMouseCapture();
                mouseVerticalPosition = -1;
                mouseHorizontalPosition = -1;
            }

    Hope this helps, thanks.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    • Edited by Yanping Wang Thursday, January 9, 2014 2:16 AM
    • Marked as answer by Yanping Wang Wednesday, January 15, 2014 12:10 PM
    Thursday, January 9, 2014 2:15 AM

All replies

  • Hello,

    When I want to drag card from CanvasGroup3 it is draggable all over
    screen and CanvasGroup 1 and 2 but when I tries to drag it over
    CanvasGroup4 or 5 it's not working.
    I think it's ZIndex property issue.

    The card can not be dragable over CanvasGroup4 or 5, that's because you have put a higer zIndex value for CanvasGroup4 or 5 than CanvasGroup3, for your scenario, I think you can try to avoid using zIndex, since there exist some CanvasGroups' zIndex either larger or smaller than the moving CanvasGroup.

    How about trying to set background for canvas transparent. for example:

       <Canvas x:Name="CanvasGroup1" Tag="Group1" HorizontalAlignment="Stretch"  Width="200" Height="200" Background="Transparent">
                <Button x:Name="ToGroup1" Tag="Group1" Cursor="Hand"  Height="20" Content="Add Here"  Background="Orange" />
            </Canvas>

    Hope this helps, thanks.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, January 7, 2014 8:49 AM
  •    <Canvas x:Name="CanvasGroup1" Tag="Group1" HorizontalAlignment="Stretch"  Width="200" Height="200" Background="Transparent">
                <Button x:Name="ToGroup1" Tag="Group1" Cursor="Hand"  Height="20" Content="Add Here"  Background="Orange" />
            </Canvas>
    I have set
    Background="Transparent"
    but not working.... please give me optimal solution to recover this issue.
    Wednesday, January 8, 2014 10:31 AM
  • Hi Bhargav K,

    Below is a simple sample I tested, which works well in my side, please take a look at:

    //xaml design
    <StackPanel x:Name="MainSP"  Orientation="Horizontal" HorizontalAlignment="Center">
    
            <Canvas x:Name="rootCanvas"
      Width="640"
      Height="480"
      Background="Transparent"
      >
                <!-- You can drag this rectangle cross the canvas. -->
                <Rectangle
        MouseLeftButtonDown="Handle_MouseDown"
        MouseMove="Handle_MouseMove"
        MouseLeftButtonUp="Handle_MouseUp"
        Canvas.Left="30" Canvas.Top="30" Fill="Red"
        Width="50" Height="50" Canvas.ZIndex="4" />
            </Canvas>
    
            <Canvas x:Name="CanvasGroup1" Tag="Group1" HorizontalAlignment="Stretch"  Width="200" Height="200" Background="Transparent">
                <Button x:Name="ToGroup1" Tag="Group1" Cursor="Hand"  Height="20" Content="Add Here"  Background="Orange" />
            </Canvas>
    
        </StackPanel>
    
    //code behind
    bool isMouseCaptured;
            double mouseVerticalPosition;
            double mouseHorizontalPosition;
    
            public void Handle_MouseDown(object sender, MouseEventArgs args)
            {
                Rectangle item = sender as Rectangle;
                mouseVerticalPosition = args.GetPosition(null).Y;
                mouseHorizontalPosition = args.GetPosition(null).X;
                isMouseCaptured = true;
                item.CaptureMouse();
            }
    
            public void Handle_MouseMove(object sender, MouseEventArgs args)
            {
                Rectangle item = sender as Rectangle;
                if (isMouseCaptured)
                {
    
                    // Calculate the current position of the object.
                    double deltaV = args.GetPosition(null).Y - mouseVerticalPosition;
                    double deltaH = args.GetPosition(null).X - mouseHorizontalPosition;
                    double newTop = deltaV + (double)item.GetValue(System.Windows.Controls.Canvas.TopProperty);
                    double newLeft = deltaH + (double)item.GetValue(System.Windows.Controls.Canvas.LeftProperty);
    
                    // Set new position of object.
                    item.SetValue(System.Windows.Controls.Canvas.TopProperty, newTop);
                    item.SetValue(System.Windows.Controls.Canvas.LeftProperty, newLeft);
    
                    // Update position global variables.
                    mouseVerticalPosition = args.GetPosition(null).Y;
                    mouseHorizontalPosition = args.GetPosition(null).X;
                }
            }
    
            public void Handle_MouseUp(object sender, MouseEventArgs args)
            {
                Rectangle item = sender as Rectangle;
                isMouseCaptured = false;
                item.ReleaseMouseCapture();
                mouseVerticalPosition = -1;
                mouseHorizontalPosition = -1;
            }

    Hope this helps, thanks.


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.


    • Edited by Yanping Wang Thursday, January 9, 2014 2:16 AM
    • Marked as answer by Yanping Wang Wednesday, January 15, 2014 12:10 PM
    Thursday, January 9, 2014 2:15 AM