Abhishek
Abhishek

Reputation: 1379

Back button not working when placed in AppBar

I'm working on a Windows 8.1 app. I have added a basic page to my project, which automatically adds a back button:

<Button x:Name="backButton"
        Margin="39,59,39,20"
        Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
        Style="{StaticResource NavigationBackButtonNormalStyle}"
        VerticalAlignment="Top" />

The button works fine. However, when I move this button to an AppBar, it doesn't work. The view doesn't go back to the previous page.
What is going wrong in the latter case?

Upvotes: 1

Views: 165

Answers (1)

Rob Caplan - MSFT
Rob Caplan - MSFT

Reputation: 21899

The AppBar isn't in the same namespace as the page and so the Command binding to the page's NavigationHelper property doesn't resolve. This is the case for any binding of the AppBar to the page.

You can fix this by setting the AppBar's DataContext to the page in page.Loaded

XAML

<Page.BottomAppBar>
    <AppBar x:Name="bottomAppBar" IsOpen="True">
        <Button x:Name="backButton"
            Margin="39,59,39,20"
            Command="{Binding NavigationHelper.GoBackCommand}"
            Style="{StaticResource NavigationBackButtonNormalStyle}"
            VerticalAlignment="Top" />
    </AppBar>
</Page.BottomAppBar>

C#

public BasicPage1()
{
    this.InitializeComponent();
    this.navigationHelper = new NavigationHelper(this);
    this.navigationHelper.LoadState += navigationHelper_LoadState;
    this.navigationHelper.SaveState += navigationHelper_SaveState;

    this.Loaded += BasicPage1_Loaded;
}

async void BasicPage1_Loaded(object sender, RoutedEventArgs e)
{
    bottomAppBar.DataContext = this;
}

--Rob

Upvotes: 1

Related Questions