Capture, Save and Edit Image In Windows Phone 7

In this article we will discuss how to capture, save and edit images In Windows Phone 7.

Here we will continue the previous articles:

In this article we add an image with StudentDetails.
 
Step 1: First we add a column in the Table StudentInfo in the StudentInfo.cs file like this:


[Column(CanBeNull = true)]
public string MyImage
{
     get;
     set;
}

Step 2: Then we will add two controls in our StudentDetails.xaml page like this:

windowsphone1.gif

Here we add a button for adding an image and an Image Control to show the image like this:

<Button Content="Add Image" Height="72" HorizontalAlignment="Left" Margin="0,359,0,0" Name="btnAddImage" VerticalAlignment="Top" Width="200" Click="btnAddImage_Click"
FontSize
="20">
       <Button.Background>
              <ImageBrush ImageSource="/WorkingWithListBoxInWP7;component/Image/Dark%20Wooden%20Background.jpg" />
        </Button.Background>
</Button>
<Image Height="101" HorizontalAlignment="Left" Margin="215,355,0,0" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="200" />

Step 3: Now we will write the code for the "Add Image" Button:

private void btnAddImage_Click(object sender, RoutedEventArgs e)
{
      Show();

private void Show()
{
     CameraCaptureTask picCapture = new CameraCaptureTask();
     picCapture.Completed += new EventHandler<PhotoResult>(picCapture_Completed);
     picCapture.Show();

void picCapture_Completed(object sender, PhotoResult e)
{
     if (e.TaskResult == TaskResult.OK)
     {
          SaveToIsolatedStorage(e.ChosenPhoto, "myImage.jpg");
      } 
}


Here we set the Image Name as "myImage.jpg". Now we will call the function:

private void SaveToIsolatedStorage(Stream imageStream, string fileName)
{
      using (IsolatedStorageFile myIsoStorage = IsolatedStorageFile.GetUserStoreForApplication())
      {
            if (myIsoStorage.FileExists(fileName))
            {
                 myIsoStorage.DeleteFile(fileName);
            } 
            IsolatedStorageFileStream fileStream = myIsoStorage.CreateFile(fileName);
            BitmapImage bitmap = new BitmapImage();
            bitmap.SetSource(imageStream); 
            WriteableBitmap mywb = new WriteableBitmap(bitmap);
            wb.SaveJpeg(fileStream, mywb.PixelWidth, mywb.PixelHeight, 0, 95);
            fileStream.Close();
      }
      this.ReadFromIsolatedStorage("myImage.jpg");
}

Here we will check that the filename "myImage.jpg" exists in the Isolated Storage or not, if it is available it deletes the previous file and creates a new one. After that we read the Isolated Storage file and set it as an Image Source ("myImage.jpg")

private void ReadFromIsolatedStorage(string fileName)
{
      WriteableBitmap bitmap = new WriteableBitmap(200, 200);
      using (IsolatedStorageFile myIsoStorage = IsolatedStorageFile.GetUserStoreForApplication())
      {
           using (IsolatedStorageFileStream fileStream = myIsoStorage.OpenFile(fileName, FileMode.Open, FileAccess.Read))
           { 
                bitmap = PictureDecoder.DecodeJpeg(fileStream);
           }
      }
      this.image1.Source = bitmap;          
}

The output is described in the following.

First we click on "Add Image":

windowsphone2.gif

The following window will be shown:

windowsphone3.gif

The image will be shown like this:

windowsphone4.gif

Step 4: Now we will write the code for the "Add Student" button. Here we save the image:

private void btnAdd_Click(object sender, RoutedEventArgs e)
{
      using ( StudentdataContext StudentDB = new StudentdataContext(strConnectionString))
      {
            if (Action == "Edit" || Action == "EditData")
            {
                 var Student = (from i in StudentDB.GetTable<StudentInfo>()
                                      where i.Extra == parameterValue.ToString()
                                      select i).Single();  
                 Student.FirstName = txtfname.Text.ToString();
                 Student.LastName = txtlastName.Text.ToString();
                 Student.Extra = txtfname.Text.ToString() + " " + txtlastName.Text.ToString();
                 Student.Mobile = txtMobile.Text.ToString();
                 Student.Telephone = txtTelephone.Text.ToString();
                 Student.Email = txtEmail.Text.ToString();
                 Student.MyImage="myImage.jpg";
                 StudentDB.SubmitChanges();
            }
            
else
            {                
                 StudentInfo newStudent = new
StudentInfo
                 {                    
                     Extra = txtfname.Text.ToString() + " " + txtlastName.Text.ToString(),
                     FirstName = txtfname.Text.ToString(),
                     LastName = txtlastName.Text.ToString(),
                     Mobile = txtMobile.Text.ToString(),
                     Telephone = txtTelephone.Text.ToString(),
                     Email = txtEmail.Text.ToString(),
                     MyImage=
"myImage.jpg" 
                 };
                 var a = from b in StudentDB.GetTable<StudentInfo>() select b;
                 foreach (var x in a)
                 {
                     if (x.Extra == txtfname.Text.ToString() + " " + txtlastName.Text.ToString())
                     {
                         MessageBox.Show("This Name is already Exists");
                         txtfname.Text = "";
                         txtlastName.Text = "";
                         txtMobile.Text = "";
                         txtTelephone.Text = "";
                         txtEmail.Text = "";
                         id = x.Id;
                     }
                 }
                 if (txtfname.Text != "")
                 { 
                     StudentDB.Students.InsertOnSubmit(newStudent);
                     StudentDB.SubmitChanges();
                     MessageBox.Show("Add the Student");
                 }   
                 txtfname.Text = "";
                 txtlastName.Text = "";
                 txtMobile.Text = "";
                 txtTelephone.Text = "";
                 txtEmail.Text = "";
             }                  
       }               
       txtfname.Text = "";
       txtlastName.Text = "";
       txtMobile.Text = "";
       txtTelephone.Text = "";
       txtEmail.Text = "";
}


Step 5: Now we will write the code for Edit or Change the Image.

For this first we write code to fetch the Student Details and the image; see:

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

      base.OnNavigatedTo(e);
      parameterValue = NavigationContext.QueryString["parameter"];
      Action = NavigationContext.QueryString["action"]; 
      using (StudentdataContext StudentDB = new StudentdataContext(strConnectionString))
      {
           var a = from b in StudentDB.GetTable<StudentInfo>() where b.Extra == parameterValue.ToString() select b;
           foreach (var x in a)
           {
                 txtfname.Text = x.FirstName;
                 txtlastName.Text = x.LastName;
                 txtMobile.Text = x.Mobile;
                 txtTelephone.Text = x.Telephone;
                 txtEmail.Text = x.Email;                                       
                 WriteableBitmap bitmap = new WriteableBitmap(100, 100);
                 using (IsolatedStorageFile myIsoStorage = IsolatedStorageFile.GetUserStoreForApplication())
                 {
                      using (IsolatedStorageFileStream fileStream = myIsoStorage.OpenFile(x.MyImage, FileMode.Open, FileAccess.Read))
                      {
                          bitmap = PictureDecoder.DecodeJpeg(fileStream);
                       }
                  }
                  this.image1.Source = bitmap;                                                     
           } 
           if (Action == "EditData")
           {
                 btnAdd.Content = "Edit";
                 btnAddImage.Content = "Edit Image";                  
            }
            if (Action == "Edit")
            {
                 btnAdd.Content = "Edit Data";
                 btnAddImage.Content = "Edit Image";                   
            }
      }
}

The Output Will Be


When we double-click on it:

windowsphone5.gif

The Edit page will be shown like this:

windowsphone6.gif

Here we click on the "Edit Image" button and choose the image and then we click on the "Edit Data" button. The following code for the button will be executed:

if (Action == "Edit" || Action == "EditData")
{
      var Student = (from i in StudentDB.GetTable<StudentInfo>()
                            where i.Extra == parameterValue.ToString()
                            select i).Single(); 
      Student.FirstName = txtfname.Text.ToString();
      Student.LastName = txtlastName.Text.ToString();
      Student.Extra = txtfname.Text.ToString() + " " + txtlastName.Text.ToString();
      Student.Mobile = txtMobile.Text.ToString();
      Student.Telephone = txtTelephone.Text.ToString();
      Student.Email = txtEmail.Text.ToString();
      Student.MyImage="myImage.jpg";
      StudentDB.SubmitChanges();
}