Logo
CAR REVIEW
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
PREGNANCY
 
 
Windows Phone

Windows Phone 8 : Phone-Specific Design (part 1) - The ApplicationBar in Blend

4/30/2013 4:49:56 PM

Although designing an application using Blend should be similar whether you are building a traditional XAML application or a Windows Phone application, some things are applicable only to the phone. These include the ApplicationBar, the Panorama control, the Pivot control, and launching the emulator.

1. The ApplicationBar in Blend

Although having a user interface that compels users to move, swipe, and pan their way to getting the most from your application is nice, sometimes users need simple operations. This is where the ApplicationBar comes in. The ApplicationBar is a standard part of many applications. A mix of a menu and a toolbar, the ApplicationBar can hold both icons (like a toolbar) and menu items. The ApplicationBar starts in a minimized (or closed) state and can be opened by the user to reveal more information, as shown in Figure 1.

Figure 1. ApplicationBar explained

Image

By default, the ApplicationBar takes up a small portion of the user interface (labeled #1 in Figure 1). On the ApplicationBar are icons that can perform certain tasks. In this mode only the icons are visible; the menu items are not. You can see the icons in the ApplicationBar (#2). To the right of the icons is an ellipse (#3) that alerts the user that pressing it will open the ApplicationBar (#4). In this open view, the menu items are shown below the icons (#5). Finally, you should notice that, when opened, the icons have text associated with them (this is not visible when closed but is shown when the application bar is opened, as shown in #6). In this example, all the text is lowercase. The ApplicationBar forces any text in the menu items or icon text to be lowercase (to preserve the Metro-style guide).

You can add an ApplicationBar to a XAML file with the context menu on the PhoneApplicationPage element in the Objects and Timeline panel, as shown in Figure 2.

Figure 2. Adding an ApplicationBar

Image

This adds the bar to your application as just another part of your object tree. From that point, you can use the context menu to add both icons and menu items, as shown in Figure 3.

Figure 3. Adding items to the ApplicationBar

Image

Adding an ApplicationBarIconButton creates the icons you see on the bar (whether closed or opened). Blend supports a number of built-in icons you can choose, or you can supply your own. With an ApplicationBarIconButton selected in the Objects and Timeline panel, you can use the drop-down to pick an icon to use for your application, as shown in Figure 4.

Figure 4. Selecting a built-in icon for an ApplicationBar icon

Image

Selecting a built-in icon will add that icon to your project (in an Icons folder). You can simply supply your own IconUri to point to an icon of your choosing (located in your project). The built-in icons are useful, but be careful not to reuse a built-in icon for a use that is not natural. It will confuse users if you reuse an icon that is commonly used for some other function.

Typically, these should follow the Metro style and be monochrome (for example, white on black or black on white) in the PNG format. If you choose white with PNG transparency, Windows Phone will change your icons to black on white when the user switches his theme to a light theme. Otherwise, you will need to modify the icon at runtime manually.

Other -----------------
- Windows Phone 7 : AlienShooter Enhancements (part 2) - Tombstone Support, Particle System
- Windows Phone 7 : AlienShooter Enhancements (part 1) - Load and Save Game State
- Windows Phone 7 Programming Model : Application Execution Model
- Windows Phone 7 Programming Model : Bing Maps Control
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 4) - Working with Behaviors
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 3) - Creating Animations
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 2) - Brushes
- Windows Phone 8 : Designing for the Phone - Blend Basics (part 1) - Layout
- Windows Phone 8 : Designing for the Phone - Microsoft Expression Blend
- Windows Phone 7 Programming Model : Asynchronous Programming - Background Threads
- Windows Phone 8 : Designing for the Phone - Deciding on an Application Paradigm
- Windows Phone 8 : Designing for the Phone - The Third Screen
- Windows Phone 7 Programming Model : Web Browser Control
- Windows Phone 7 Programming Model : Tasks
- Windows Phone 7 Programming Model : Application Data Persistence
- Windows Phone 7 Programming Model : Device Information
- iphone Programming : Mixing OpenGL ES and UIKit, Rendering Confetti, Fireworks, and More: Point Sprites
- iphone Programming : Animation with Sprite Sheets, Image Composition and a Taste of Multitexturing
- XNA Game Studio 3.0 : Creating Game Components - Adding Game Sounds
- Iphone Application : Using Gesture Recognizers (part 4)
 
 
Most view of day
- Microsoft OneNore 2010 : Housecleaning in OneNote - Backing Up Notebooks Manually, Choosing How to Back Up Notebooks
- Designing and Configuring Unified Messaging in Exchange Server 2007 : Monitoring and Troubleshooting Unified Messaging (part 3) - Event Logs
- Windows Phone 8 : Configuring Basic Device Settings - Passwords and Screen Timeouts (part 4) - Disabling a Password
- Microsoft Excel 2010 : Inserting Blank Rows (part 1) - Separating Subtotaled Rows for Print
- Using Application Deployment Tools : Deploying Applications Using RDS (part 1) - Deploying RemoteApp Applications
- Microsoft Excel 2010 : Protecting and Securing a Workbook - Setting Privacy Options - Set Parental Controls for Online Research
- Zero Touch Installations : Creating and Capturing a Reference Image (part 3) - Advertise the Reference Image Task Sequence, Run the Reference Image Task Sequence
- Administering an Exchange Server 2013 Environment (part 7) - Understanding Journaling
- Windows Server 2008 R2 high-availability and recovery features : Installing and Administering Failover Clustering (part 3) - Connecting cluster nodes to shared storage
- Microsoft Word 2010 : Adding Graphics to Your Documents - Drawing Shapes in Word (part 1) - Drawing an AutoShape
Top 10
- Windows Phone 8 : Scheduled Tasks - Scheduled Task API Limitations
- Windows Phone 8 : Scheduled Tasks - Updating Tiles Using a Scheduled Task Agent
- Windows Phone 8 : Scheduled Tasks - To-Do List Scheduled Task Sample (part 5) - Editing an Existing To-Do Item
- Windows Phone 8 : Scheduled Tasks - To-Do List Scheduled Task Sample (part 4) - Creating the To-Do Item Shell Tile, Saving a To-Do Item
- Windows Phone 8 : Scheduled Tasks - To-Do List Scheduled Task Sample (part 3) - Debugging Scheduled Tasks
- Windows Phone 8 : Scheduled Tasks - To-Do List Scheduled Task Sample (part 2) - TodoService, TodoItemViewModel
- Windows Phone 8 : Scheduled Tasks - To-Do List Scheduled Task Sample (part 1) - TodoItem,TodoDataContext
- Windows Phone 8 : Scheduled Tasks - Using Scheduled Tasks
- Windows Phone 8 : Scheduled Tasks - Background Agent Types
- Windows Phone 8 : Windows Phone Toolkit Animated Page Transitions - Reusing the Transition Attached Properties
 
 
Windows XP
Windows Vista
Windows 7
Windows Azure
Windows Server
Windows Phone
2015 Camaro