6. 一个简单可用的“汉堡包”应用

2015-12-07 14:52:32来源:作者:博客园精华区人点击

首先看目标:

我们要做一个类似上图的应用,通过左侧的“汉堡包”导航可以切换右边的内容(只是图片而已),同时更新顶部的标题,以及当切换到Food内容时出现返回按钮,而顶部右边的搜索是没有作用的。

1. 界面布局

首先可以看到,应用主要分为两部分,分别是标题栏和内容栏,所以我们用 Grid 作为主体,Row 将他们分开:

<Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition/></Grid.RowDefinitions>

顶部标题栏因为有控件分别位于两侧,所以我们可以用到 RelativePanel:

<RelativePanel Grid.Row="0"> <Button Name="togglePaneButton" FontFamily="Segoe MDL2 Assets" FontSize="30" Content="" Click="togglePaneButton_Click"/> <Button Name="backButton" RelativePanel.RightOf="togglePaneButton" FontFamily="Segoe MDL2 Assets" FontSize="30" Visibility="Collapsed" Content="" Click="backButton_Click"/> <TextBlock Name="titleTextBlock" RelativePanel.RightOf="backButton" FontSize="30"/> <Button Name="searchButton" RelativePanel.AlignRightWithPanel="True" FontFamily="Segoe MDL2 Assets" FontSize="30" Content=""/> <TextBox Name="searchKeyTextBox" RelativePanel.LeftOf="searchButton" FontSize="20" Height="{Binding ActualHeight,ElementName=searchButton}" Width="200" PlaceholderText="Search"/></RelativePanel>

这里有三点值得注意,一是控件使用了 RelativePanel 的定位属性,比如 AlignRightWithPanel,RightOf 等;二是 Segoe MDL2 Assets 字体的使用,可以通过系统自带的“字符映射表”查找使用;三是使用了数据绑定,如 searchKeyTextBox 的 Height 属性我将它绑定成了 searchButton 的 ActualHeight 上,这样就能保证文本框的高度和右边按钮的高度一致了。

底部的“汉堡包”导航则使用了 SplitView:

<SplitView Name="splitView" Grid.Row="1" CompactPaneLength="{Binding ActualWidth,ElementName=togglePaneButton}" DisplayMode="CompactOverlay"> <SplitView.Pane> <ListBox Name="listBox" SelectionChanged="listBox_SelectionChanged"> <ListBoxItem Tag="Financial" IsSelected="True"> <StackPanel Orientation="Horizontal"> <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" VerticalAlignment="Center" Text=""/> <TextBlock FontSize="30" Margin="10,0,0,0" Text="Financial"/> </StackPanel> </ListBoxItem> <ListBoxItem Tag="Food"> <StackPanel Orientation="Horizontal"> <TextBlock FontFamily="Segoe MDL2 Assets" FontSize="30" VerticalAlignment="Center" Text=""/> <TextBlock FontSize="30" Margin="10,0,0,0" Text="Food"/> </StackPanel> </ListBoxItem> </ListBox> </SplitView.Pane> <SplitView.Content> <Frame Name="contentFrame"/> </SplitView.Content></SplitView>

SplitView.Pane 是指左边可弹出的窗口,SplitView.Content 则是右边的主体内容。其中 CompactPaneLength 是指 Pane 缩起来时的宽度,同样的,这里使用了数据绑定使得它和顶部的按钮宽度一致;DisplayMode 是设置 Pane 的展示形式,大家可以逐一试试。

2. 新增导航页面

新增两个导航页面,页面内只是一张图片,如:

<Image Source="/Assets/Financial.png"/>

3. 处理事件

当我们点击导航的 ListBox 时,需要将右边的 Frame 导航至对应的页面:

if (contentFrame != null){ string tag = (e.AddedItems.FirstOrDefault() as ListBoxItem).Tag.ToString(); switch (tag) { case "Financial": contentFrame.GoBack(); backButton.Visibility = Visibility.Collapsed; break; case "Food": contentFrame.Navigate(typeof(FoodPage)); backButton.Visibility = Visibility.Visible; break; } titleTextBlock.Text = tag;}

可看出,当我们点击不同 ListBoxItem 时,根据它的 Tag 属性进行判断跳转,同时更新返回按钮的可见性和标题的内容。

返回返回按钮的事件则是:

listBox.SelectedIndex = 0;

因为我们手动将 ListBox 的选中项改为第一个,所以会触发 SelectionChange 的事件。

至此,一个简单可用的“汉堡包”导航应用就完成了,与视频的解决办法有点不一样。

原视频链接:

UWP24

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台