uwp make commandbar not float

Question

Below is a simplified version my page. I want to put a MultiSelectCommandBar (a custom UserControl of CommandBar) below the Frame of the NavigationView. However, as you can see from the image I posted below, the command bar (with a red arrow aside) is floating above the Frame. I want the Frame and the MultiSelectCommandBar on the same level, so that it will neither block the content of the frame nor block the InAppNotification in my page.

How can I do that?

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <NavigationView
        x:Name="MainNavigationView"
        Grid.Row="1"
        IsBackButtonVisible="Collapsed"
        IsBackEnabled="True"
        ItemInvoked="MainNavigationView_ItemInvoked"
        PaneClosing="MainNavigationView_PaneClosing"
        PaneOpening="MainNavigationView_PaneOpening"
        Style="{StaticResource MainNavigationViewStyle}"
        TabNavigation="Cycle">
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="*" />
                <RowDefinition Height="Auto" />
            </Grid.RowDefinitions>
            <Frame
                x:Name="NaviFrame"
                IsNavigationStackEnabled="True"
                Navigated="NaviFrame_Navigated" />
            <--- Problem below！！！ --->
            <localControls:MultiSelectCommandBar x:Name="BottomMultiSelectCommandBar" Grid.Row="1" />
        </Grid>
    </NavigationView>
    <Grid
        x:Name="AppTitleBar"
        Height="32"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch"
        Background="Transparent">
        <Border
            x:Name="AppTitleBorder"
            Width="{x:Bind MainNavigationView.OpenPaneLength, Mode=OneWay}"
            HorizontalAlignment="Left"
            VerticalAlignment="Stretch"
            Background="Transparent" />
        <TextBlock
            x:Name="AppTitle"
            x:Uid="AppTitle"
            Height="{x:Bind AppTitleBar.Height, Mode=OneWay}"
            Padding="10,8"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Style="{StaticResource CaptionTextBlockStyle}"
            Visibility="Collapsed" />
    </Grid>
    <Button
        x:Name="BackButton"
        x:Uid="BackButton"
        Background="Transparent"
        Click="BackButton_Click"
        Style="{StaticResource BackButtonStyle}"
        Visibility="Collapsed" />
    <Button
        x:Name="FakeTogglePaneButton"
        Grid.Row="1"
        VerticalAlignment="Top"
        Background="{StaticResource MinimalTitleBarColor}"
        Click="FakeTogglePaneButton_Click"
        Visibility="Collapsed">
    </Button>
    <local:MediaControl
        x:Name="MainMediaControl"
        Grid.Row="2"
        Mode="Main" />
    <local:LoadingControl
        x:Name="MainLoadingControl"
        Grid.RowSpan="3"
        AllowBreak="True"
        Visibility="Collapsed" />
    <controls:InAppNotification
        x:Name="ShowResultInAppNotification"
        Grid.Row="1"
        AnimationDuration="0:0:0.1"
        HorizontalOffset="0"
        ShowDismissButton="True"
        StackMode="Replace"
        VerticalOffset="100" />
    <controls:InAppNotification
        x:Name="UndoInAppNotification"
        Grid.Row="1"
        AnimationDuration="00:00:00.1"
        HorizontalOffset="0"
        StackMode="Replace"
        VerticalOffset="100">
    </controls:InAppNotification>
</Grid>

This is my project website. My posted code is here. MultiSelectCommandBar is here.

Nico Zhu - MSFT Nico Zhu - MSFT · Accepted Answer · 2020-10-07T06:52:43

You could use Canvas as root container, and set the same ZIndex for children element to keep them on the same level. But for your case, we suggest add new method for your IMultiSelectListener interface and cut the playlist height when MultiSelectCommandBar was shown and recover playlist height when MultiSelectCommandBar hidden.

uwp make commandbar not float

1 Answers