how to reorder an item in itemscontrol by holding in item? - xaml

Question

HI i try to reorder items in ItemsControl . when i set ManipulationMode of element in ItemsControl to ManipulationModes.TranslateY ScrollView dosent work. for this problem i change this ManipulationMode in Holding event but i faced a new problem.
in my code,we need release finger after holding and touch again for moving. i need holding and moving finger to drag items not holding and release and touch again and moving. this release is to bad for me and users
please help me.
my code:
<ItemsControl ItemsSource="{Binding Items}"
x:Name="todoList">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="{Binding Path=color, Converter={StaticResource ColorToBrushConverter}}"
Height="75"
x:Name="todoItem">
<i:Interaction.Behaviors>
<Behaviors:DragReOrderBehavior />
</i:Interaction.Behaviors>
<Grid Background="{StaticResource itemGradient}">
<!--task text-->
<TextBlock Text="{Binding Title}"
Margin="15,15,0,15" FontSize="25" TextWrapping="Wrap"
x:Name="taskText"/>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
and behavior:
public class DragReOrderBehavior : DependencyObject, IBehavior
{
private static readonly int AutoScrollHitRegionSize = 80;
private DispatcherTimer _autoScrollTimer;
private FrameworkElement _dragItem;
private int _initialDragIndex;
private bool IsActive = false;
private ItemsControl itemscontrolList;
private ItemViewModel draggedItemVM;
private MainViewModel VM;
private ResettableObservableCollection<ItemViewModel> itemsListVm;
private ScrollViewer _scrollViewer;
// private SoundEffect _moveSound;
public DependencyObject AssociatedObject { get; private set; }
public void Attach(DependencyObject associatedObject)
{
AssociatedObject = associatedObject;
var fw = (FrameworkElement)AssociatedObject;
//fw.ManipulationMode = ManipulationModes.TranslateY | ManipulationModes.System;
////fw.ManipulationStarted += fw_ManipulationStarted;
fw.Holding += fw_Holding;
//fw.ManipulationDelta += fw_ManipulationDelta;
//fw.ManipulationCompleted += fw_ManipulationCompleted;
if (fw.RenderTransform == null || fw.RenderTransform as TranslateTransform == null)
{
fw.RenderTransform = new TranslateTransform();
}
// a timer which is used to periodically detect the position of the
// item being dragged in order to allow auto-scroll behaviour
_autoScrollTimer = new DispatcherTimer();
_autoScrollTimer.Interval = TimeSpan.FromMilliseconds(50);
_autoScrollTimer.Tick += (s, e) =>
{
AutoScrollList();
ShuffleItemsOnDrag();
};
// _moveSound = SoundEffect.FromStream(TitleContainer.OpenStream("Sounds/Windows XP Menu Command.wav"));
}
void fw_Holding(object sender, HoldingRoutedEventArgs e)
{
//if (Math.Abs(e.Cumulative.Translation.Y) > Math.Abs(e.Cumulative.Translation.X))
// {
//var fw = (FrameworkElement)AssociatedObject;
//fw.ManipulationMode = ManipulationModes.TranslateRailsY | ManipulationModes.System;
IsActive = true;
// locate the element being dragged
_dragItem = AssociatedObject as FrameworkElement;
itemscontrolList = AssociatedObject.Ancestors<ItemsControl>().OfType<ItemsControl>().FirstOrDefault();
draggedItemVM = ((ItemViewModel)_dragItem.DataContext);
VM = (MainViewModel)itemscontrolList.DataContext;
itemsListVm = VM.Items;
_scrollViewer = itemscontrolList.Descendants<ScrollViewer>()
.Cast<ScrollViewer>()
.SingleOrDefault();
_dragItem.SetVerticalOffset(0);
_dragItem.ManipulationMode = ManipulationModes.TranslateY;
_dragItem.ManipulationDelta += fw_ManipulationDelta;
_dragItem.ManipulationCompleted += fw_ManipulationCompleted;
_dragItem.UpdateLayout();
itemscontrolList.UpdateLayout();
_initialDragIndex = itemsListVm.IndexOf(draggedItemVM);
// fade out the items in the list, other than the dragged one
foreach (var item in itemscontrolList.GetItemsInView()
.Where(i => i.DataContext != draggedItemVM))
{
item.Animate(1.0, 0.7, "Opacity", 300, 0);
}
_autoScrollTimer.Start();
// }
}
}

Answer 1

The ListView & GridView support reordering items. How about thinking of using them?
First you can disable this feature by setting CanDragItems CanReorderItems AllowDrop to false and when you hold the item in your ListView then setting the properties above to true which will enable the Reorder feature.