[UWP] [XAML] [VB] Drag&掉落：仅限一个方向 [英] [UWP][XAML][VB]Drag & Drop: One Direction Only

问题描述

我正在寻找一种方法来允许用户垂直重新排序一系列元素（由ItemsControl创建）。我试图用Drag& amp;掉落（除非有更好的方法）。我对Drag& amp;虽然我过去曾经玩过一点点b $ b，但是下降了。但是，我在尝试创建应用时遇到的两个问题是：

1。仅允许垂直拖动，因为目的是重新排序元素，而不是将它们移动到其他区域。在这样做时，我希望其他元素向上或向下移动以显示元素的重新排序方式（虽然
我认为一旦唯一的垂直问题得到解决，我可以自己处理这个部分） />
2.移动被拖动的元素，而不是显示副本。随着我玩过的东西，似乎被视觉拖动的元素显示为原始的副本，而不是看起来它实际上正在移动。一旦它被删除就会被修复，
但是当只有一个对象时看到2份副本就不太直观。

就像我说的，我有点Drag and amp; amp; new掉线，但我找不到任何针对这些问题的东西。有任何想法吗？谢谢。

---

Nathan Sokalski [e-mail] http://www.nathansokalski.com/

解决方案

您好，

您如何设计ItemsControl？ ItemsControl中有多少列？如果您只有一列，那就是 垂直，它只是垂直拖动。

对于问题二，我做了一个简单的演示来检查。它显示拖动的项目是真实项目而不是副本。您可以使用以下代码进行检查：

 public class ViewModel 
 {
 public ObservableCollection< ItemColor>物品{get;组; } 
 public ViewModel（）
 {
 Items = new ObservableCollection< ItemColor>（）; 
 for（int i = 0; i< 20; i ++）
 {
 ItemColor info = new ItemColor（）{Name =" Red"，Color = Color.FromArgb（255,255,0） ，0）}; 
 this.Items.Add（info）; 
} 
} 
 
} 
公共类ItemColor 
 {
 public string Name {get;组; } 
 public Color Color {get;组; } 
 
 public SolidColorBrush Brush 
 {
 get {return new SolidColorBrush（this.Color）; } 
} 
} 

< Page.DataContext> 
< local：ViewModel /> 
< /Page.DataContext> 
< Grid> 
< GridView ItemsSource =" {Binding Items}" 
 Margin =" 0,140,​​0,0" 
 Padding =" 120,0,80,60" 
 CanReorderItems =" True" 
 CanDrag =" True" 
 AllowDrop =" True"> 
< GridView.ItemTemplate> 
< DataTemplate> 
< Grid Height =" 100"宽度= QUOT; 100" Background =" {Binding Brush}"> 
< / DataTemplate> 
< /GridView.ItemTemplate> 
< / GridView> 
< / Grid> 

祝你好运

Roy

I am working on finding a way to allow the user to vertically reorder a series of elements (created by an ItemsControl). I am trying to do this using Drag & Drop (unless there is a better way). I am somewhat new to Drag & Drop, although I have played with it a little in the past. However, two problems I am having while trying to create my app are:

1. Allow only vertical dragging, since the purpose is to reorder the elements, not move them to other areas. While doing this, I would like the other elements to be shifted up or down to show how the elements are being reordered (although I think I can take care of this part myself once the only vertical problem is solved)
2. Move the element being dragged, not display a copy. With the stuff I have played with, it seems that the element being dragged visually displays as a copy of the original, rather than looking like it is actually moving. This is fixed once it is dropped, but it is less intuitive to see 2 copies when there is only 1 object.

Like I said, I am somewhat new to Drag & Drop, but I could not find anything for these problems. Any ideas? Thanks.

---

Nathan Sokalski [e-mail] http://www.nathansokalski.com/

解决方案

Hi,

How do you design your ItemsControl? How much columns do you have in the ItemsControl? If you only have one column, and it's  vertical, it will be vertical dragging only.

For question two, I made a simple demo to check. It shows the dragged item is the true item not a copy. You could use the following code to check:

public class ViewModel
    {
        public ObservableCollection<ItemColor> Items { get; set; }
        public ViewModel()
        {
            Items = new ObservableCollection<ItemColor>();
            for (int i=0;i<20;i++)
            {
                ItemColor info = new ItemColor() { Name="Red",Color=Color.FromArgb(255,255, 0, 0) };
                this.Items.Add(info);
            }
        }
        
    }
    public class ItemColor
    {
        public string Name { get; set; }
        public Color Color { get; set; }
        
        public SolidColorBrush Brush
        {
            get { return new SolidColorBrush(this.Color); }
        }
    }

 <Page.DataContext>
        <local:ViewModel/>
    </Page.DataContext>
    <Grid>
        <GridView ItemsSource="{Binding Items}"
                  Margin="0,140,0,0"
                  Padding="120,0,80,60"
                  CanReorderItems="True"
                  CanDrag="True" 
                  AllowDrop="True">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Grid Height="100" Width="100" Background="{Binding Brush}"/>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
    </Grid>

Best regards

Roy

这篇关于[UWP] [XAML] [VB] Drag&掉落：仅限一个方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！