Overview

Drag Animated Panel, is a WPF panel like any other, and can be used in the same way. This panel arrange the items like an horizontal wrap panel and the main objective of it, is to allow the user to reorder the elements inside the collection (useful for giving priority to the items), and animate the items movement.

Using Drag Animated Panel

In the DraggAnimatedPanelExample project there is an example of the using the panel. In this case we have used it like an ItemsPanel property of a ListBox (in this way we can to show any object in our panel only defining an ItemTemplate for it).

<ListBox x:Name="listBox" ScrollViewer.HorizontalScrollBarVisibility="Disabled" VerticalContentAlignment="Stretch" HorizontalContentAlignment="Stretch" BorderThickness="0" ItemContainerStyle="{DynamicResource ListBoxItemStyle1}" Background="{x:Null}">

            <ListBox.ItemsPanel>

                <ItemsPanelTemplate>

                    <DraggAnimatedPanel:DraggAnimatedPanel ItemSeparation="2" ItemsHeight="140" ItemsWidth="220" SwapCommand="{Binding SwapCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>

                </ItemsPanelTemplate>

            </ListBox.ItemsPanel>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

            <local:ContainerUserControl/>

        </ListBox>

 

It is important to note that the attached property ScrollViewer.HorizontalScrollBarVisibility of the ListBox is set to Disabled. This is for not giving to the panel infinity width.

The other important thing is the SwapCommand. This is the command that will swap the items. In this case the command is in the MainWindow, but in a Model View – View Model application this command should be in the View Model for this view. Now let see this command in deep:

DelegateCommand<int[]> _swap;

        public DelegateCommand<int[]> SwapCommand

        {

            get

            {

                if (_swap == null)

                    _swap = new DelegateCommand<int[]>(

                        (indexes) =>

                        {

                            int fromS = indexes[0];

                            int to = indexes[1];

                            var elementSource = listBox.Items[to];

                            var dragged = listBox.Items[fromS];

                            if (fromS > to)

                            {

                                listBox.Items.Remove(dragged);

                                listBox.Items.Insert(to, dragged);

                            }

                            else

                            {

                                listBox.Items.Remove(dragged);

                                listBox.Items.Insert(to, dragged);

                            }

                        }

                    );

                return _swap;

            }

        }

 

First, it receives a int[] array, in which the first two items are the indexes to swap. The first item array [0] is the index of the dragged element, and the array[1] is where it will be moved. If the used collection is an ObservableCollection i suggest to use the method Move (int oldIndex, int newIndex) like this Move (array [0], array [1]). In this way this command will be simpler.

Contact Me

If any question, suggestion or improve idea, please write me to this e-mail address: rulyotano@gmail.com.

Thanks.

Last edited Apr 2, 2012 at 6:48 PM by rulyotano, version 5

Comments

No comments yet.