itemscontrol in UWP doesnt bind to coordinates of observablecollection items

Question

My Code does not bind to the X and Y property of the items in the observable Collection. What is wrong:

    <ItemsControl ItemsSource="{Binding LED}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas Background="SkyBlue"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X}" />
                <Setter Property="Canvas.Top" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Ellipse Stroke="{Binding Color}" Fill="{Binding FillColor}" StrokeThickness="1" Width="40" Height="40"></Ellipse>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

It does bind to Color and FillColor. Here is the Shape class, that is stored in the ObservableCollection LED:

class Shape
{
    public int X { get; private set; }
    public int Y { get; private set; }
    public string Color { get; private set; }
    public string FillColor { get; private set; }

    public Shape (int x, int y, string color, string fillColor)
    {
        X = x;
        Y = y;
        Color = color;
        FillColor = fillColor;
    }

}

score 5 · Accepted Answer · answered Oct 16 '16 at 11:58

The documentation for the Setter.Value property has the following note:

Windows Presentation Foundation (WPF) and Microsoft Silverlight supported the ability to use a Binding expression to supply the Value for a Setter in a Style. The Windows Runtime doesn't support a Binding usage for Setter.Value (the Binding won't evaluate and the Setter has no effect, you won't get errors, but you won't get the desired result either). When you convert XAML styles from WPF or Silverlight XAML, replace any Binding expression usages with strings or objects that set values, or refactor the values as shared {StaticResource} markup extension values rather than Binding-obtained values.

As a workaround, you could try using a RenderTransform instead:

<Ellipse Stroke="{Binding Color}" Fill="{Binding FillColor}" StrokeThickness="1" Width="40" Height="40">
    <Ellipse.RenderTransform>
        <TranslateTransform X="{Binding X}" Y="{Binding Y}"/>
    </Ellipse.RenderTransform>
</Ellipse>

Somehow it does not plot exactly the same as Canvas.Left and Canvas.Top. Any ideas? — Nick N., Oct 05 '17 at 12:25

itemscontrol in UWP doesnt bind to coordinates of observablecollection items

1 Answers1

Linked