I want to draw listbox
items on a Canvas
, place them somewhere, and then move them around, finding inspiration in the following very good example Brewer Floating Content. However I don't want to duplicate this specific example from the blog.
Hence I attempt to draw items on listbox
with a Canvas
, but fail again, though in WPF this works easily.
The XAML code is:
<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>
and the source code-behind:
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; }
}
Strange is that the Canvas
cannot access to IsItemsHost
property, which is set in WPF.
Also hindering is that style setters cannot be databound in UWP, so that Canvas.Left
and Canvas.Top
cannot be bound.
Thank you for helping me advance on this topic.
RudiAcitivity