Positioning XAMLUI elements on ItemsControl with Canvas

Question

I'm building a Windows Universal application where I need to put some elements on a canvas. Since I want to do this MVVM style I've read that I should use an ItemsControl for it. Problem is that all the solutions I found are for WPF or Silverlight and don't work for Windows Universal. They appear on the canvas, but they keep positioning themselfs in the left upper corner.

XAML:

<ItemsControl ItemsSource="{Binding MyItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
             <TextBlock Text="{Binding Text}" FontSize="18"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
             <Setter Property="Canvas.Left" Value="{Binding Left}" />
             <Setter Property="Canvas.Top" Value="{Binding Top}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

XAML's code behind:

public MainPage()
{
    this.InitializeComponent(); 
    DataContext = new MyItemViewModel();
}

Viewmodel and model:

class MyItemViewModel
{
    ObservableCollection<MyItem> _myItems;

    public MyItemViewModel()
    {
        _myItems = new ObservableCollection<MyItem>();
        _myItems.Add(new MyItem(10, 10, "First TextBlock"));
        _myItems.Add(new MyItem(200, 400, "2nd TextBlock"));
        _myItems.Add(new MyItem(400, 200, "The Third TextBlock"));
    }

    public ObservableCollection<MyItem> MyItems
    {
        get { return _myItems; }
        set { _myItems = value; }
    }
}

public class MyItem
{
    public MyItem(double left, double top, string text)
    {
        Left = left;
        Top = top;
        Text = text;
    }

    public double Left { get; set; }
    public double Top { get; set; }
    public string Text { get; set; }
}

Possible duplicate of http://stackoverflow.com/questions/33290099/catastrophic-failure-in-xaml-binding — Bart, Dec 18 '15 at 12:27
I don't agree. I see the items, but they don't give an exception. They just stay on the top left corner. — Tom Droste, Dec 18 '15 at 12:44
I think your `TargetType` is wrong. Try this instead: `TargetType="{x:Type UIElement}"`. If that doesn't work, try removing the `TargetType` attribute altogether. — Steven Rands, Dec 18 '15 at 13:36
After a brief search it would appear that this type of binding in the style might not be supported in Windows Universal apps (the issue actually dates back to WinRT, and Silverlight before that). See [this SO answer](http://stackoverflow.com/a/18275796/4265041), and [this one](http://stackoverflow.com/a/33582406/4265041). — Steven Rands, Dec 18 '15 at 13:55

Mike Eason · Answer 1 · 2015-12-18T13:59:59.387

-1

Use FrameworkElement as the TargetType instead:

<ItemsControl.ItemContainerStyle>
    <Style TargetType="FrameworkElement">
         <Setter Property="Canvas.Left" Value="{Binding Left}" />
         <Setter Property="Canvas.Top" Value="{Binding Top}" />
    </Style>
</ItemsControl.ItemContainerStyle>

edited Dec 18 '15 at 13:59

answered Dec 18 '15 at 13:36

Mike Eason

9,525
2
38
63

If you don't use it, it won't compile – Tom Droste Dec 18 '15 at 13:40
My bad, I thought you were using WPF. Try adding the target type of FrameworkElement. – Mike Eason Dec 18 '15 at 14:00

Positioning XAMLUI elements on ItemsControl with Canvas

1 Answers1