Tutorial for a Top AppBar / NavigationBar

Question

I tried do create a navigation bar like in the Windows News App or Food/Health-App, that appears on swiping from the bottom or rightclicking.

I wanted to do it the mvvm-way:

Alle views define an ApplicationBar that contains a UserControl. This contains a horizontal ItemControl which is bound to a ViewModel. This ViewModel contains all the stuff I need to create the navigation buttons. On every Page I tell the ViewModel my Page's name and it gives me buttons with the button of the current Page marked with a different color.

But now when I navigate it fails somewhere in the NavigationHelper but actually I can't tell what goes wrong because I tried fixes and fixes to fix fixes...

..all I want is a good tutorial how a navigation bar is meant to work.

I downloaded this: http://code.msdn.microsoft.com/windowsapps/ and there is everything but a navigation bar.

Any sources or maybe an example of how you would do something like this?

The only "fancy" idea is to make it bound to a viewmodel because otherwise I would copy-paste the bar's content. Anything else should be the same: a UserControl-AppBar that navigates to other pages/frames/views of an app.

Answer 1

It can be tricky the first time. Since you want to drive the nav from your MVVM viewmodel, the easiest is going to be to have your nav be dynamic, using an itemscontrol. I imagine you would have a viewmodel like this:

public class TopNavItem
{
    public string Title { get; set; }
    public string SubTitle { get; set; }
    public Type Goto { get; set; }

    DelegateCommand<object> _GotoCommand = null;
    public DelegateCommand<object> GotoCommand
    {
        get
        {
            return _GotoCommand ?? (_GotoCommand = new DelegateCommand<object>
            (
                o => (Window.Current.Content as Frame).Navigate(this.Goto), o => true
            ));
        }
    }
}

public class MainPageViewModel : BindableBase
{
    public MainPageViewModel()
    {
        this.TopNavItems.Add(new TopNavItem { Title = "Page 2", SubTitle = "This is detail", Goto = typeof(MainPage) });
        this.TopNavItems.Add(new TopNavItem { Title = "Page 3", SubTitle = "This is detail", Goto = typeof(MainPage) });
        this.TopNavItems.Add(new TopNavItem { Title = "Page 4", SubTitle = "This is detail", Goto = typeof(MainPage) });
    }

    ObservableCollection<TopNavItem> _TopNavItems = new ObservableCollection<TopNavItem>();
    public ObservableCollection<TopNavItem> TopNavItems { get { return _TopNavItems; } }
}

Then your XAML would be something like this:

<Page.TopAppBar>
    <AppBar Background="Green" BorderBrush="DarkBlue">
        <Grid>
            <ScrollViewer VerticalScrollBarVisibility="Auto">
                <ItemsControl ItemsSource="{Binding TopNavItems}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Margin="20,20,0,20"
                                    Command="{Binding GotoCommand}"
                                    Style="{StaticResource TextBlockButtonStyle}">
                                <Grid Width="200"
                                      Height="200"
                                      Background="White">
                                    <Grid VerticalAlignment="Bottom">
                                        <Grid.Background>
                                            <SolidColorBrush Opacity=".5" Color="Black" />
                                        </Grid.Background>
                                        <StackPanel Margin="10,10,20,20">
                                            <TextBlock Style="{StaticResource TitleTextBlockStyle}" Text="{Binding Title}" />
                                            <TextBlock Style="{StaticResource SubtitleTextBlockStyle}" Text="{Binding SubTitle}" />
                                        </StackPanel>
                                    </Grid>
                                </Grid>
                            </Button>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </AppBar>
</Page.TopAppBar>

Believe it or not, that's it. It would look like this:

Best of luck!