Example Metro app /WinRT: Show/Hide items in AppBar based on current selected FlipView Item

Today I added a flipview to one of my views. The items displays statistics, and criteria for the different statistics vary depending between piecharts and linecharts. So, I needed to display different options in my appbar, based on the flipviewitem selected.

Here is an easy app example I’ve made that you can download. To ge the app bar up without touch you right click with the mouse. Notice that only the android icon provides an edit feature in the app bar.

Appbar with item

On button click the android icon changes color

Second flipviewitem has no button/item in the appbar

Problem:
You want to show different options in the appbar based on the the current flipview item.

Some requriements applicable from Application Profile Survey:
User Experience- UX Polish: Follows a consistent layout and alignment
User Expeience- Controls, Navigation, Animation: Makes appropriate use of the app bar

The view
[sourcecode language=“XML”]

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  

The code
[sourcecode language=“csharp”]
using System.Linq;
using Windows.UI;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;

namespace AppBarAndFlipView
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}

    protected override void OnNavigatedTo(NavigationEventArgs e){}  

    private void AppBar\_Opened(object sender, object e)  
    {  
        var nr = MyFlipView.SelectedIndex;  
        var button = (Button)bottomAppBarStackPanel.Children.First();  

        button.Visibility = nr == 1 ? Visibility.Collapsed : Visibility.Visible;  
    }  

    private void AppBar\_Closed(object sender, object e)  
    {  
        // Do some magic!  
    }  

    private void Button\_Click\_1(object sender, RoutedEventArgs e)  
    {   
        var fill = ((SolidColorBrush)colorMe.Fill).Color.ToString();  

        colorMe.Fill = fill == "#FFFFFFFF" ? new SolidColorBrush(Colors.Yellow) : new SolidColorBrush(Colors.White);  
    }  
}  

}
[/sourcecode]

Comments

I do not quite understand this code:
private void AppBar_Opened(object sender, object e)
        {
            var nr = MyFlipView.SelectedIndex;
            var button = (Button)bottomAppBarStackPanel.Children.First();
 
            button.Visibility = nr == 1 ? Visibility.Collapsed : Visibility.Visible;
        } 

Last modified on 2012-07-11