2016-09-09 11 views
2

Я ищу способ создания навигационной панели с помощью SplitView и других элементов управления XAML.Проблемы с навигационной панелью UWP

Я попытался создать что-то вроде кода ниже, но мне не удалось, так как элементы управления не расположены точно в центре (по вертикали).

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

В целом, я хочу создать меню гамбургера, подобное меню «Пуск» в обновлении Windows 10 Anniversary Update. Все мнения были бы весьма оценены.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <SplitView x:Name="hamburgerMenu" HorizontalAlignment="Left" Width="319" DisplayMode="CompactOverlay"> 
     <SplitView.Pane> 
      <StackPanel> 
       <Button x:Name="HamburgerButton" Width="320" Height="48" Click="HamburgerButtonClick" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left"> 
        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0"> 
         <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE700;" TextAlignment="Center" Margin="0,1,0,0" /> 
         <TextBlock Text="MENU" Margin="0,0,0,0" FontWeight="Bold" /> 
        </StackPanel> 
       </Button> 
       <Button x:Name="TasksButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left"> 
        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0"> 
         <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE133;" TextAlignment="Center" VerticalAlignment="Center" /> 
         <TextBlock Text="Tasks" Margin="0,0,0,0"/> 
        </StackPanel> 
       </Button> 
       <Button x:Name="ArchivedButton" Width="320" Height="48" BorderThickness="0" Background="{x:Null}" HorizontalContentAlignment="Left"> 
        <StackPanel Orientation="Horizontal" Margin="-8,0,0,0"> 
         <TextBlock Width="48" FontFamily="Segoe MDL2 Assets" Text="&#xE73A;" TextAlignment="Center" VerticalAlignment="Center" /> 
         <TextBlock Text="Archived" Margin="0,0,0,0"/> 
        </StackPanel> 
       </Button> 
      </StackPanel> 
     </SplitView.Pane> 
    </SplitView> 
</Grid> 

Вот что я хочу добиться:

Windows Start Menu

Скриншоты: http://imgur.com/a/utNmC

+0

Возможно, вы захотите создать новый вопрос о белой панели в верхней части приложения, поскольку это, вероятно, отдельная проблема. Я бы также опубликовал снимок экрана о том, что в настоящее время производит код – Bassie

+0

Я отредактировал сообщение. Скриншоты внизу. – mDevv

ответ

1

MessiKing в 10 это хорошая идея, и сэкономит вам много времени. Без сомнения. Но это не поможет вам узнать, как XAML обрабатывает элементы управления, потому что все они обрабатываются уже экспертами. Однако, если вы хотите узнать, как это работает в чистом XAML без каких-либо сторонних библиотек, см. Ниже.

Ваш XAML будет выглядеть ниже

<SplitView x:Name="hamburgerMenu" HorizontalAlignment="Stretch" OpenPaneLength="150" DisplayMode="CompactOverlay" IsPaneOpen="True"> 
    <SplitView.Pane> 
     <Grid> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="*"/> 
      </Grid.RowDefinitions> 
      <Button x:Name="HamburgerButton" Click="HamburgerButtonClick" Style="{StaticResource TextBlockButtonStyle}" FontWeight="Bold" VerticalAlignment="Top"> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch" > 
        <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE700;" TextAlignment="Center" Padding="5" /> 
        <TextBlock Text="MENU" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/> 
       </StackPanel> 
      </Button> 
      <Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top"> 
       <Grid.RowDefinitions> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 

      <Button x:Name="TasksButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="1"> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
        <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE133;" TextAlignment="Center" Padding="5" /> 
        <TextBlock Text="Tasks" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/> 
       </StackPanel> 
      </Button> 
      <Button x:Name="ArchivedButton" Style="{StaticResource TextBlockButtonStyle}" Grid.Row="2"> 
       <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"> 
        <TextBlock FontSize="20" FontFamily="Segoe MDL2 Assets" Text="&#xE73A;" TextAlignment="Center" Margin="5" /> 
        <TextBlock Text="Archived" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="15,0"/> 
       </StackPanel> 
      </Button> 
      </Grid> 
     </Grid> 
    </SplitView.Pane> 
</SplitView> 

Выход

enter image description here

Теперь для стайлинга для кнопок. По умолчанию Styling, предоставленный Microsoft, включает StaticResource под названием TextBlockButtonStyle, который изменит стиль вашей кнопки на стиль TextBlock. Взгляните на это.

Также есть причина, по которой я завернул элементы списка внутри сетки. потому что если вы меняете

<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Top"> 

в

<Grid Grid.Row="1" x:Name="btmtp" VerticalAlignment="Bottom"> 

вы увидите что-то вроде ниже.

enter image description here

удачи и счастливого кодирования.

+0

Спасибо. Это точный ответ, который мне нужен. – mDevv

+0

Где найти подробную информацию о обработчике событий в HamburgerButtonClick? – usefulBee

+1

@usefulBee Используйте Tapped event на 'HamburgerButton' и в этом просто скажите' hamburgerMenu.IsPaneOpen =! HamburgerMeNu.IsPaneOpen' – AVK

1

Dziewulski,

Если вы хотите сделать hamburgerMenu, используя шаблон 10 спасут вы много времени.

При установке шаблона 10 в визуальной студии вам будет легко создать проект, в котором содержится гамбургерMenu.

Пожалуйста, обратитесь к этим видео для деталей: Шаблон Template 10 for Windows 10 Apps

Template 10: How to Build Your Universal Windows App

Смежные вопросы