c# - 在 ItemsControl 中移动行为

Question

我有一个 Collection 项目绑定(bind)到 ItemsControl 元素。

我需要为每个元素启用鼠标拖动行为，但我似乎无法让它工作。

添加这段代码

<i:Interaction.Behaviors>
    <el:MouseDragElementBehavior/>
</i:Interaction.Behaviors>

将使其工作，但前提是我将我的项目放在 ItemsControl 之外。

这是 ItemsControl 组件的代码:

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <utils:TemplateSelector Content="{Binding}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

我做错了什么吗？

编辑:新代码但仍然无法正常工作(使用和不使用 Canvas)

        <ItemsControl ItemsSource="{Binding Items}">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <utils:TemplateSelector Content="{Binding}">
                        <i:Interaction.Behaviors>
                            <el:MouseDragElementBehavior/>
                        </i:Interaction.Behaviors>
                    </utils:TemplateSelector>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

Answer 1

好像一旦你开始赏金，你就会突然找到一个你在过去几个月里找不到的解决方案。

我正在回答添加我的解决方案，该解决方案目前有效但肯定可以做得更好。

我的提议基于两个不同的来源:

• A gesture-driven Windows Phone to-do application作者:科林·埃伯哈特
• How to find element in visual tree? wp7由 E.Z. 回答哈特

让我们从 XAML 开始:

<ItemsControl ItemsSource="{Binding Items}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Border BorderBrush="{StaticResource PhoneForegroundBrush}">
                <utils:TemplateSelector Content="{Binding}"/>
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener
                        DragStarted="GestureListener_OnDragStarted"
                        DragDelta="GestureListener_OnDragDelta"
                        DragCompleted="GestureListener_OnDragCompleted"/>
                </toolkit:GestureService.GestureListener>
            </Border>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas x:Name="WidgetsCanvas" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
</ItemsControl>

(工具包 来自Windows Phone Toolkit )

现在让我们看看三个拖动处理程序的实现。

private int _zindex; //Used to keep the moved element on the top, not working for now
private FrameworkElement _movedObject; //The element that we're moving. Used to avoid moving multiple items if they overlap

private void GestureListener_OnDragStarted(object sender, DragStartedGestureEventArgs e)
{
    if (_movedObject != null) return; // We're already moving something!            
    // Initialize the drag            
    var fe = sender as FrameworkElement; // The element that we want to move
    (fe as Border).BorderThickness = new Thickness(5); // A simple effect to mark the element on the screen
    _movedObject = fe; // We set the current object to the one which is moving
    Canvas.SetZIndex(fe, _zindex++); // This should take the moved object on the top but it's not working
}

private void GestureListener_OnDragDelta(object sender, DragDeltaGestureEventArgs e)
{
    var fe = sender as FrameworkElement;
    if (!fe.Equals(_movedObject)) return; // We change the object's position only if this is the one who started the event
    var offset = DragManager.GetOffset(fe); // We get the current position
    var canvas = DragManager.FindChild<Canvas>(Application.Current.RootVisual, "ItemsCanvas"); // We need the container of our object to force it to stay inside the container
    //The new position is given by the old one plus the change reported by the event
    var horizontalOffset = offset.HorizontalValue + e.HorizontalChange;
    var verticalOffset = offset.VerticalValue + e.VerticalChange;
    // We need to check if the new position is outside our container's bounds
    if (horizontalOffset < 0) horizontalOffset = 0;
    else if (horizontalOffset > (canvas.ActualWidth - fe.ActualWidth)) horizontalOffset = canvas.ActualWidth - fe.ActualWidth;
    if (verticalOffset < 0) verticalOffset = 0;
    else if (verticalOffset > (canvas.ActualHeight - fe.ActualHeight)) verticalOffset = canvas.ActualHeight - fe.ActualHeight;           
    // Once we've got everything set, we can move our component
    DragManager.SetOffset(fe, horizontalOffset, verticalOffset);
}

private void GestureListener_OnDragCompleted(object sender, DragCompletedGestureEventArgs e)
{
    var fe = sender as FrameworkElement;                     
    (fe as Border).BorderThickness = new Thickness(0); // We undo our effect
    _movedObject = null; // The movement is done so we can reset our current object and wait for a new one to come
}

处理程序与我称为 DragManager 的类一起工作。它的代码非常简单:

public static class DragManager
{
    public static void SetOffset(FrameworkElement fe, double horizontalOffset, double verticalOffset)
    {
        var trans = new TranslateTransform
        {
            X = horizontalOffset,
            Y = verticalOffset
        };
        // I don't know what may change, in terms of performance, between applying the transform or just changing the margins. I'm using the margins because the transform may be needed for some other purpose
        //fe.RenderTransform = trans;            
        fe.Margin = new Thickness(horizontalOffset, verticalOffset, 0, 0); // We just change our object's margins to reflect its new position
        // We store the current position in the objects Tag (maybe there's a better solution but I'm quite new to C#/xaml)
        fe.Tag = new Offset
        {
            VerticalValue = verticalOffset,
            HorizontalValue = horizontalOffset,
            Transform = trans
        };
    }

    public static Offset GetOffset(FrameworkElement fe)
    {
        if (fe.Tag == null) fe.Tag = new Offset();
        return (Offset)fe.Tag;
    }

    public struct Offset
    {
        public double HorizontalValue { get; set; }
        public double VerticalValue { get; set; }
        public TranslateTransform Transform { get; set; }
    }

    public static T FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject
    {
        // Confirm parent and childName are valid. 
        if (parent == null)
        {
            return null;
        }

        T foundChild = null;

        var childrenCount = VisualTreeHelper.GetChildrenCount(parent);
        for (var i = 0; i < childrenCount; i++)
        {
            var child = VisualTreeHelper.GetChild(parent, i);
            // If the child is not of the request child type child
            var childType = child as T;
            if (childType == null)
            {
                // recursively drill down the tree
                foundChild = FindChild<T>(child, childName);

                // If the child is found, break so we do not overwrite the found child. 
                if (foundChild != null)
                {
                    break;
                }
            }
            else if (!String.IsNullOrEmpty(childName))
            {
                var frameworkElement = child as FrameworkElement;
                // If the child's name is set for search
                if (frameworkElement != null && frameworkElement.Name == childName)
                {
                    // if the child's name is of the request name
                    foundChild = (T)child;
                    break;
                }

                // Need this in case the element we want is nested
                // in another element of the same type
                foundChild = FindChild<T>(child, childName);
            }
            else
            {
                // child element found.
                foundChild = (T)child;
                break;
            }
        }

        return foundChild;
    }
}

正如我已经说过的，这段代码现在可以正常工作。

如果有人有任何改进建议，请写在这里，以便我可以看到/测试更好的方法来做这类事情!