Блог

Я пытаюсь воспроизвести внешний вид CommandBar в приложении build in Photos. Панель команд состоит из трех разделов слева, в центре и справа.

Я предполагаю, что правые элементы являются основными элементами, а центральная и левая секции находятся в CommandBar.Content и для их выравнивания используется сетка.

Как я могу воспроизвести этот внешний вид? Я пытался использовать свойство Content, но не могу заставить его заполнить доступное пространство.

Я думаю, что это сделано не просто из командной строки. Вам нужно использовать элемент управления 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>