---恢复内容开始---
现在uwp上面的汉堡菜单(就是那个三道杠,点击之后会出现菜单)使用的越来越普遍,比如微软自己家的Cortana。现在我使用的实现方法是使用SplitView实现。首先SplitView将整个App的界面分成两块,一块是弹出来的汉堡菜单,一块是收起汉堡菜单之后App的界面。弹出来的汉堡菜单叫做Pane,这个界面在<SplitView.Pane></SplitView.Pane>标签下面写,就和普通的页面布局一样,该用Grid就用Grid(对了,现在微软所谓的响应式布局是不是推荐使用Grid?)
<SplitView.Pane> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="btnSplitViewClose" Grid.Column="0" Click="btnSplitViewClose_Click"> <Image Source="Assets/Menu.png" Height="30" Width="30"/> </Button> <TextBlock Text="目录" Grid.Column="1" x:Name="PaneHeader" Margin="30,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/> </Grid> <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="True" ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemplate}"/> </Grid> </SplitView.Pane>
效果是这样的:
剩下的Span收起后的界面就是和平常写界面的一样啦,把汉堡菜单忘掉之后接着写自己的App界面就好。
这个界面的所有XAML是这样的:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" x:Name="rootGrid"> <SplitView DisplayMode="Overlay" OpenPaneLength="220" x:Name="splitView"> <SplitView.Pane> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="btnSplitViewClose" Grid.Column="0" Click="btnSplitViewClose_Click"> <Image Source="Assets/Menu.png" Height="30" Width="30"/> </Button> <TextBlock Text="目录" Grid.Column="1" x:Name="PaneHeader" Margin="30,12,0,0" Style="{StaticResource BaseTextBlockStyle}"/> </Grid> <ListView x:Name="NavLinksList" Margin="0,12,0,0" SelectionMode="None" Grid.Row="1" VerticalAlignment="Stretch" ItemClick="NavLinksList_ItemClick" IsItemClickEnabled="True" ItemsSource="{x:Bind NavLinks}" ItemTemplate="{StaticResource NavLinkItemTemplate}"/> <!--<StackPanel Orientation="Horizontal" Grid.Row="2" Margin="14,24,0,24"> <SymbolIcon Symbol="Setting"/> <TextBlock Text="Settings" Margin="24,0,0,0" VerticalAlignment="Center" Tapped="TextBlock_Tapped"/> </StackPanel>--> </Grid> </SplitView.Pane> <Grid> <Grid.RowDefinitions> <RowDefinition Height="auto"/> <RowDefinition Height="*"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> <RowDefinition Height="auto"/> </Grid.RowDefinitions> <Grid Grid.Row="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="auto"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="auto"/> </Grid.ColumnDefinitions> <!--你的主界面代码--> </SplitView> </Grid> </Grid>
private ObservableCollection<NavLink> _navLinks = new ObservableCollection<NavLink>() { new NavLink() {Label="个性化",Symbol=Symbol.People }, new NavLink() {Label="地图",Symbol=Symbol.Map }, new NavLink() { Label = "联系我", Symbol = Windows.UI.Xaml.Controls.Symbol.Mail }, new NavLink() { Label = "使用帮助", Symbol = Symbol.Help }, new NavLink() {Label="Settings",Symbol=Symbol.Setting } }; public ObservableCollection<NavLink> NavLinks { get { return _navLinks; } } private void NavLinksList_ItemClick(object sender, ItemClickEventArgs e) { switch((e.ClickedItem as NavLink).Label) { case "个性化": this.Frame.Navigate(typeof(PersonalSettings)); break; case "地图": this.Frame.Navigate(typeof(Map)); break; case "联系我": conTool.SendEmail("[email protected]", "反馈", "紧急求助反馈", ""); break; case "使用帮助": this.Frame.Navigate(typeof(UserGuide)); break; case "Settings": this.Frame.Navigate(typeof(Settings)); break; default: break; } }
附上后台响应包括ListView数据源的C#代码。
有时候大家打开这个汉堡菜单喜欢主界面上右划打开,左划关闭。实现起来也十分简单。
private void RootGrid_PointerPressed(object sender, PointerRoutedEventArgs e) { beforePoint = e.GetCurrentPoint(rootGrid); } private void RootGrid_PointerReleased(object sender, PointerRoutedEventArgs e) { afterPoint = e.GetCurrentPoint(rootGrid); if((beforePoint.PointerId==afterPoint.PointerId&&(afterPoint.Position.X-beforePoint.Position.X>10))|| (beforePoint.PointerId == afterPoint.PointerId && (afterPoint.Position.Y - beforePoint.Position.Y > 10))) { splitView.IsPaneOpen = true; }else if(beforePoint.PointerId == afterPoint.PointerId && ((afterPoint.Position.X - beforePoint.Position.X < -10)|| (afterPoint.Position.Y - beforePoint.Position.Y < -10)) && splitView.IsPaneOpen) { splitView.IsPaneOpen = false; } }
其中,rootGrid是上面定义的一个Grid的Name,通过SplitView.IsPaneOpen的赋值是True或者False来控制汉堡菜单的开关,其中,beforePoint和afterPoint是PointerPoint的两个对象,用于存储手势开始和结束的两个点。我这里定义向下和向右都可以打开汉堡菜单。
时间: 2024-10-13 22:15:56