使用ItemsControl將按鈕綁定到畫布Windows Phone的頂部/左側位置

Question

我正在使用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>

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