After long time, I got
some good quality work in this project. Today I used InkCanvas in WPF-MVVM.
Then I saved the shapes or drawing drawn within, to database.
Saving anything to database
is OK, but the issues is – how do you get the byte array from InkCanvas
Strokes? Een the major issue is how do get Strokes from InkCanvas?
Below article explains
InkCanvas binding in WPF – MVVM. Alright then, to start with create a WPF
project. Have ViewModel folder added in it; to have logic separation from
Views. So final Structure of you application will be as follows –
Add InkCanvas in your XAML
file and Ellipse in it to have drawing within it as written below –
<Window x:Class="StokesCollectionInMVVM.MainWindow"
Title="MainWindow" Height="350" Width="525">
<Grid>
<InkCanvas Background="Aqua" Strokes="{Binding StrokesEllipse}">
<Ellipse Height="100" HorizontalAlignment="Left" Margin="116,100,0,0" Name="ellipse1" Stroke="Black" VerticalAlignment="Top" Width="200" />
</InkCanvas>
</Grid>
</Window>
The view model code will
be as follows –
Class variables and View
model class definition is as follows –
public
class MainWindowsViewModel
: INotifyPropertyChanged
{
#region
INotifyPropertyChanged implementation
public event PropertyChangedEventHandler
PropertyChanged;
private
void RaisePropertyChanged(string propertyName)
{
if
(PropertyChanged != null)
{
PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
#endregion
#region Class
variables
private
StrokeCollection _strokesEllipse = null;
#endregion
In constructor – [Note –
Code to save byte array in database and retrieve it from database is skipped]
public
MainWindowsViewModel()
{
//to
autopopulate saved drawing on UI -
//read
byte array from say - database and store in EllipseDrawing property
if
(EllipseDrawing != null)
{
using
(var memoryStream = new
MemoryStream(EllipseDrawing))
{
_strokesEllipse = new StrokeCollection(memoryStream);
}
}
else
{
_strokesEllipse = new StrokeCollection();
}
(_strokesEllipse as INotifyCollectionChanged).CollectionChanged
+= new NotifyCollectionChangedEventHandler(MainWindowsViewModel_CollectionChanged);
}
The
handler method of this event is as follows – [Note – Code to save byte array in database
and retrieve it from database is skipped]