Absolute WPF Positioning

Question

Possible duplicate:
How to associate a canvas with a list of rectangles

Canvas in WPF use absolute positions right? I have a sitatution where I have rectangles on the canvas and they behave as if they fit on the vertical panel of the stack.

those. I put the rectangle at 0.0 and the next at 0.0, but it appears under the first.

I know, for example, that this works as I expected, i.e. the rectangles will overlap as expected

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

But my situation is a little more complicated than

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

My code has an element control and it is tied to a list of shapes. These forms are attached to such objects,

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

But all forms have coordinates 0,0, but they still line up one after another vertically.

Any ideas?

I think I'm getting it now. The controls themselves behave like a stack panel. Any alternatives?

Answer 1

You are correct that Canvas uses absolute positioning. In your example, you specified the top and left positions of each rectangle in the Canvas, but you lack the Width and Height properties on the Rectangles, so they may not display as you want.

The following example shows two overlapping rectangles.

 <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

Adding ItemsControl as the only child of the Canvas is not what you want. This should be the ItemsControl panel:

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

Further, the elements will be wrapped, the attached properties will be ignored, if you set them in a DataTemplate, this should be done as follows:

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