Capture, Save and Edit Image In Windows Phone 7

Here we will continue the previous articles:

• Working With ListBox In Windows Phone 7
• Working With ListBox In Windows Phone (Edit Data In the ListBox) : Part 2
• Working With ListBox In Windows Phone (Send SMS, Email and Make a Call) : Part 3

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:



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



The following window will be shown:



The image will be shown like this:



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:



The Edit page will be shown like this:



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