Avalonia 11中ItemsControl绑定Canvas.Left/Top不生效问题求助

问题描述 #

我正在使用Avalonia 11，尝试通过ItemsControl在Canvas上绘制图形。问题在于Canvas.Left和Canvas.Top属性未被正确应用。

视图代码 #

<Canvas Width="{Binding Width}" Height="{Binding Height}" MaxWidth="200" MaxHeight="100" Background="Yellow" Margin="3">
    <Rectangle Fill="Blue" Height="10" Width="10" Canvas.Left="50" Canvas.Top="50"/>
    <ItemsControl ItemsSource="{Binding Tiles}" >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Fill="Green" Height="{Binding Size}" Width="{Binding Size}" 
                           Canvas.Left="{Binding TopY}" Canvas.Top="{Binding TopY}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

视图模型代码 #

public record CanvasTile(int Size, int TopX, int TopY);

public ObservableCollection<CanvasTile> Tiles { get; }

Tiles.Add(new CanvasTile(TILE_SIZE, 1 * TILE_SIZE, 1 * TILE_SIZE));
Tiles.Add(new CanvasTile(TILE_SIZE, 2 * TILE_SIZE, 2 * TILE_SIZE));
Tiles.Add(new CanvasTile(TILE_SIZE, 4 * TILE_SIZE, 4 * TILE_SIZE));

调试信息 #

实际结果 #

通过ItemsControl生成的绿色矩形未处于正确位置，而硬编码位置的蓝色矩形显示正常。

预期结果 #

已通过硬编码实现预期效果：

解决方案 #

问题核心在于ItemsControl的默认容器：默认情况下ItemsControl使用StackPanel作为子元素的容器，而Canvas.Left/Canvas.Top是Canvas的附加属性，只有当元素直接作为Canvas的子元素时才会生效。StackPanel内部的元素无法被Canvas识别位置属性，因此导致偏移失效。

修正步骤 #

1. 为ItemsControl指定ItemsPanel为Canvas，让子元素直接成为Canvas的子元素：
2. 修正绑定笔误：Canvas.Left应绑定TopX而非TopY

修改后的视图代码：

<Canvas Width="{Binding Width}" Height="{Binding Height}" MaxWidth="200" MaxHeight="100" Background="Yellow" Margin="3">
    <Rectangle Fill="Blue" Height="10" Width="10" Canvas.Left="50" Canvas.Top="50"/>
    <ItemsControl ItemsSource="{Binding Tiles}" >
        <!-- 替换默认容器为Canvas -->
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Rectangle Fill="Green" Height="{Binding Size}" Width="{Binding Size}" 
                           Canvas.Left="{Binding TopX}" Canvas.Top="{Binding TopY}"/>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Canvas>

修改后，绿色矩形会按照绑定的TopX/TopY值正确定位在Canvas上，与预期效果一致。

内容的提问来源于stack exchange，提问作者Cedric Royer-Bertrand