WPF绝对定位[重复]

Question

可能重复：
How to bind a canvas to a list of rectangles

WPF 中的画布使用绝对位置对吗？我有一个场景，我在画布上有矩形，它们的行为就像它们被放置在垂直堆栈面板上一样。

即我在 0,0 处放置一个矩形，在 0,0 处放置下一个矩形，但它出现在第一个矩形下方。

例如，我知道这可以按预期工作，即矩形将按预期重叠，

<Canvas>
    <Rectangle Canvas.Top="50" Canvas.Left="50" Width="50" Height="50"  Fill="AliceBlue" />
    <Rectangle Canvas.Top="60" Canvas.Left="60" Width="50" Height="50"  Fill="Pink" />
</Canvas>

但我的情况比这复杂一点，

<Canvas Name="DrawingCanvas" Grid.Column="0" Grid.Row="0" Background="{TemplateBinding Background}" Margin="0,30,0,0">
    <ItemsControl Name="LineContainer" ItemsSource="{Binding Shapes}">
        <ItemsControl.Resources>
            <DataTemplate DataType="{x:Type Models1:Rectangle}">
                <Rectangle Width="30" Height="30" Fill="Aquamarine" Canvas.Left="{Binding X}" Canvas.Top="{Binding Y}" >
                    <Rectangle.LayoutTransform>
                        <RotateTransform Angle="{Binding Angle}"></RotateTransform>
                     </Rectangle.LayoutTransform>
                 </Rectangle>
             </DataTemplate>
         </ItemsControl.Resources>
     </ItemsControl>
 </Canvas>

我的代码中有一个项目控件，它绑定到一个形状列表。这些形状像这样绑定到对象上，

public class Rectangle : IShape, INotifyPropertyChanged
{
    private double angle;

    public string Text { get; set; }
    public double X { get; set; }
    public double Y { get; set; }
    public double Angle {
        get
        {
            return angle;
        }
        set
        {
            if (angle != value)
            {
                angle = value;
                if (PropertyChanged != null)
                {
                    PropertyChanged(this, new PropertyChangedEventArgs("Angle"));
                }
            }
        }
    }
    public Point Position { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
}

但所有形状的坐标都是0,0，但它们仍然是一个接一个地垂直排列。

有什么想法吗？

我想我现在明白了。项目控件本身使其表现得像一个堆栈面板。有其他选择吗？

Answer 1

Canvas 使用绝对定位是正确的。在您的示例中，您已经指定了 Canvas 中每个矩形的顶部和左侧位置，但缺少 Rectangle 上的 Width 和 Height 属性，这就是它们可能无法按您想要的方式显示的原因。

下面的例子显示了两个重叠的矩形。

<Canvas>
    <Rectangle Canvas.Top="50" Canvas.Left="50" Width="50" Height="50"  Fill="AliceBlue" />
    <Rectangle Canvas.Top="60" Canvas.Left="60" Width="50" Height="50"  Fill="Pink" />
</Canvas>

Answer 2

添加 ItemsControl 作为 Canvas 的唯一子项不是您想要的。应该是ItemsControl的面板：

<ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
        <Canvas Grid.Column="0" Grid.Row="0" Background="{TemplateBinding Background}" Margin="0,30,0,0">
    </ItemsPanelTemplate>
</ItemsControl.ItemsPanel>

进一步包装项目，如果您在 DataTemplate 中设置附加属性，它们将被忽略，必须这样做：

 <ItemsControl.ItemContainerStyle>
     <Style TargetType="{x:Type ContentPresenter}">
         <Setter Property="Canvas.Left" Value="{Binding X}"/>
         <Setter Property="Canvas.Top" Value="{Binding Y}"/>
     </Style>
 </ItemsControl.ItemContainerStyle>