Question

我有一个项目列表，每个项目都包含一些注释，如下所示：

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        List<Item> items = new List<Item>();
        Item item1 = new Item() { Title = "First Item" };
        Item item2 = new Item() { Title = "Second Item" };

        item1.ItemNotes.Add(new ItemNote() { Note = "first_note" });
        item1.ItemNotes.Add(new ItemNote() { Note = "second_note" });
        item1.ItemNotes.Add(new ItemNote() { Note = "third_note" });
        item2.ItemNotes.Add(new ItemNote() { Note = "fourth_note" });
        item2.ItemNotes.Add(new ItemNote() { Note = "fifth_note" });

        items.Add(item1);
        items.Add(item2);

        ic_tasks.ItemsSource = items;
    }
}

public class Item
{
    public Item()
    {
        this.ItemNotes = new ObservableCollection<ItemNote>();
    }
    public string Title { get; set; }
    public ObservableCollection<ItemNote> ItemNotes { get; set; }
}
public class ItemNote
{
    public string Note { get; set; }
}

在 XAML 中，我通过 ItemsControl 呈现这些项目，如下所示：

<Grid>
   <ItemsControl Name="ic_tasks">
      <ItemsControl.ItemTemplate>
          <DataTemplate DataType="{x:Type local:Item}">
              <StackPanel Orientation="Vertical">
                  <Border BorderThickness="1" CornerRadius="8" Background="DarkGray">
                      <StackPanel Orientation="Horizontal" Height="30">
                          <TextBox Text="{Binding Title}" Margin="5,5,5,5"/>
                          <Button Margin="5,5,5,5">Fold</Button>
                      </StackPanel>
                  </Border>
                  <ItemsControl ItemsSource="{Binding ItemNotes}">
                      <ItemsControl.ItemTemplate>
                          <DataTemplate DataType="{x:Type local:ItemNote}">
                              <TextBox Margin="40,5,5,5" Text="{Binding Note}"/>
                          </DataTemplate>
                      </ItemsControl.ItemTemplate>
                  </ItemsControl>
              </StackPanel>
          </DataTemplate>
      </ItemsControl.ItemTemplate>
   </ItemsControl>
</Grid>

现在我的目标是使这些项目可移动。例如，我希望能够将第二个项目移动到第一个项目上，如下所示：

我尝试了什么？我尝试使用鼠标事件将所有 ItemsControl 包装成 Canvas 并通过 Canvas.Top 和 Canvas.Left 绑定位置，但是我想要的 StackPanel 没有这样的属性移动。 ItemsControl 只有这样的属性，如下所示：

<Canvas x:Name="canvas_of_items">
    <ItemsControl Name="ic_tasks" Canvas.Top="{Binding YPosition}" Canvas.Left="{Binding XPosition}">
        <...>
             <StackPanel Orientation="Horizontal" Height="30" PreviewMouseDown="StackPanel_MouseDown" PreviewMouseMove="StackPanel_MouseMove" PreviewMouseUp="StackPanel_MouseUp">
        <...>
    </ItemsControl>
</Canvas>

所以我的问题是： 允许物品在它们之间移动的选项有哪些？重要的是，当移动 Item 时，它应该是可见的，而不是鼠标光标本身。

Answer 1

您可以使用 ItemsControl 设置 ItemsControl.ItemsPanel 以将您的项目放置在画布中，如下所示：

<ItemsControl Name="ic_tasks">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas></Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

但是要移动项目，您不能只在 Canvas 上设置 StackPanel 属性，因为它们被 ContentPresenter 包围。相反，您可以使用 ItemsControl.ItemContainerStyle 在这些 ContentPresentor 上设置样式，然后您可以执行以下操作：

<Style>
     <Setter Property="Canvas.Left" value="<<somthing - propebly a binding so it will be easy to change>>"
</Style>

在 ItemsControl 中移动项目

1 个答案: