Sample Code
,The sample code for this section is located in the ApplicationBarView and ApplicationBarViewModel classes in the downloadable sample code. This sample presents a simple interface for demonstrating various application bar properties. The following is a list of items demonstrated in the sample:
Data binding AppBar menu items and buttons to viewmodel commands
Modifying the foreground, background, and opacity of the application bar via data binding
Using a toggle button within the AppBar to modify the ApplicationBarIconButton’s icon, text, and behavior based on a toggle state value
Using a toggle menu item in the AppBar to modify the ApplicationBarMenuItem’s text and behavior based on a toggle state value
Using the menu item’s Click event
Using a hyperlink button and menu item to navigate to internal and external URIs
The ApplicationBarViewModel class contains several commands that are used by the buttons and menu items in the view. These commands modify the state of the viewmodel, which in turn changes the application bar, system tray, and layout within the view.
The viewmodel’s Colors property allows you to experiment with the background and foreground colors of the application bar. The colors collection is populated using reflection to obtain the Color values from the System.Windows.Media.Colors class, as shown:
static IEnumerable<Color> GetColors()
{
/* Use reflection to get known colors. */
Type colorsType = typeof(Colors);
PropertyInfo[] propertyInfos = colorsType.GetProperties(
BindingFlags.Public | BindingFlags.Static);
List<Color> knownColors = new List<Color>();
foreach (PropertyInfo propertyInfo in propertyInfos)
{
try
{
Color color = (Color)propertyInfo.GetValue(null, null);
knownColors.Add(color);
}
catch (Exception ex)
{
continue;
}
}
return knownColors;
}
public void AddKnownColor(Color color)
{
colors.Add(color);
}
The AddKnownColor method is used by the view to provide the viewmodel with some default colors, as shown in the following excerpt:
public ApplicationBarView()
{
InitializeComponent();
ApplicationBarViewModel viewModel = new ApplicationBarViewModel();
DataContext = viewModel;
/* Let the viewmodel know what the foreground
* and background colors are for the application bar. */
Color foregroundColor = ((SolidColorBrush)Foreground).Color;
Color backgroundColor = (Color)Resources["PhoneChromeColor"];
viewModel.AddKnownColor(foregroundColor);
viewModel.AddKnownColor(backgroundColor);
viewModel.BackgroundColor = backgroundColor;
viewModel.ForegroundColor = foregroundColor;
}
The AppBar is instantiated in the view via XAML (see Listing 8.1). Data bindings are used to set various properties of the AppBar.
The first AppBarIconButton executes the viewmodel’s SimpleCommand.
The AppBarToggleButton uses the Muted property of the viewmodel to determine which command is active, and which text and icon to display. When the viewmodel’s Muted property is false, it indicates that the button is not toggled, and Text1 and Icon1Uri are displayed, and Command1 becomes active. Conversely, when Muted is true it indicates that the button is toggled, and Text2 and Icon2Uri are displayed. A second command can be specified if necessary. If a secondary property is not specified, then the control falls back to the primary (non-toggled property). For example, if Text2 is not specified, and the Toggled property is true, then Text1 is used.
AppBarToggleMenuItem works in the same manner as AppBarToggleButton but lacks the icon URI properties as the built-in application bar does not support icons in menu items.
An AppBarHyperlinkButton is used to navigate to an external URL. The AppBarHyperlinkButton uses a WebBrowserTask to launch the phone’s built-in web browser. The WebBrowserTask is discussed further in Chapter 14, “Leveraging Built-In Apps via Launchers and Choosers.”
An AppBarHyperlinkMenuItem is used to navigate to a relative URL to the main page of the phone app.
LISTING 8.1. ApplicationBarView.xaml AppBar
<u:AppBar IsVisible="{Binding ApplicationBarVisible}"
IsMenuEnabled="{Binding MenuEnabled}"
BarOpacity="{Binding BarOpacity}"
BackgroundColor="{Binding BackgroundColor}"
ForegroundColor="{Binding ForegroundColor}"
Mode="{Binding Mode}">
<u:AppBarIconButton
Command="{Binding SimpleCommand}"
CommandParameter="Rewind"
Text="Rewind"
IconUri="/ControlExamples/MediaView/Images/Rewind.png"
Visibility="{Binding FirstButtonVisible, Mode=TwoWay,
Converter={StaticResource BooleanToVisibilityConverter}}"/>
<u:AppBarToggleButton
x:Name="button_Mute"
Command1="{Binding ToggleMuteCommand}"
Text1="Mute"
Icon1Uri="/ControlExamples/MediaView/Images/Speaker.png"
Text2="Un-Mute"
Icon2Uri="/ControlExamples/MediaView/Images/Mute.png"
Toggled="{Binding Muted}" />
<u:AppBarHyperlinkButton
IconUri="/ControlExamples/Images/appbar.upload.rest.png"
Text="blog"
NavigateUri="http://danielvaughan.org" />
<u:AppBar.MenuItems>
<u:AppBarMenuItem Text="MenuItem with Click Handler"
Click="AppBarMenuItem_Click" />
<u:AppBarMenuItem Text="MenuItem with Command"
Command="{Binding SimpleCommand}"
CommandParameter="This custom AppBar rocks!" />
<u:AppBarMenuItem Text="FullScreen"
Command="{Binding FullScreenCommand}"
CommandParameter="true" />
<u:AppBarToggleMenuItem
Command1="{Binding ToggleMuteCommand}"
Text1="Mute"
Text2="Unmute"
Toggled="{Binding Muted}" />
<u:AppBarHyperlinkMenuItem Text="Main Page"
NavigateUri="/MainPage.xaml" />
</u:AppBar.MenuItems>
</u:AppBar>
The ApplicationBarView page uses a CheckBox to toggle the AppBar.IsMenuEnabled property, a Slider for the AppBar.BarOpacity property, and two Windows Phone Toolkit ListPicker controls to change the background and foreground colors of the application bar (see Figure 8.2).
Although AppBar menu items and icon buttons support ICommands, they also still support Click events. Tapping the first menu item causes an event hander to be called in the code-beside:
void AppBarMenuItem_Click(object sender, System.EventArgs e)
{
ViewModel.Message = "Click event raised.";
}
Note
The Click event is raised regardless of whether a command has been specified for the button or menu item.
Disabling the Application Bar Menu
The view contains a check box that is bound to the viewmodel’s MenuEnabled property:
<CheckBox IsChecked="{Binding MenuEnabled, Mode=TwoWay}"
Content="Application Bar Menu Enabled" />
The AppBar IsMenuEnabled property is also bound to the viewmodel’s MenuEnabled property, so that when the check box is checked or unchecked, the menu is enabled or disabled, respectively. By unchecking the check box, the application bar will not expand the menu when the expand button is tapped.
Minimizing the Icon Button Tray
Recall that the Mode property is used to minimize the application bar so that just the bar’s ellipsis is shown.
In the sample, a custom IValueConverter called ApplicationBarModeToBooleanConverter converts the viewmodel’s Mode property, which is of type ApplicationBarMode, to a Boolean value (see Listing 8.2).
LISTING 8.2. ApplicationBarModeToBooleanConverter Class
public class ApplicationBarModeToBooleanConverter : IValueConverter
{
public object Convert(
object value, Type targetType, object parameter, CultureInfo culture)
{
ApplicationBarMode mode = (ApplicationBarMode)value;
return mode != ApplicationBarMode.Default;
}
public object ConvertBack(
object value, Type targetType, object parameter, CultureInfo culture)
{
bool minimized = (bool)value;
return minimized ? ApplicationBarMode.Minimized : ApplicationBarMode.Default;
}
}
The IValueConverter is defined as a page level resource.
The view contains a minimized CheckBox that is bound to the mode property, as shown:
<CheckBox IsChecked="{Binding Mode,
Converter={StaticResource ApplicationBarModeToBooleanConverter}, Mode=TwoWay}"
Content="minimized" />
The custom AppBar allows you to bind the Mode property of the application bar, which is demonstrated in the sample using the minimized button (see Figure 8.3).
Changing the Opacity of the Application Bar
To change the opacity of the application bar move the application bar opacity slider. The Slider is bound to the viewmodel’s BarOpacity property, as shown:
<Slider Value="{Binding BarOpacity, Mode=TwoWay}"
Maximum="1"
LargeChange=".1" />
Changing the viewmodel’s BarOpacity causes the AppBar.BarOpacity to be updated. Positioning the Slider all the way to the left causes the application bar background to be completely transparent.