Question

I’m having some difficulties binding my ObservableCollection to canvas.

XAML:

<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible">
    <local:DesignerCanvas x:Name="designerCanvas"  AllowDrop="True">
        <ItemsControl ItemsSource="{Binding Circles}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
        <Button Canvas.Left="452" Canvas.Top="487" Content="Button" Height="23" Name="button1" Width="75" Click="button1_Click" />
    </local:DesignerCanvas>
</ScrollViewer>

Note: DesignerCanvas is just a class derived from Canvas. I’ve overridden the MeasureOverride function to make it resize properly to make the scrollviewer show up.

Code Behind:

public partial class LogicView : UserControl
{
    private ObservableCollection<Shape> circles;
    public ObservableCollection<Shape> Circles 
    {
        get { return circles; }
        set { circles = value; }
    }
    ...

    public void DrawCircle()
    {
        Ellipse ellipse = new Ellipse();

        SolidColorBrush brush = new SolidColorBrush(Brushes.Blue.Color);
        ellipse.Fill = brush;
        ellipse.StrokeThickness = 2;
        ellipse.Stroke = Brushes.Black;

        ellipse.Width = 100;
        ellipse.Height = 100;

        DesignerCanvas.SetLeft(ellipse, 100);
        Circles.Add(ellipse);
    }
}

DrawCircle function adds an ellipse to the ObservableCollection but nothing shows up on the canvas. It seems the binding is not working properly. What could be the issue?

Answer 1

If you are using Caliburn Micro, replacing

ItemsSource="{Binding Circles}" 

to

Name="Circles" 

will solve your problem