Add rectangle to Canvas using MVVM

Question

How do i add Rectangle to my View using MVVM?

This is the code for my view.

<Grid>
            <Image  x:Name="img"  Source="{Binding ImagePath, Source={x:Static vm:DrawingVM.instance}, Converter={StaticResource nullImageConverter}}" Stretch="None" >
            </Image>

            <ItemsControl ItemsSource="{Binding ListRectangle, Source={x:Static vm:DrawingVM.instance}}" >

                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <Canvas Background="Transparent"  x:Name="cnvas" Width="{Binding ElementName=img, Path=ActualWidth}" 
                        Height="{Binding ElementName=img,Path=ActualHeight}"
                        LayoutTransform="{Binding ElementName=img, Path=LayoutTransform}" >
                            <i:Interaction.Triggers>
                                <i:EventTrigger EventName="MouseDown">
                                    <!--<command:EventToCommand CommandParameter="{Binding ElementName=cnvas}" Command="{Binding MouseDownCommand, Source={x:Static vm:DrawingVM.instance}}" PassEventArgsToCommand="True" />-->
                                    <ei:CallMethodAction MethodName="MouseDownEvente" TargetObject="{Binding Source={x:Static vm:DrawingVM.instance}}" />
                                </i:EventTrigger>

                            </i:Interaction.Triggers>
                        </Canvas>
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemContainerStyle>
                    <Style TargetType="ContentPresenter">
                        <Setter Property="Canvas.Left" Value="{Binding X}"/>
                        <Setter Property="Canvas.Top" Value="{Binding Y}"/>
                    </Style>
                </ItemsControl.ItemContainerStyle>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Rectangle Width="{Binding Width}" Height="{Binding Height}" Stroke="Blue"  Fill="Transparent" />
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </Grid>

and this is my View Model

Canvas canvas = new Canvas();
        public void MouseDownEvente(object s, MouseButtonEventArgs e)
        {
            try
            {
                if (s == null) return;
                canvas = s as Canvas;
                if (canvas == null) return;

                startPoint = e.GetPosition(canvas);

                // Remove the drawn rectanglke if any.
                // At a time only one rectangle should be there
                //if (rectSelectArea != null)
                //    canvas.Children.Remove(rectSelectArea);

                // Initialize the rectangle.
                // Set border color and width
                rectSelectArea = new Rectangle
                {
                    Stroke = Brushes.Blue,
                    StrokeThickness = 2,
                    Fill = Brushes.Transparent,
                };

                Canvas.SetLeft(rectSelectArea, startPoint.X);
                Canvas.SetTop(rectSelectArea, startPoint.X);
                canvas.Children.Add(rectSelectArea);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
                Console.WriteLine(ex.StackTrace);
                throw ex;
            }
        }

But its throwing an error:

Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel.

So how do i solve this?

I tried searching the same problem with mine. And used the solution that worked to them. But the error still persist. Can someone help me. Thank you.

Draw a selection rectangle on top of the ItemsControl. Having it in the ItemsPanel won't work. — Clemens, Dec 05 '17 at 06:46

score 1 · Accepted Answer · answered Dec 05 '17 at 03:12

1

Cannot explicitly modify Children collection of Panel used as ItemsPanel for ItemsControl. ItemsControl generates child elements for Panel.

This means that you cannot use Canvas.Children.Add when you use Canvas as an ItemsPanel for an ItemsControl. You should add items on where the ItemsControl.ItemsSource property is bound to (in your case ListRectangle).

answered Dec 05 '17 at 03:12

Jan Paolo Go

5,842
4
22
50

So that's the proper way to update the canvas? thank you – bob palok Dec 05 '17 at 03:54
That's the proper way if you use Canvas as an ItemsPanelTemplate of an ItemsControl. If you use Canvas as it is, then you can use its Children.Add. – Jan Paolo Go Dec 05 '17 at 16:48

Add rectangle to Canvas using MVVM

1 Answers1