I had a question from @indyfromoz yesterday regarding part of the video in the post #wp7devtoo easy! regarding the ‘drop-down control towards the end of the video.

Now I am assuming this could either be the Application Bar menu or the effect when you select a user for redemption. Not sure which so I will cover both in this article.

Just a quick recap, yesterdays blog post was all about how insanely easy it is to develop applications for Windows Phone 7 and what a stellar tool set the army of Windows developers have at their disposal. Again, this should not be underestimated in the mobile wars.

On to the solutions.

Below is the full video of the Windows Phone 7 application from yesterdays blog post for your reference.

Windows Phone 7 Redemption Application


Application Bar Buttons & Menus

The Application Bar appears at the bottom the phone screen and depending on the opacity setting you apply (0-1) will either always be completely visible and adjust the layout of your controls to take up screen real-estate or if a value less than 1 will overlay your controls at the bottom of the phone.

Windows Phone 7 Application Bar

The 3 dots the right of the buttons on the Application Bar are the context menu for the current screen you are viewing on the application. Pressing on them with your finger will make the menu appear giving you access to additional functionality.

Windows Phone 7 Application Bar Menu

Creating an application bar is extremely simple and can either be through code or XAML. XAML although more flexible does limit you if you need to internationalise your application as the menu text will still need to be set through code and loaded from a resource library.

Below is some sample code for creating an Application Bar with buttons and menus. This initializes the ApplicationBar property of the current XAML page with a new instance of an ApplicationBar, sets a few of the properties and then calls the helper methods to load the buttons and menus.

privatevoid InitApplicationBar() { ApplicationBar = new ApplicationBar(); ApplicationBar.IsVisible = true; ApplicationBar.IsMenuEnabled = true; ApplicationBar.Opacity = 1; foreach (ApplicationBarIconButton item in PageButtons()) { ApplicationBar.Buttons.Add(item); } foreach (ApplicationBarMenuItem item in PageMenus()) { ApplicationBar.MenuItems.Add(item); } }

To create the buttons the helper method below creates a generic list of ApplicationBarIconButtons of which you can have up to 5 on the ApplicationBar according the Windows Phone 7 Series UI Design and & Interaction Guide.

One trap to watch out for when referencing your images in your Visual Studio project; make sure that you set the Build Action from Resource (the default when you import an image) to Content otherwise your images will not appear in your application.

If you looking for some button images then you can download 64 of them from here.

private List PageButtons() { List buttons = new List(); ApplicationBarIconButton signOut = new ApplicationBarIconButton(); signOut.IconUri = new Uri("/img/dark/appbar.close.rest.png", UriKind.Relative); signOut.Text = "Sign Out"; signOut.Click += new EventHandler(signOutClick); buttons.Add(signOut); ApplicationBarIconButton previousPage = new ApplicationBarIconButton(); previousPage.IconUri = new Uri("/img/dark/appbar.back.rest.png", UriKind.Relative); previousPage.Text = "Prev Page"; previousPage.Click += new EventHandler(previousPageClick); buttons.Add(previousPage); ApplicationBarIconButton nextPage = new ApplicationBarIconButton(); nextPage.IconUri = new Uri("/img/dark/appbar.next.rest.png", UriKind.Relative); nextPage.Text = "Next Page"; nextPage.Click += new EventHandler(nextPageClick); buttons.Add(nextPage); ApplicationBarIconButton search = new ApplicationBarIconButton(); search.IconUri = new Uri("/img/dark/appbar.feature.search.rest.png", UriKind.Relative); search.Text = "New Search"; search.Click += new EventHandler(searchClick); buttons.Add(search); return buttons; }

Creating the menu items is just as easy and shown in the code below: private List PageMenus() { List menus = new List(); ApplicationBarMenuItem contacts = new ApplicationBarMenuItem(); contacts.Click += new EventHandler(contacts_Click); contacts.Text = "Manage Contacts"; menus.Add(contacts); ApplicationBarMenuItem reports = new ApplicationBarMenuItem(); reports.Click += new EventHandler(reports_Click); reports.Text = "Run Reports"; menus.Add(reports); ApplicationBarMenuItem products = new ApplicationBarMenuItem(); products.Click += new EventHandler(products_Click); products.Text = "Manage Products"; menus.Add(products); ApplicationBarMenuItem pointsValue = new ApplicationBarMenuItem(); pointsValue.Click += new EventHandler(pointsValue_Click); pointsValue.Text = "Manage Points Value"; menus.Add(pointsValue); return menus; } Of course with both of these you will need to wire up your Click event handlers. And that is it for the Application Bar. The functionality shown in the video has now been implemented by this code. ## Custom Animation in Expression Blend 4 Ok now on to the custom animation that occurs when a user clicks on either of the buttons shown below: Perform Redemption or Cancel and Return The animation which slides the results list out of the way and shows the selected users details is the same for both buttons, just reversed for ‘Cancel & Return’, and requires no coding when created in Expression Blend 4. Ok, so how is this done? The first thing you need to do is create your animation in Expression Blend 4 which is accomplished as follows: 1. Ensure the Objects and Timeline tools are visible. You can get to these through the Window Menu in Expression Blend 4 2. Click on the + button shown below Create New Animation 3. On the dialog that appears name your animation. 4. This will put you in to animation mode and from here you just need to move your objects in the timeline as shown below Objects and Timeline 5. You will note that I have created 2 grids to hold the different functionality; one is called Results and the other Redeem. I simply move the grids, at different points in time marked with the button circled in red, up and down. 6. To create the reverse animation you can simply duplicate your first animation and then reverse it using the context menus shown below Reverse and Duplicate 7. Ok now that we have our animations it’s time to use them and that is done with behaviours. We are after the Control Storyboard Action shown below: Behaviours 8. Drag and Drop this Behaviour on to the button that you want to cause the Animation (Storyboard) to execute. 9. This will bring up the Control Storyboard toolset shown below: Control Storyboard 10. By default it will be on the Click EventName and you will just need to select the Storyboard you created earlier that you wish to execute. And that’s it. Just let Silverlight perform the rest of the magic. Behind the scenes this is all rendered with XAML markup and for reference I have included the XAML for the 2 storyboards I use in this application "GoToRedeem"> "(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Results"> "0" Value="0"/> "0:0:0.1" Value="626"/> "0:0:0.2" To="0.00161" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Redeem" d:IsOptimized="True"/> "GoToResults"> "(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Results"> "0:0:0.1" Value="626"/> "0:0:0.2" Value="0"/> "(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="Redeem"> "0:0:0.2" Value="628"/> Hope that covers what you needed @indyfromoz

BondiGeek