Wednesday, June 13, 2012

Application Bar in Windows Phone

Here would be a brief recap from which what I learned here, and will cover these topics only:

How to: Create an Application Bar in Code for Windows Phone
How to: Change Icon Buttons and Menu Items Dynamically for Windows Phone
How to: Reuse an Application Bar on Multiple Pages in Your Windows Phone Application
How to: Use Different Application Bars in a Single Pivot Control in Your Windows Phone Application

For basic knowledge about Application Bar in Windows Phone here:

Application Bar Overview for Windows Phone

How to: Create an Application Bar in XAML for Windows Phone

How to: Create an Application Bar in Code for Windows Phone
In the top of the code
using Microsoft.Phone.Shell;
In the constructor
ApplicationBar = new ApplicationBar();
ApplicationBar.Mode = ApplicationBarMode.Default;
ApplicationBar.Opacity = 1.0;
ApplicationBar.IsVisible =
true
;
ApplicationBar.IsMenuEnabled =
true;
ApplicationBarMenuItem menuItem1 = new ApplicationBarMenuItem();
menuItem1.Text =
"menu item 1"
;
ApplicationBar.MenuItems.Add(menuItem1);
Handling the Click events
ApplicationBarIconButton button1 = new ApplicationBarIconButton();
button1.IconUri =
new Uri("/Images/YourImage.png"
, UriKind.Relative);
button1.Text =
"button 1"
;
ApplicationBar.Buttons.Add(button1);
button1.Click +=
new
EventHandler(button1_Click);

ApplicationBarMenuItem menuItem1 =
new
ApplicationBarMenuItem();
menuItem1.Text =
"menu item 1"
;
ApplicationBar.MenuItems.Add(menuItem1);
menuItem1.Click +=
new EventHandler(menuItem1_Click);
private void button1_Click(object sender, EventArgs e)
{
MessageBox.Show(
"Button 1 works!"
);
//Do work for your application here.
}

private void menuItem1_Click(object
sender, EventArgs e)
{
MessageBox.Show(
"Menu item 1 works!"
);
//Do work for your application here.
}

To dynamically change the icon buttons
Assume that you had a button in your page named button1 and it has an on click event named button1_Click
private void button1_Click(object sender, EventArgs e)
{
ApplicationBarIconButton btn = (ApplicationBarIconButton)ApplicationBar.Buttons[0];

if (btn.Text == "play"
)
{
btn.Text=
"pause"
;
btn.IconUri =
new Uri("/Images/pause.png"
, UriKind.Relative);
}
else if(btn.Text == "pause"
)
{
btn.Text=
"play"
;
btn.IconUri =
new Uri("/Images/play.png"
, UriKind.Relative);
}
}

How to: Reuse an Application Bar on Multiple Pages in Your Windows Phone Application (create a global Application Bar that can be reused on multiple pages)
In your App.xaml file, In the APPLICATION.RESOURCES element, add your global Application Bar XAML code. The sample code here gives the Application Bar the key GlobalAppBar, but you can give it any key you like.
<Application.Resources>

<shell:ApplicationBar x:Key="GlobalAppBar" IsVisible="True" IsMenuEnabled="True">
...
</shell:ApplicationBar>

</Application.Resources>
In the App.xaml.cs file, Inside the App class, add the handlers for the click events.
private void MenuItem1_Click(object sender, EventArgs e)
{
MessageBox.Show(
"Menu item 1 works!"
);
//Do work for your application here.
}

How to: Use Different Application Bars in a Single Pivot Control in Your Windows Phone Application
First, create different application bars in your App.xaml and its event handlers in your App.xaml.cs.
<Application.Resources>

<shell:ApplicationBar x:Key="GlobalAppBar1" IsVisible="True" IsMenuEnabled="True">
...
</shell:ApplicationBar
>

<shell:ApplicationBar x:Key="GlobalAppBar2" IsVisible="True" IsMenuEnabled="True">
...
</shell:ApplicationBar>

</Application.Resources>
private void GlobalAppBar1MenuItem1_Click(object sender, EventArgs e)
{
MessageBox.Show(
"Menu item 1 works!"
);
//Do work for your application here.
}

private void GlobaalAppBar2MenuItem1_Click(object
sender, EventArgs e)
{
MessageBox.Show(
"Menu item 1 works!"
);
//Do work for your application here.
}
Second, use different application bar in a single Pivot control
using Microsoft.Phone.Shell;




 
private void Pivot_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
switch
(((Pivot)sender).SelectedIndex)
{
case
0:
ApplicationBar = ((ApplicationBar)Application.Current.Resources[
"GlobalAppBar1"
]);
break
;

case
1:
ApplicationBar = ((ApplicationBar)Application.Current.Resources[
"GlobalAppBar2"
]);
break
;
}
}

No comments:

Post a Comment