locked
How to swap or move the items in the page?

    Question

  • Hi,

    am developing a Windows 8.1 app using C# and xaml.

    I have page in that i have 2 rows and 2 columns like below.

    What i want to do is when i press and hold(selected item) the 1st grid and i want to move it to the 4th grid, then 4th grid should be move to 1st grid and 1st grid has to move to the 4th grid.(swapping/moving).

    How can i achieve this?

    Anybody please help me



    Wednesday, October 8, 2014 4:59 AM

Answers

  • Here's a buggy, working sample. You'll have to debug it yourself, as I've already spent more time on it than I should have...
      public sealed partial class MainPage : Page
        {
            List<int> CurrentPositions = new List<int>();
            
            public MainPage()
            {
                this.InitializeComponent();
                CurrentPositions.Add(0);
                CurrentPositions.Add(1);
                CurrentPositions.Add(2);
                CurrentPositions.Add(3);
                CurrentPositions.Add(4);
            }
    
            Border ActiveBorder = new Border(), DisplacedBorder = new Border();
            Grid OriginGrid = new Grid(), DropGrid = new Grid();
            int OriginGridIndex = 1, DropGridIndex = 1;
            Boolean Dragging = false;
            PointerPoint MouseOffset;
            
    
            private void Border_PointerPressed(object sender, PointerRoutedEventArgs e)
            {
                ActiveBorder = sender as Border;
                MouseOffset = e.GetCurrentPoint(ActiveBorder);
                Dragging = true;
                Canvas.SetZIndex(Border1, 0);
                Canvas.SetZIndex(Border2, 0);
                Canvas.SetZIndex(Border3, 0);
                Canvas.SetZIndex(Border4, 0);
                Canvas.SetZIndex(ActiveBorder, 1);
    
            }
    
            private void Border_PointerMoved(object sender, PointerRoutedEventArgs e)
            {
                if (Dragging)
                {
                    double MinX = e.GetCurrentPoint(MainCanvas).Position.X - MouseOffset.Position.X;
                    double MinY = e.GetCurrentPoint(MainCanvas).Position.Y - MouseOffset.Position.Y;
                    double MaxX = e.GetCurrentPoint(MainCanvas).Position.X + (100 - MouseOffset.Position.X);
                    double MaxY = e.GetCurrentPoint(MainCanvas).Position.Y + (100 - MouseOffset.Position.Y);
                    if (MinX > 0 && MaxX < 400) Canvas.SetLeft(ActiveBorder, MinX);
                    if (MinY > 0 && MaxY < 400) Canvas.SetTop(ActiveBorder, MinY);
                }
            }
    
            private void Border_PointerReleased(object sender, PointerRoutedEventArgs e)
            {
                PointerPoint CurrentPoint = e.GetCurrentPoint(MainCanvas);
                if (CurrentPoint.Position.X < 200 && CurrentPoint.Position.Y < 200) { DropGrid = Grid1; DropGridIndex = 1; }
                else if (CurrentPoint.Position.X >= 200 && CurrentPoint.Position.Y < 200) {DropGrid = Grid2; DropGridIndex = 2; }
                else if (CurrentPoint.Position.X < 200 && CurrentPoint.Position.Y >= 200) {DropGrid = Grid3; DropGridIndex = 3; }
                else if (CurrentPoint.Position.X >= 200 && CurrentPoint.Position.Y >= 200) {DropGrid = Grid4; DropGridIndex = 4; }
    
                
                if (Dragging)
                {
                    Border DraggedBorder = sender as Border;
                    if (OriginGrid != DropGrid)
                    {
                        string DisplacedBorderName =  "Border" + CurrentPositions[DropGridIndex].ToString();
                        if (Border1.Name == DisplacedBorderName) DisplacedBorder = Border1;
                        else if (Border2.Name == DisplacedBorderName) DisplacedBorder = Border2;
                        else if (Border3.Name == DisplacedBorderName) DisplacedBorder = Border3;
                        else if (Border4.Name == DisplacedBorderName) DisplacedBorder = Border4;
    
                        Point DisplacedDropPoint = new Point();
                        if (OriginGrid.Name == "Grid1") { DisplacedDropPoint.X = 50; DisplacedDropPoint.Y = 50; }
                        else if (OriginGrid.Name == "Grid2") { DisplacedDropPoint.X = 250; DisplacedDropPoint.Y = 50; }
                        else if (OriginGrid.Name == "Grid3") { DisplacedDropPoint.X = 50; DisplacedDropPoint.Y = 250; }
                        else if (OriginGrid.Name == "Grid4") { DisplacedDropPoint.X = 250; DisplacedDropPoint.Y = 250; }
    
    
                        int Temp = CurrentPositions[OriginGridIndex];
                        CurrentPositions[OriginGridIndex] = CurrentPositions[DropGridIndex];
                        CurrentPositions[DropGridIndex] = Temp;
    
                        Canvas.SetLeft(DisplacedBorder, DisplacedDropPoint.X);
                        Canvas.SetTop(DisplacedBorder, DisplacedDropPoint.Y);
                    }
    
                    Point DraggedDropPoint = new Point();
                    if (DropGrid.Name == "Grid1") { DraggedDropPoint.X = 50; DraggedDropPoint.Y = 50; }
                    else if (DropGrid.Name == "Grid2") { DraggedDropPoint.X = 250; DraggedDropPoint.Y = 50; }
                    else if (DropGrid.Name == "Grid3") { DraggedDropPoint.X = 50; DraggedDropPoint.Y = 250; }
                    else if (DropGrid.Name == "Grid4") { DraggedDropPoint.X = 250; DraggedDropPoint.Y = 250; }
    
                    Canvas.SetLeft(DraggedBorder, DraggedDropPoint.X);
                    Canvas.SetTop(DraggedBorder, DraggedDropPoint.Y);
    
                    Dragging = false;
                }
            }
    
            private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
            {
              
                    OriginGrid = sender as Grid;
                    OriginGridIndex = int.Parse(OriginGrid.Name.Substring(4, 1));
              
            }
    
    
    
        }


    MainPage.XAML:
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Canvas x:Name="MainCanvas" Width="400" Height="400" Background="White">
                <Line X1="0" Y1="200" X2="400" Y2="200" Stroke="Blue" StrokeThickness="2"/>
                <Line X1="200" Y1="0" X2="200" Y2="400" Stroke="Blue" StrokeThickness="2"/>
    
                <Grid x:Name="Grid1" Width="200" Height="200" Background="Blue" Canvas.Left="0" Canvas.Top="0" PointerEntered="Grid_PointerEntered"/>
                <Grid x:Name="Grid2" Width="200" Height="200" Background="Red" Canvas.Left="200" Canvas.Top="0"  PointerEntered="Grid_PointerEntered"/>
                <Grid x:Name="Grid3" Width="200" Height="200" Background="Green" Canvas.Left="0" Canvas.Top="200"  PointerEntered="Grid_PointerEntered"/>
                <Grid x:Name="Grid4" Width="200" Height="200" Background="Yellow" Canvas.Left="200" Canvas.Top="200"  PointerEntered="Grid_PointerEntered"/>
    
                <Border x:Name="Border1" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="1" />
                </Border>
    
                <Border x:Name="Border2" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="250" Canvas.Top="50" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="2"  ManipulationMode="None"/>
                </Border>
    
                <Border x:Name="Border3" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="50" Canvas.Top="250" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="3" ManipulationMode="None"/>
                </Border>
    
                <Border x:Name="Border4" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="250" Canvas.Top="250" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="4"  ManipulationMode="None"/>
                </Border>
            </Canvas>
        </Grid>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.


    Monday, October 13, 2014 7:56 PM
    Moderator

All replies

  • See the solution I pasted here:
    http://social.msdn.microsoft.com/Forums/windowsapps/en-US/6288d985-5ba8-4900-aac7-1c8c7636fe6f/how-to-create-a-sparsely-populated-gridview?forum=winappswithcsharp

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, October 8, 2014 12:22 PM
    Moderator
  • i can able to move the grid view items from 1 to 2, 2 to 4, 3 to 4 and 4 to 3.

    But when i move the 1st item to 4th, both of them has to be replaced.. means, 1st item has to move to 4th one and 4th item has to replace the 1st item.

    How can i achieve this?

    Monday, October 13, 2014 3:57 PM
  • Here's a buggy, working sample. You'll have to debug it yourself, as I've already spent more time on it than I should have...
      public sealed partial class MainPage : Page
        {
            List<int> CurrentPositions = new List<int>();
            
            public MainPage()
            {
                this.InitializeComponent();
                CurrentPositions.Add(0);
                CurrentPositions.Add(1);
                CurrentPositions.Add(2);
                CurrentPositions.Add(3);
                CurrentPositions.Add(4);
            }
    
            Border ActiveBorder = new Border(), DisplacedBorder = new Border();
            Grid OriginGrid = new Grid(), DropGrid = new Grid();
            int OriginGridIndex = 1, DropGridIndex = 1;
            Boolean Dragging = false;
            PointerPoint MouseOffset;
            
    
            private void Border_PointerPressed(object sender, PointerRoutedEventArgs e)
            {
                ActiveBorder = sender as Border;
                MouseOffset = e.GetCurrentPoint(ActiveBorder);
                Dragging = true;
                Canvas.SetZIndex(Border1, 0);
                Canvas.SetZIndex(Border2, 0);
                Canvas.SetZIndex(Border3, 0);
                Canvas.SetZIndex(Border4, 0);
                Canvas.SetZIndex(ActiveBorder, 1);
    
            }
    
            private void Border_PointerMoved(object sender, PointerRoutedEventArgs e)
            {
                if (Dragging)
                {
                    double MinX = e.GetCurrentPoint(MainCanvas).Position.X - MouseOffset.Position.X;
                    double MinY = e.GetCurrentPoint(MainCanvas).Position.Y - MouseOffset.Position.Y;
                    double MaxX = e.GetCurrentPoint(MainCanvas).Position.X + (100 - MouseOffset.Position.X);
                    double MaxY = e.GetCurrentPoint(MainCanvas).Position.Y + (100 - MouseOffset.Position.Y);
                    if (MinX > 0 && MaxX < 400) Canvas.SetLeft(ActiveBorder, MinX);
                    if (MinY > 0 && MaxY < 400) Canvas.SetTop(ActiveBorder, MinY);
                }
            }
    
            private void Border_PointerReleased(object sender, PointerRoutedEventArgs e)
            {
                PointerPoint CurrentPoint = e.GetCurrentPoint(MainCanvas);
                if (CurrentPoint.Position.X < 200 && CurrentPoint.Position.Y < 200) { DropGrid = Grid1; DropGridIndex = 1; }
                else if (CurrentPoint.Position.X >= 200 && CurrentPoint.Position.Y < 200) {DropGrid = Grid2; DropGridIndex = 2; }
                else if (CurrentPoint.Position.X < 200 && CurrentPoint.Position.Y >= 200) {DropGrid = Grid3; DropGridIndex = 3; }
                else if (CurrentPoint.Position.X >= 200 && CurrentPoint.Position.Y >= 200) {DropGrid = Grid4; DropGridIndex = 4; }
    
                
                if (Dragging)
                {
                    Border DraggedBorder = sender as Border;
                    if (OriginGrid != DropGrid)
                    {
                        string DisplacedBorderName =  "Border" + CurrentPositions[DropGridIndex].ToString();
                        if (Border1.Name == DisplacedBorderName) DisplacedBorder = Border1;
                        else if (Border2.Name == DisplacedBorderName) DisplacedBorder = Border2;
                        else if (Border3.Name == DisplacedBorderName) DisplacedBorder = Border3;
                        else if (Border4.Name == DisplacedBorderName) DisplacedBorder = Border4;
    
                        Point DisplacedDropPoint = new Point();
                        if (OriginGrid.Name == "Grid1") { DisplacedDropPoint.X = 50; DisplacedDropPoint.Y = 50; }
                        else if (OriginGrid.Name == "Grid2") { DisplacedDropPoint.X = 250; DisplacedDropPoint.Y = 50; }
                        else if (OriginGrid.Name == "Grid3") { DisplacedDropPoint.X = 50; DisplacedDropPoint.Y = 250; }
                        else if (OriginGrid.Name == "Grid4") { DisplacedDropPoint.X = 250; DisplacedDropPoint.Y = 250; }
    
    
                        int Temp = CurrentPositions[OriginGridIndex];
                        CurrentPositions[OriginGridIndex] = CurrentPositions[DropGridIndex];
                        CurrentPositions[DropGridIndex] = Temp;
    
                        Canvas.SetLeft(DisplacedBorder, DisplacedDropPoint.X);
                        Canvas.SetTop(DisplacedBorder, DisplacedDropPoint.Y);
                    }
    
                    Point DraggedDropPoint = new Point();
                    if (DropGrid.Name == "Grid1") { DraggedDropPoint.X = 50; DraggedDropPoint.Y = 50; }
                    else if (DropGrid.Name == "Grid2") { DraggedDropPoint.X = 250; DraggedDropPoint.Y = 50; }
                    else if (DropGrid.Name == "Grid3") { DraggedDropPoint.X = 50; DraggedDropPoint.Y = 250; }
                    else if (DropGrid.Name == "Grid4") { DraggedDropPoint.X = 250; DraggedDropPoint.Y = 250; }
    
                    Canvas.SetLeft(DraggedBorder, DraggedDropPoint.X);
                    Canvas.SetTop(DraggedBorder, DraggedDropPoint.Y);
    
                    Dragging = false;
                }
            }
    
            private void Grid_PointerEntered(object sender, PointerRoutedEventArgs e)
            {
              
                    OriginGrid = sender as Grid;
                    OriginGridIndex = int.Parse(OriginGrid.Name.Substring(4, 1));
              
            }
    
    
    
        }


    MainPage.XAML:
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
            <Canvas x:Name="MainCanvas" Width="400" Height="400" Background="White">
                <Line X1="0" Y1="200" X2="400" Y2="200" Stroke="Blue" StrokeThickness="2"/>
                <Line X1="200" Y1="0" X2="200" Y2="400" Stroke="Blue" StrokeThickness="2"/>
    
                <Grid x:Name="Grid1" Width="200" Height="200" Background="Blue" Canvas.Left="0" Canvas.Top="0" PointerEntered="Grid_PointerEntered"/>
                <Grid x:Name="Grid2" Width="200" Height="200" Background="Red" Canvas.Left="200" Canvas.Top="0"  PointerEntered="Grid_PointerEntered"/>
                <Grid x:Name="Grid3" Width="200" Height="200" Background="Green" Canvas.Left="0" Canvas.Top="200"  PointerEntered="Grid_PointerEntered"/>
                <Grid x:Name="Grid4" Width="200" Height="200" Background="Yellow" Canvas.Left="200" Canvas.Top="200"  PointerEntered="Grid_PointerEntered"/>
    
                <Border x:Name="Border1" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="50" Canvas.Top="50" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="1" />
                </Border>
    
                <Border x:Name="Border2" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="250" Canvas.Top="50" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="2"  ManipulationMode="None"/>
                </Border>
    
                <Border x:Name="Border3" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="50" Canvas.Top="250" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="3" ManipulationMode="None"/>
                </Border>
    
                <Border x:Name="Border4" Background="Coral" BorderBrush="Black" BorderThickness="1" Width="100" Height="100" Canvas.Left="250" Canvas.Top="250" PointerPressed="Border_PointerPressed" PointerMoved="Border_PointerMoved" PointerReleased="Border_PointerReleased">
                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="40" Text="4"  ManipulationMode="None"/>
                </Border>
            </Canvas>
        </Grid>


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.


    Monday, October 13, 2014 7:56 PM
    Moderator
  • thanq Matt

    Great help...

    Tuesday, October 14, 2014 7:50 AM