Как иметь несколько разделов в командной строке, как приложение Фото - PullRequest
0 голосов
/ 04 марта 2019

Я пытаюсь воспроизвести внешний вид CommandBar в приложении "Сборка в фотографиях".Панель команд состоит из трех разделов слева, по центру и справа.

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

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

Windows 10 Photos app

1 Ответ

0 голосов
/ 05 марта 2019

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

enter image description here

...