UWP / XAML：在画布上绘制和移动列表框项

我想在 Canvas 上绘制 listbox 项目，将它们放在某个地方，然后移动它们，在以下非常好的例子中找到灵感Brewer Floating Content . 但是我不想从博客中复制这个特定的例子 .

因此，我尝试使用 Canvas 在 listbox 上绘制项目，但是再次失败，尽管在WPF中这很容易 .

XAML代码是：

<UserControl.Resources>
    <DataTemplate x:Key="ThingTemplate" x:DataType="local:Thing">
        <Border Width="150" BorderBrush="#FF9B3333" BorderThickness="2"
                ManipulationMode="TranslateX, TranslateY, TranslateInertia"
                ManipulationDelta="Border_ManipulationDelta">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="auto" />
                </Grid.RowDefinitions>
                <Border Background="#FF9B3333" Grid.Row="1">
                    <TextBlock Text="{Binding Comment}" HorizontalAlignment="Center"
                        VerticalAlignment="Center" TextWrapping="WrapWholeWords" Foreground="Black" Padding="4" />
                </Border>
            </Grid>
        </Border>
    </DataTemplate>    
</UserControl.Resources>

<Grid>
    <ListBox x:Name="ThingCanvas" Grid.Row="1" ItemTemplate="{StaticResource ThingTemplate}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>

和源代码隐藏：

public sealed partial class UserControl1 : UserControl
{
    public UserControl1()
    {
        this.InitializeComponent();
        for (var i = 0; i < 4; i++)
        {
            var newThing = new Thing() { Comment = "Item" + i.ToString() };
            ThingCanvas.Items.Add(newThing);
        }
    }

    private void Border_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
    {
        var left = Canvas.GetLeft(this) + e.Delta.Translation.X;
        var top = Canvas.GetTop(this) + e.Delta.Translation.Y;
        Canvas.SetLeft(this, left);
        Canvas.SetTop(this, top);
    }
}

public class Thing
    {
        public string ImagePath { get; set; }
        public string Comment { get; set; }
    }

奇怪的是 Canvas 无法访问 IsItemsHost 属性，这是在WPF中设置的 .

同样阻碍的是样式设置器无法在UWP中进行数据绑定，因此无法绑定 Canvas.Left 和 Canvas.Top .

感谢您帮助我推进这一主题 .

RudiAcitivity