Question

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

因此，我尝试使用listbox在Canvas上绘制项目，但再次失败，但在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无法访问在{WPF中设置的IsItemsHost属性。

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

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

RudiAcitivity

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

0 个答案: