2016-04-28 92 views
2

如何使XAML中的頂部和底部的漢堡菜單 - UWP?UWP漢堡包菜單頂部和底部

這是我SplitView.Pane

 <SplitView.Pane> 
      <Grid> 
       <Border Background="{StaticResource PanelBackground}"/> 
       <ListView x:Name="navMenuList" 
          SelectionMode="Single" 
          IsItemClickEnabled="True" 
          Margin="0,0,0,0" ItemsSource="{Binding Menus}"> 
        <ListView.ItemTemplate> 
         <DataTemplate> 
          <StackPanel Orientation="Horizontal" Width="240" HorizontalAlignment="Left" Height="48"> 
           <SymbolIcon Margin="2,0,0,0" Symbol="{Binding Symbol}" Foreground="White"/> 
           <TextBlock Margin="24,0,0,0" Text="{Binding Text}" VerticalAlignment="Center" Foreground="White"/> 
          </StackPanel> 
         </DataTemplate> 
        </ListView.ItemTemplate> 
        <interactivity:Interaction.Behaviors> 
         <core:EventTriggerBehavior EventName="ItemClick"> 
          <core:InvokeCommandAction Command="{Binding Path=MenuCommand}" CommandParameter="{Binding Target}"/> 
         </core:EventTriggerBehavior> 
        </interactivity:Interaction.Behaviors> 
       </ListView> 
      </Grid> 
     </SplitView.Pane> 

就是要duplicite整個ListView與另一個結合的好辦法?

//編輯

我需要的是這樣的(但更多的菜單項:)):

enter image description here

+0

會你喜歡有兩個菜單窗格?因爲我不確定你想實現什麼。 –

+0

@danny我編輯了我的Q – Kicker

+1

看看[Template 10](https://github.com/Windows-XAML/Template10) – SWilko

回答

0
<SplitView x:Name"RootSplitView"> 
</SplitView> 
<ToggleButton x:Name="TogglePaneButton" 
         TabIndex="1" 
         Style="{StaticResource SplitViewTogglePaneButtonStyle}" 
         IsChecked="{Binding IsPaneOpen, ElementName=RootSplitView, Mode=TwoWay}" 
         Unchecked="TogglePaneButton_Checked" 
         AutomationProperties.Name="Menu" 
         ToolTipService.ToolTip="Menu" Background="#E53DAFBD" Foreground="#FFF9EAEA" /> 

你可以試試這個代碼

0
<SplitView.Pane> 
    <Grid> 
     <StackPanel> 
      <ToggleButton x:Name="HamburgerButton" FontFamily="Segoe MDL2 Assets" Content="&#xE700;" 
       Width="50" Height="50" Background="Transparent" Tapped="HamburgerButton_Tapped" Foreground="White" 
       FontSize="16" FontWeight="Bold" Style="{StaticResource HamburgerToggleButtonStyle}" /> 

      <RadioButton Content="Top 1" x:Name="btn1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/> 
      <RadioButton Content="Top 2" x:Name="btn2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="True" Foreground="White" GroupName="HamMenu"/> 
      <RadioButton Content="Top 3" x:Name="btn3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsChecked="False" Foreground="White" GroupName="HamMenu"/> 

     </StackPanel> 
     <StackPanel VerticalAlignment="Bottom"> 
      <RadioButton Content="Bottom 1" x:Name="btn4" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsChecked="False" Foreground="White" GroupName="HamMenu"/> 
      <RadioButton Content="Bottom 2" x:Name="btn5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" IsChecked="False" Foreground="White" GroupName="HamMenu"/> 
     </StackPanel> 
    </Grid> 
</SplitView.Pane>