uwp - 如何在命令栏中有多个部分，如照片应用程序

Question

我正在尝试复制CommandBar照片应用程序中构建的外观。命令栏分为左、中、右三个部分。

我的猜测是正确的项目是主要项目，中心和左侧部分位于CommandBar.Content并使用网格对齐它们。

我怎样才能复制这种外观？我尝试使用 Content 属性，但无法填充可用空间。

Answer 1

我认为它不仅仅是由 Commandbar 制成的。您需要使用NavigationView控件并设置PaneDisplayMode="Top". 此外，您可以自定义PaneHeader,PaneFooter和PaneCustomContent来实现您的目标。

<NavigationView PaneDisplayMode="Top" PaneTitle="add to a creation" IsBackButtonVisible="Collapsed">
        <NavigationView.PaneHeader>
            <Image Source="Assets/car.png"></Image>
        </NavigationView.PaneHeader>
        <NavigationView.MenuItems>
            <NavigationViewItem Content="add to a creation"></NavigationViewItem>
        </NavigationView.MenuItems>

        <NavigationView.PaneFooter>
            <StackPanel>
                <CommandBar>
                    <AppBarButton Label="file" Icon="OpenFile"></AppBarButton>
                    <AppBarButton Label="file" Icon="OpenFile"></AppBarButton>
                    <AppBarButton Label="file" Icon="OpenFile"></AppBarButton>

                </CommandBar>
            </StackPanel>
        </NavigationView.PaneFooter>
        <NavigationView.PaneCustomContent>
            <Grid HorizontalAlignment="Center">
                <CommandBar>
                    <AppBarButton Label="fav" Icon="Favorite"></AppBarButton>
                    <AppBarButton Label="delete" Icon="Delete"></AppBarButton>
                </CommandBar>
            </Grid>
        </NavigationView.PaneCustomContent>
    </NavigationView>