I'm into converting my old WPF application into a WPF MVVM pattern. The application has a Canvas as a container for all other child controls. Basically, the canvas will have an Image control which is rendering the live feed from a camera unit. The application also has the functionality to draw different shapes(Ellipse, Rectangle,Line and Freehand) on the Canvas. In the old WPF application, this functionality implementation was quite simple where I had an image control attached to the canvas in the UI itself
//UI for Image Control
<Canvas Name="cnvImage" MouseLeftButtonDown="imgPanel_MouseLeftButtonDown" MouseLeftButtonUp="cnvImage_MouseLeftButtonUp" Width="{Binding ActualWidth, ElementName=imgPanel}" Height="{Binding ActualHeight, ElementName=imgPanel}" >
<Canvas.LayoutTransform>
<ScaleTransform x:Name="cnvScale"/>
</Canvas.LayoutTransform>
<Image Name="imgPanel" MaxHeight="2048" MaxWidth="2448" Stretch="Uniform">
<Image.LayoutTransform>
<ScaleTransform x:Name="imgScale"/>
</Image.LayoutTransform>
</Image>
</Canvas>
//Code Behind
this.imgPanel.Source = (ImageSource)currentRenderBitmap;
Also I in the old WPF application I'm adding the shapes to the specific positions using the following code e.g. Ellipse
Ellipse ellipse = new Ellipse
{
Name = "elemEllipse",
Width = ..,
Height = ..,
Stroke = ..,
Visibility = ..
};
Canvas.SetLeft(Position, drawPoints.X );
Canvas.SetTop(Position, drawPoints.Y);
cnvImage.Children.Add(ellipse);
This similar functionality I need to achieve using the MMVVM pattern. I'm fairly new in MVVM. The challenges I'm facing are.
- How should I create/design the ViewModel and ObservableCollection to bind the Image source property and also at the same time need to add the different shapes to the Canvas drawn on it at exact position.
- How should I handle the different events for canvas such as MouseLeftButtonDown and MouseLeftButtonUp