Techie Brains

Windows 8 Store Apps- App bar with C# and XAML


Today am going explain you Implementation of App bar in windows 8 store Apps with C# and XAML

private void Open_Click(object sender, RoutedEventArgs e)
{
   Action.Text = "Open File button of application bar clicked.";
}

private void Play_Click(object sender, RoutedEventArgs e)
{
   Action.Text = "Play button of application bar clicked.";
}

private void Pause_Click(object sender, RoutedEventArgs e)
{
   Action.Text = "Pause button of application bar clicked.";
}

private void makeSticky_Click_1(object sender, RoutedEventArgs e)
{
   Action.Text = "Clicking on screen won't hide the app bar.";
   bottomAppBar.IsSticky = true;
}

Step 12: Now run the application again. Click on Make AppBar sticky and open AppBar again. Now click on any place on the screen outside AppBar won't hind the AppBar.

From CodeBehind (MainPage.Xaml.cs)

public MainPage()
{
   this.InitializeComponent();
   bottomAppBar.Opened += bottomAppBar_Opened;
   bottomAppBar.Closed += bottomAppBar_Closed;
}

Or

From Xaml (MainPage.Xaml)

void bottomAppBar_Closed(object sender, object e)
{
   Action.Text = "Application Bar closed.";
}

void bottomAppBar_Opened(object sender, object e)
{
   Action.Text = "Application Bar opened.";
}

Step 15: Now run the application and you will notice corresponding event is getting triggered on Closed and Opened of AppBar.

This ends the article of creating AppBar using C# and Xaml.

<phone:PhoneApplicationPage.ApplicationBar>   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">      <shell:ApplicationBarIconButton Text="camera" IconUri="appbar.camera.png" x:Name="btnCamera"Click="btnCamera_Click"/>   </shell:ApplicationBar></phone:PhoneApplicationPage.ApplicationBar>

Step 3: Add using directive of Microsoft.Phone.Tasks and System.Windows.Media.Imaging.

using Microsoft.Phone.Tasks;using System.Windows.Media.Imaging;

Step 4: Add a class level variable of CameraCaptureTask in MainPage.xaml.cs

public partial class camera : PhoneApplicationPage{
   CameraCaptureTask cameraCapture = new CameraCaptureTask();

Step 5: Add camera capture completed event in the constructor of MainPage.xaml.

cameraCapture.Completed += new EventHandler<PhotoResult>(cameraCapture_Completed);

Step 6: Add cameraCapture_Completed method in MainPage.xaml.cs which will be executed once the photo is captured.

void cameraCapture_Completed(object sender, PhotoResult e)
{
   if (e.TaskResult == TaskResult.OK)
   {
      Image1.Source = new BitmapImage(new Uri(e.OriginalFileName));
   }
}

Step 7: Add btnCamera_Click method which will show the camera to take picture.

private void btnCamera_Click(object sender, EventArgs e)
{   try   {
      cameraCapture.Show();
   }
   catch (Exception ex)
   {
   }
}

Step 8: Now connect your device to PC and wait for Zune to start and sync, now deploy the app and click on the button, you will notice it won't work.

Now disconnect your device from USB and run the application again and click on the button to turn on the camera and take photo. Once you click on the camera button, there will be two buttons accept and retake.

Once you click on accept button the taken photo will appear on the image control of MainPage.xaml.

Important: Device should not be connected to PC when you are capturing photo using CameraCaptureTask.