使用ItemsControl将按钮绑定到画布Windows Phone的顶部/左侧位置

Question

I am using ItemsControl and have several buttons and place them at a specific location on the canvas. However, the Canvas.Left and Canvas.Top always place all buttons at 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>

Answer 1

The best answer I've found for this is to use a RenderTransform in your datatemplate

<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>