1

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

Richard Chambers
  • 16,643
  • 4
  • 81
  • 106
  • You don't need to set `IsItemsHost`. For the missing binding capability in Style Setters, see [this answer](http://stackoverflow.com/a/33582406/1136211). – Clemens Feb 20 '17 at 08:35

0 Answers0