如何在 Canvas 中绑定 shape/control 的绝对坐标

Question

在 Windows 8.1 Metro 应用程序中，我正在尝试将视图模型中的一组形状绑定到 MainPage.xaml。每个形状都有一个 Left、Top 和一个 PathData，后者将是一个 RectangleGeometry，其中包含我想在 canvas 内绘制的矩形相应的位置。

这是 XAML :

<Grid Background="Black">
    <ItemsControl ItemsSource="{Binding Shapes}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Top" Value="{Binding Top}"/>
                <Setter Property="Canvas.Left" Value="{Binding Left}"/>
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Path Data="{Binding PathData}" Stroke="White" StrokeThickness="3" Canvas.Left="{Binding Left}" Canvas.Top="{Binding Top}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

数据上下文已设置并且工作正常。我从 MainViewModel 填充形状并且矩形确实出现在屏幕上，但问题是我无法将矩形放置在 [=19= 内的确切 Left 和 Top 位置]，即它们只是放在 (0,0)。

我尝试绑定 Path 的 Canvas.Left 和 Canvas.Top（我试过的明显方法）以及设置 ItemContainerStyle 和 Style（我从 WPF 示例中找到的一种方法）应该做同样的事情。但是这些都不起作用（我在 xaml 中添加了这两种方法以供参考）。

那么我做错了什么，如何让矩形出现在相应的位置？

编辑：我的问题与 this one for WPF 相同，只是我的目标是 windows metro/uwp 接受的答案对其不起作用。

Answer 1

通过绑定到 Transform 解决了这个问题。

<Path Data="{Binding PathData}" Stroke="White" StrokeThickness="3">
    <Path.RenderTransform>
         <CompositeTransform TranslateX="{Binding Left}" TranslateY="{Binding Top}"/>
    </Path.RenderTransform>
</Path>

如何在 Canvas 中绑定 shape/control 的绝对坐标

How to bind absolute coordinates of a shape/control inside Canvas

xaml

windows-store-apps

winrt-xaml

uwp

mvvm-light