Использование панели команд внутри панели навигации NavView UWP

Question

Я изо всех сил пытаюсь создать пользовательский интерфейс, который у меня в голове, и на сегодняшний день довольно неудачно.

Я пытаюсь создать главную страницу, на которой размещается мой NavView и внутри, по желанию NavView.иметь командную строку, которая будет контролировать, какие элементы NavViewItems видны.Я создал быстрый образ того, чего я пытаюсь достичь.

В моем примере у меня активирована кнопка home в командной строке, которая отображает

• Заголовок элемента навигации
• Элемент навигации 1
• и т. Д...

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

Наконец, я хочу, чтобы панель команд свернулась, когда панель NavView компактна, но пользователь должен иметь возможность нажать кнопку панели команд и развернуть панель команд, чтобы переключаться между Home, Документы и т. Д.

Действительно ищите любую помощь / совет для лучших мест, чтобы начать.

Я все еще изучаю элементы управления UWP и Xaml.

Answer 1

Прежде всего необходимо решить, хотите ли вы использовать NavigationView.В XAML элементы управления определяются их поведением (свойствами и методами, которые они реализуют), в то время как внешний вид не имеет значения и может быть полностью изменен.Если NavigationView подходит для вашей задачи, вы можете частично или полностью изменить его стиль - в редакторе XAML щелкните его правой кнопкой мыши, затем выберите «Редактировать шаблон»> «Редактировать копию».Теперь вы получите определение стиля XAML, которое определяет внешний вид NavigationView, это то место, с которого нужно начинать.

Но может быть очень хорошо, что вы не можете использовать NavigationView, и это начинается с SplitView может быть лучшей идеей, как сказал @Muzib.

Не уверен, что это хорошая идея для изучения XAML, но вы поймете одну вещь - XAML можно настроить в значительной степени, но это можеттакже будет очень сложной задачей.

Answer 2

Я думаю, что есть несколько проблем с точки зрения UX.

1. Не все элементы навигации отображаются одновременно, и используемый должен расширить меню, чтобы переключаться между наборами элементов.
2. Положение элементов навигации изменяется при расширении панели навигации.В настоящее время работает элемент управления, хотя панель расширяется, чтобы показать текст кнопки.При вашем предложенном подходе было бы желательно, чтобы элементы открывались вниз.

Интересно, будет ли проще иметь фиксированную боковую панель с элементами управления, расположенными так, как вы хотите, без кнопки для гамбургера и т. Д.не так уж и необычно, приложение «Настройки» делает это.

Если вы используете панель с фиксированной шириной, я рекомендую взглянуть на XAML, который определяет элемент управления NavigationView, который можно найти внутри C:\Program Files (x86)\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.17763.0\Generic\generic.xaml (в соответствии сверсия вашего SDK).Затем вы можете использовать ресурсы тем, используемые в Windows, чтобы ваш пользовательский элемент управления был похожим на внешний вид.

Answer 3

Я думаю, вы должны использовать SplitView вместо NavigationView снаружи, а затем, внутри Pane из Splitview, использовать NavigationView с какой-то уловкой, чтобы достичь того, что вы хотели.

Ключевые моменты:

1. Сохраняйте NavigationView PaneDisplayMode LeftComact
2. не используйте PaneToggleButton в NavigationView для предотвращенияПользователь может изменить PaneDisplayMode, щелкнув по нему, вместо этого использовать пользовательский, чтобы открывать и закрывать панель.
3. Измените PaneDisplayMode NavigationView на Top при открытии панели и верните значение LeftComact снова, когда панель закрывается.

Вот что я достиг с NavigationView внутри Splitview.Pane:

Вы можете украсить его и сделать его более наглядным, например, добавив кнопку AutoSuggestBox или Setting, но это основное.Кстати, не используйте кнопку NavigationView Setting, поскольку я видел, как она ведет себя странно здесь.

XAML:

<SplitView 
    x:Name="Split"
    DisplayMode="CompactInline"
    CompactPaneLength="40">
    <SplitView.Pane>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="auto"/>
                <RowDefinition />
            </Grid.RowDefinitions>

            <Button
                Click="Button_Click">
                <SymbolIcon Symbol="List"/>
            </Button>

            <NavigationView 
                Grid.Row="1"
                x:Name="NavView"
                PaneDisplayMode="LeftCompact"
                CompactPaneLength="{x:Bind Split.CompactPaneLength}"
                IsBackButtonVisible="Collapsed"
                IsPaneToggleButtonVisible="False"
                IsSettingsVisible="False"
                SelectionChanged="NavView_SelectionChanged">
                <NavigationView.MenuItems>
                    <NavigationViewItem x:Name="HomeItem" Icon="Home" VerticalAlignment="Stretch"/>
                    <NavigationViewItem x:Name="DocumentItem" Icon="Document" />
                    <NavigationViewItem x:Name="PeopleItem" Icon="People" />
                </NavigationView.MenuItems>

                <ContentControl>
                    <ListView 
                        x:Name="ItemList"/>
                </ContentControl>

            </NavigationView>

        </Grid>
    </SplitView.Pane>
</SplitView>

Код:

public sealed partial class MainPage : Page
{
    public List<string> HomeItemList;
    public List<string> DocumentItemList;
    public List<string> PeopleItemList;

    public MainPage()
    {
        InitializeComponent();

        HomeItemList = new List<string> { "HomeItem1", "HomeItem2", "HomeItem3" };
        DocumentItemList = new List<string> { "DocumentItem1", "DocumentItem2", "DocumentItem3" };
        PeopleItemList = new List<string> { "PeopleItem1", "PeopleItem2", "PeopleItem3" };
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        Split.IsPaneOpen = !Split.IsPaneOpen;
        if (Split.IsPaneOpen)
        {
            NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;
        }
        else NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.LeftCompact;
    }

    private void NavView_SelectionChanged(NavigationView sender, NavigationViewSelectionChangedEventArgs args)
    {
        if (args.SelectedItem != null)
        {
            Split.IsPaneOpen = true;
            NavView.PaneDisplayMode = NavigationViewPaneDisplayMode.Top;

            if (sender.SelectedItem == HomeItem)
                ItemList.ItemsSource = HomeItemList;
            else if(sender.SelectedItem == DocumentItem)
                ItemList.ItemsSource = DocumentItemList;
            else if(sender.SelectedItem == PeopleItem)
                ItemList.ItemsSource = PeopleItemList;
        }
    }
}

Надеюсь, это поможет.