locked
GridView Reorder Transition with observable collection

    Question

  • Hi,

    I would like to animate the movement of the items in my observable collection within my gridview. Here is what I have so far ...

    XAML

    <Page
        x:Class="ReorderTest.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ReorderTest"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        <Canvas x:Name="canvas" Width="1920" Height="1080">
            <GridView x:Name="gridView1" Width="1920" Height="1080" CanReorderItems="True" SelectionMode="Single" ScrollViewer.HorizontalScrollMode="Enabled" CanDragItems="True" AllowDrop="True">
            </GridView>
        </Canvas>
    
    
    </Page>

    C#

    using System;
    using System.Collections.Generic;
    using System.Collections.ObjectModel;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using System.Diagnostics;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    using Windows.UI.Xaml.Media.Imaging;
    using Windows.UI.Xaml.Media.Animation;
    using Windows.UI.Xaml.Shapes;
    using Windows.System;
    using Windows.UI.Core;
    
    // The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
    
    namespace ReorderTest
    {
        /// <summary>
        /// An empty page that can be used on its own or navigated to within a Frame.
        /// </summary>
        public sealed partial class MainPage : Page
        {
    
            private ObservableCollection<Rectangle> Rects = new ObservableCollection<Rectangle>();
    
            
            public MainPage()
            {
                this.InitializeComponent();
                Window.Current.CoreWindow.KeyDown += CoreWindow_KeyDown;
    
                Rectangle temp = new Rectangle();
                temp.Width = 400;
                temp.Height = 250;
                SolidColorBrush orangeBrush = new SolidColorBrush(Windows.UI.Colors.Orange);
                temp.Fill = orangeBrush;
                Rects.Insert(0, temp);
    
                Rectangle temp2 = new Rectangle();
                temp2.Width = 400;
                temp2.Height = 250;
                SolidColorBrush blueBrush = new SolidColorBrush(Windows.UI.Colors.Blue);
                temp2.Fill = blueBrush;
                Rects.Insert(0, temp2);
    
                Rectangle temp3 = new Rectangle();
                temp3.Width = 400;
                temp3.Height = 250;
                SolidColorBrush greenBrush = new SolidColorBrush(Windows.UI.Colors.Green);
                temp3.Fill = greenBrush;
                Rects.Insert(0, temp3);
    
                gridView1.ItemsSource = Rects;
    
            }
    
    
            private void CoreWindow_KeyDown(CoreWindow sender, KeyEventArgs args)
            {
                Rects.Move(1, 2);
            }
        }
    
        
    
    }

    It is setup to simply swap the second and third rectangles positions in the grid when hitting any key on the keyboard, and it works; however the animation is unsatisfactory. The whole grid briefly disappears and then comes back into view with the positions of the rectangles switched. What I need is for the rectangles to switch positions in such a way that I can see it happening. Something similar to what you would get if you drag and dropped one over the other with the mouse. I wonder if I need to implement a collectionchanged or propertychanged event somehow?

    What do you think?

    Edit:

    I made a little progress ... changed my XAML to ...

    <Page
        x:Class="ReorderTest.MainPage"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="using:ReorderTest"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d">
    
        
        <Canvas x:Name="canvas" Width="1920" Height="1080">
            <GridView x:Name="gridView1" Width="1920" Height="1080" CanReorderItems="True" SelectionMode="Single" ScrollViewer.HorizontalScrollMode="Enabled" CanDragItems="True" AllowDrop="True">
                <GridView.ItemContainerTransitions>
                    <TransitionCollection>
                        <ReorderThemeTransition/>
                    </TransitionCollection>
                </GridView.ItemContainerTransitions>
            </GridView>
        </Canvas>
        
    
    
    </Page>
    Now the rectangles switch position immediately without redrawing the whole grid. But there is still no animation. I tried RepositionThemeTransition but that animates all three rectangles from the bottom of the container up to their appropriate positions.


    • Edited by duffybr Wednesday, December 17, 2014 9:28 PM
    Wednesday, December 17, 2014 5:49 PM

Answers

  • See if you like this one:

    private void CoreWindow_KeyDown(CoreWindow sender, KeyEventArgs args)
    {
      Rectangle temp1 = Rects[1];
      Rects.Remove(temp1);
      Rects.Add(temp1);
    }

    <GridView.ItemContainerTransitions>
      <TransitionCollection>
        <RepositionThemeTransition/>
      </TransitionCollection>
    </GridView.ItemContainerTransitions>


    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.

    • Marked as answer by duffybr Thursday, December 18, 2014 6:06 PM
    Thursday, December 18, 2014 5:45 PM
    Moderator

All replies

  • What's happing here is that you're changing the underlying data but not actually causing a reorder in the gridview. You're not going to get any animation using this technique.  I think you need to work on using a storyboard to move things around the way you want to.

    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.

    Thursday, December 18, 2014 2:42 PM
    Moderator
  • I thought that was the whole point of using an observable collection. The items indexes are being changed in the collection and the gridview shows them in their new location; only it happens instantaneously instead of having an animation associated with it. Where do I add the storyboard code?
    Thursday, December 18, 2014 4:01 PM
  • Let me ask you this:  what's you're end goal here?


    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.

    Thursday, December 18, 2014 4:04 PM
    Moderator
  • Also: observable collections display changes to the collection and the items in the collection, not necessarily for changes to how they are displayed in an itemspresenter.

    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.

    Thursday, December 18, 2014 4:06 PM
    Moderator
  • Okay, I'm pretty lost here. Currently, in the above code, I am changing the position of the rectangles with the Move method of the ObservableCollection. The Gridview shows that change only it happens instantaneously. I would like to see the rectangles moving to their new locations. Can I attach a story board to the theme transition? 
    Thursday, December 18, 2014 4:23 PM
  • I'll see what I can come up with.

    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.

    Thursday, December 18, 2014 4:37 PM
    Moderator
  • See if you like this one:

    private void CoreWindow_KeyDown(CoreWindow sender, KeyEventArgs args)
    {
      Rectangle temp1 = Rects[1];
      Rects.Remove(temp1);
      Rects.Add(temp1);
    }

    <GridView.ItemContainerTransitions>
      <TransitionCollection>
        <RepositionThemeTransition/>
      </TransitionCollection>
    </GridView.ItemContainerTransitions>


    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.

    • Marked as answer by duffybr Thursday, December 18, 2014 6:06 PM
    Thursday, December 18, 2014 5:45 PM
    Moderator
  • Yes!!!!!, That is something I can work with. Thanks so much.
    Thursday, December 18, 2014 6:06 PM