Question

如何使用MVVM将Rectangle添加到我的视图？

这是我的观点代码。

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

这是我的视图模型

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

但它引发了一个错误：

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

那么我该如何解决这个问题？

我试着和我一起搜索同样的问题。并使用了对他们有用的解决方案。但错误仍然存在。有人能帮我吗。谢谢。

Answer 1

无法显式修改用作ItemsControl的ItemsPanel的Panel的Children集合。 ItemsControl为Panel生成子元素。

这意味着当您使用Canvas.Children.Add Canvas作为ItemsPanel时，您无法使用ItemsControl。您应该在ItemsControl.ItemsSource属性所绑定的位置添加项目（在您的情况下为ListRectangle）。

使用MVVM将矩形添加到Canvas

1 个答案: