如何在命令栏（如“照片”应用程序）中具有多个部分

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>