UWP Использование Live Visual Tree для редактирования дизайна NavigationView - PullRequest
Новая
       28

UWP Использование Live Visual Tree для редактирования дизайна NavigationView

0 голосов
/ 10 сентября 2018

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

Я обнаружил Живое Визуальное Дерево, которое отображает именно те части, которые мне нужны для редактирования стиля (Ака просто удалите их).

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

Вот изображение моего текущего визуального дерева и выделенный идентификатор детали, от которого хотелось бы избавиться. Я хотел бы отметить, что я понятия не имею, что я делаю, поэтому извините за невежество enter image description here

В соответствии с просьбой, мой вариант использования выглядит следующим образом:

У меня есть NavigationView с набором AppBarButtons, вложенных в горизонтальную панель стека. Поскольку Stackpanel установлен в NavigationViewMenuItem, он позволяет выбирать стековую панель, которая мне не нужна. Я хочу удалить прямоугольник, эффект опрокидывания для панели стека и сделать только кнопки выбираемыми и иметь эффекты опрокидывания.

Вот картинка для демонстрации:

enter image description here

Вот XAML для MainPage StackPanel, так что вы получите представление о макете: 

<NavigationView.MenuItems>
                <!-- Need to sort out the rollover effect for the toolbar and make it non-selectable. Will resolve later-->
                <StackPanel Orientation="Horizontal" x:Name="AppBarButtons" Tag="AppBarButtonPanel" Visibility="{Binding ElementName=NavView, Path=IsPaneOpen}">
                    <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync" ToolTipService.ToolTip="New Budget"/>
                    <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_Click" ToolTipService.ToolTip="Open Budget"/>
                    <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync" ToolTipService.ToolTip="Save Budget"/>
                    <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click" ToolTipService.ToolTip="Budget Settings"/>
                    <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync" ToolTipService.ToolTip="Open Windows Calculator"/>
                </StackPanel>


                <NavigationViewItemSeparator/>

Редактировать визуальные стили после редактирования копии enter image description here

1 Ответ

0 голосов
/ 10 сентября 2018

Переместите StackPanel (в котором все кнопки расположены горизонтально) из NavigationMenuItem в PaneFooter . 

<NavigationView.PaneFooter> 
    <StackPanel Orientation="Horizontal" x:Name="AppBarButtons" Tag="AppBarButtonPanel" Visibility="{Binding ElementName=NavView, Path=IsPaneOpen}">
        <AppBarButton Icon="Page2" Margin="0, 2, 1, 0" Tag="New_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="NewFile_ClickAsync" ToolTipService.ToolTip="New Budget"/>
        <AppBarButton Icon="OpenFile" Margin="1, 2, 0, 0" Tag="Open_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="OpenFile_Click" ToolTipService.ToolTip="Open Budget"/>
        <AppBarButton Icon="Save" Margin="1, 2, 0, 0" Tag="Save_Sheet" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SaveButton_ClickAsync" ToolTipService.ToolTip="Save Budget"/>
        <AppBarButton Icon="Setting" Margin="1, 2, 0, 0" Tag="Settings_Page" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="SettingsButton_Click" ToolTipService.ToolTip="Budget Settings"/>
        <AppBarButton Icon="Calculator" Margin="1, 2, 0, 0" Tag="Calculator_Open" HorizontalAlignment="Center" Width="56.5" Height="56.5" ClickMode="Press" Click="CalcButton_ClickAsync" ToolTipService.ToolTip="Open Windows Calculator"/>
    </StackPanel>
</NavigationView.PaneFooter>

причина, по которой вы получаете левый индикатор выбора, заключается в том, что каждый NavigationMenuItem показывает его, когда он выбран, и у вас есть только панель инструментов, которой не должно быть в NavigationMenuItem.

...