使用 ItemsControl 在画布 Windows Phone 上绑定按钮的顶部/左侧位置答案

【问题标题】：Using ItemsControl to bind buttons top/left position on canvas Windows Phone使用 ItemsControl 在画布 Windows Phone 上绑定按钮的顶部/左侧位置
【发布时间】：2013-06-20 06:28:47
【问题描述】：

我正在使用 ItemsControl 并且有几个按钮并将它们放置在画布上的特定位置。但是，Canvas.Left 和 Canvas.Top 始终将所有按钮放置在 0,0。

        <ItemsControl x:Name="itemsControl" ItemsSource="{Binding Tiles}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Button Width="{Binding Side}" 
                               Height="{Binding Side}" 
                               Background="{Binding BgColor}"              
                               Canvas.Left="{Binding Left}" Canvas.Top="{Binding Top}" />         
                </DataTemplate>
            </ItemsControl.ItemTemplate>


        </ItemsControl>

【问题讨论】：

使用Margin不是更好吗？
一般来说这应该可以。检查您的绑定是否正常（即调试期间输出窗口中没有任何绑定错误）。另一种方法是尝试使用Grid 而不是Canvas 来代替ItemsPanelTemplate，将Grid.Column 和Grid.Row 绑定到所需的值。
我需要使用Canvas，因为我需要将那些按钮或图形元素随机放置在不包含列/行的页面上

标签： c# xaml canvas windows-phone-8 itemscontrol

【解决方案1】：

我为此找到的最佳答案是在您的数据模板中使用 RenderTransform

<ItemsControl x:Name="itemsControl" ItemsSource="{Binding Tiles}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Button Width="{Binding Side}" Height="{Binding Side}" Background="{Binding BgColor}">
<Button.RenderTransform>
<TranslateTransform X={Binding Left} Y ={Binding Top}/>
</Button.RenderTransform>              
</Button>      
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

【讨论】：