Splitview Pane & Page CommandBar & Keyboard overlaps each other

Question

When I use SplitView and CommandBar, I put CommandBar in Page.BottomAppBar, but the CommandBar overlaps SplitView Pane. So I move the CommandBar to the page's content(Like: Page command bar overlaps Splitview Pane). It's working.

But it take a new question. When in the page the keyboard is showing, the keyboard overlaps the CommandBar. I want to show the CommandBar when the keyboard is showing.How can I do it?

Answer 1

I can give a workground here, maybe it's a little bit duffer, but it can solve your problem.

Since CommandBar in Page.BottomAppBar will not be hinden when the software keyboard is visible, but it overlaps the SplitView Pane, we can keep the CommandBar in the Content of Grid, but make a copy of this CommandBar and put it into the Page.BottomAppBar, in the meanwhile make it collapsed at first, for example like this:

<Page.BottomAppBar>
    <CommandBar x:Name="AppCommandBarCopy" Visibility="Collapsed">
        <CommandBar.PrimaryCommands>
            <AppBarButton Name="SaveCopy"
                          Icon="Save"
                          Label="Save"></AppBarButton>
            <AppBarButton Name="ClearCopy"
                          Icon="ClearSelection"
                          Label="Clear"></AppBarButton>
        </CommandBar.PrimaryCommands>
    </CommandBar>
</Page.BottomAppBar>

Then in the code behind, we can detect if the software keyboard is visible or not, if the keyboard is visible, show this copy; if not, hide this copy, for example here:

public SplitViewCommandBarKeyboard()
{
    this.InitializeComponent();
    InputPane.GetForCurrentView().Showing += OnKeyboardShowing;
    InputPane.GetForCurrentView().Hiding += OnKeyboardHidding;
}

private void OnKeyboardHidding(InputPane sender, InputPaneVisibilityEventArgs args)
{
    AppCommandBarCopy.Visibility = Visibility.Collapsed;
}

private void OnKeyboardShowing(InputPane sender, InputPaneVisibilityEventArgs args)
{
    AppCommandBarCopy.Visibility = Visibility.Visible;
}