How to access CommandBar controls from Frame

Question

I'm trying to dynamically access my CommandBar from frames to control its back button. How can I ensure the CommandBar back button is hidden on the first frame (Frame1) whilst being visible and clickable on the second frame (Frame2)?

MainPage.xaml

<Page>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <CommandBar>
            <CommandBar.Content>
                <Button Name="BackButton" Style="{StaticResource NavigationBackButtonNormalStyle}" VerticalAlignment="Top"/>
            </CommandBar.Content>
        </CommandBar>

        <Frame Name="MyFrame"/>
    </Grid>
</Page>

MainPage.cs

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

        Frame_Main.Navigate(typeof(Frame1));
    }
}

Frame1.cs

public sealed partial class Frame1: Page
{
    public Frame1()
    {
        this.InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        BackButton.Visibility = ?;
    }
}

Frame2.cs

public sealed partial class Frame2: Page
{
    public Frame2()
    {
        this.InitializeComponent();
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
        BackButton.Visibility = ?;
    }

    private void Back_Click(object sender, RoutedEventArgs e)
    {
        On_BackRequested();
    }

    private bool On_BackRequested()
    {
        if (this.Frame.CanGoBack)
        {
            this.Frame.GoBack();
            return true;
        }
        return false;
    }

    private void BackInvoked(KeyboardAccelerator sender, KeyboardAcceleratorInvokedEventArgs args)
    {
        On_BackRequested();
        args.Handled = true;
    }
}

Answer 1

Hello,

Welcome to Microsoft Q&A!

The BackButton you want to deal with is not directly accessible, because it is not the current page (Frame1 or Frame2) controls. If you want to access it, you need to do some processing:

1. Change the accessibility of the control to "Public"

<CommandBar>
    <CommandBar.Content>
        <Button Name="BackButton" ...
                x:FieldModifier="Public"/>
    </CommandBar.Content>
</CommandBar>

2. Since the control is in MainPage, you need to create an accessible instance of MainPage

public static MainPage Current;
public MainPage()
{
    this.InitializeComponent();
    Current = this;
}

After that, you can access the control through MainPage.Current.BackButton.

Thanks.

Answer 2

Based on your MainPage.xaml you should write this in your MainPage.xaml.cs

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        MyFrame.Navigated += (sender, args) =>
        {
            BackButton = MyFrame.CanGoBack
                ? AppViewBackButtonVisibility.Visible
                : AppViewBackButtonVisibility.Collapsed;
        };
        MyFrame.Navigate(typeof(Frame1));
    }
}

But I have to say that there is something unclear in your question, it seems that both Frame1 and Frame2 have their own BackButton. Do this pages have a Frame inside too?