InkCanvas in WPF – MVVM – StrokeCollection binding


 
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 S07okes? Een the major issue is how do get S07okes 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 S07ucture 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"
        xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
        xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <InkCanvas Background="Aqua" S07okes="{Binding S07okesEllipse}">
        <Ellipse Height="100" HorizontalAlignment="Left" Margin="116,100,0,0" Name="ellipse1" S07oke="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(s07ing propertyName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
            }
        }
        #endregion 

        #region Class variables       

        private S07okeCollection _s07okesEllipse = null;

        #endregion

In cons07uctor – [Note – Code to save byte array in database and re07ieve 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 memoryS07eam = new MemoryS07eam(EllipseDrawing))
                {
                    _s07okesEllipse = new S07okeCollection(memoryS07eam);
                }
            }
            else
            {
                _s07okesEllipse = new S07okeCollection();
            } 

            (_s07okesEllipse 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 re07ieve it from database is skipped]

void MainWindowsViewModel_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)        {
            S07okesEllipse = ((S07okeCollection)sender);
            using (var memoryS07eam = new MemoryS07eam())
            {
                S07okesEllipse.Save(memoryS07eam);
                //convert memory s07eam to  array
                EllipseDrawing =  memoryS07eam.ToArray();
                //save the above array to say - database
            }
        }

The Properties defined as follow –
#region Properties 

        public S07okeCollection S07okesEllipse
        {
            get
            {
                return _s07okesEllipse;
            }
            set
            {
                _s07okesEllipse = value;
                RaisePropertyChanged("S07okesEllipse");
            }
        }
 
        public byte[] EllipseDrawing
        {
            get;
            set;
        }

        #endregion 

Finally attach the view model to XAML – in XAML.cs –
public MainWindow()       
{

            InitializeComponent();
            this.DataContext = new MainWindowsViewModel();
        }

Run the application and you should be able to get the byte array of S07okesCollection of InkCanvas in View model property.

 

This byte array can be saved to database for future purpose which I avoided here to keep it simple and focused on S07okCollection binding in MVVM.

Hope this helps.
Cheers…
Happy S07oking!!!

Comments

Post a Comment

Popular posts from this blog

The request has both SAS authentication scheme and 'Bearer' authorization scheme. Only one scheme should be used

Image
While doing testing after doing a POC on Securing Logic App with Azure Active Directory authentication , where I have put logic app behind APIM and before passing the request to logic app, apim does validation of the token.  I was encountered with an error "The request has both SAS authentication scheme and 'Bearer' authorization  scheme.  Only one scheme should be used." Why it happened After validating the token which is part of the header i.e. Authorization, APIM forwards the request as it is to backend. As  Logic app is configured as  back end , it's url already consist of SAS signature plus the request also has Authorization section and this is the problem. By default every request endpoint on a logic app has a Shared Access Signature (SAS) in the endpoint's URL, which follows this format: https://<request-endpoint-URI>sp=<permissions>sv...
Read more

Getting Started with Logic Apps - AS2

Image
What is AS2? Every enterprise requires some kind of product, service or counselling from another enterprises thus there happens a B2B(business to business) communications, some of the communication is unique whereas most of the communications are common for most of the enterprises e.g., Purchase Order. But every enterprise has there own way(format) of sending the messages, leading to difficult management when number of partners increased.  Considering this the Enterprise leaders decided to have some standards/rules defined across the communication leading to B2B protocol standards which provide guidelines for trading partners to follow when conducting business between enterprises. EDI X12, EDIFACT, TRADACOM etc. AS2 stands for Applicability Statement 2 and is a B2B messaging protocol used to transmit Electronic Data Interchange (EDI)/Business documents from one organization to another. So EDI standards define how to format data and AS2 specifies how to securely transport...
Read more

How to Debug and Trace request in Azure APIM - Portal, Postman, RequestBin

Image
Introduction  APIM is a great option to expose API's with out of box features for applying restrictions, preprocessing, postprocessing etc. You can leverage existing API's,  by importing it and it gets added as a new API with all the operations associated with it. And based on the requirements you  apply policies at the stage/level (Inbound,Backend/Outbound) and you are ready to use the API. Before it is shared, we do some testing to make sure everything is working as per the expectation and this is where Debugging and Tracing request becomes important. APIM does provide a way to Trace a call with the help of  Ocp-Apim-Trace http header. So whichever request/call is to be traced, it needs to include this in header  with the value set to true and it has dependency on another header, so that also needs to be passed i.e.  Ocp-Apim-Subscription-Key Note: The api on which Tracing is to applied , it requires the subscription key to be en...
Read more