Create shell with different control than hamburger menu

Question

I tried to create shell with Page.BottomAppBar. The result is the bar is visible but content of the MainPage is not, only black screen is shown.

public override Task OnInitializeAsync(IActivatedEventArgs args)
    {
        Window.Current.Content = new Views.ShellNavBar();
        return Task.CompletedTask;
    }

This is ShellNavBar Page:

 <Page
    /.../

    <Page.BottomAppBar>
        <CommandBar>
            <AppBarSeparator/>
            <AppBarButton Icon="Add" Label="Add" Click="AppBarAddButton_Click" />
            <AppBarButton Icon="Home" Label="Home" Click="AppBarHomeButton_Click" />

            <CommandBar.Content>
                <TextBlock x:Name="HeadText" Text="PlaceHolder" Margin="12,14"/>
            </CommandBar.Content>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

Can someone guide me where I am doing mistake?

I have tested your code.It works fine in my solution.can you provide me more detail about you main page xaml code. — Nico Zhu, Dec 30 '16 at 03:37
Hi. It is just simple page. Pageheader and textblock. Debug message from mainpage constructor shows that navigation in onStartAsync is called, but screen is black. If I change shell back to original hamburger menu from template, everyhing is working fine. — matthew6870, Dec 30 '16 at 12:55

score 0 · Answer 1 · answered Jan 11 '17 at 17:51

Well, I added your code to the template to see if it would work and it did. Doesn't even occlude any of the Hamburger Menu. I am not sure what the problem you have is, I think you might have a typo or something because your approach is fine.

Here's my app.xaml.cs code:

public override UIElement CreateRootElement(IActivatedEventArgs e)
{
    var service = NavigationServiceFactory(BackButton.Attach, ExistingContent.Exclude);
    return new ModalDialog(new Views.Shell(service), ModalContent = new Views.Busy());
}

public override async Task OnStartAsync(StartKind startKind, IActivatedEventArgs args)
{
    await NavigationService.NavigateAsync(typeof(Views.MainPage));
}

Thanks for using Template 10.

Create shell with different control than hamburger menu

1 Answers1