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


    首先看目标:

    我们要做一个类似上图的应用,通过左侧的“汉堡包”导航可以切换右边的内容(只是图片而已),同时更新顶部的标题,以及当切换到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="&#xE700;"
                Click="togglePaneButton_Click"/>
        <Button Name="backButton"
                RelativePanel.RightOf="togglePaneButton"
                FontFamily="Segoe MDL2 Assets" FontSize="30"
                Visibility="Collapsed"
                Content="&#xE0A6;"
                Click="backButton_Click"/>
        <TextBlock Name="titleTextBlock"
                   RelativePanel.RightOf="backButton"
                   FontSize="30"/>
        <Button Name="searchButton"
                RelativePanel.AlignRightWithPanel="True"
                FontFamily="Segoe MDL2 Assets" FontSize="30"
                Content="&#xE11A;"/>
        <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="&#xE128;"/>
                        <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="&#xE006;"/>
                        <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

  • 相关阅读:
    【iCore4 双核心板_ARM】例程三十三:SD_IAP_ARM实验——更新升级STM32
    【iCore4 双核心板_ARM】例程三十二:UART_IAP_ARM实验——更新升级STM32
    【iCore4 双核心板_ARM】例程三十一:HTTP_IAP_FPGA实验——更新升级FPGA
    【iCore4 双核心板_ARM】例程三十:U_DISK_IAP_FPGA实验——更新升级FPGA
    【iCore4 双核心板_ARM】例程二十九:SD_IAP_FPGA实验——更新升级FPGA
    【iCore4 双核心板_ARM】例程二十八:FSMC实验——读写FPGA
    【iCore4 双核心板_ARM】例程二十七:LWIP_NETIO实验——以太网测速
    【iCore4 双核心板_ARM】例程二十六:LWIP_MODBUS_TCP实验——电源监控
    【iCore4 双核心板_ARM】例程二十五:LWIP_DNS实验——域名解析
    【iCore4 双核心板_ARM】例程二十四:LWIP_DHCP实验——动态分配IP地址
  • 原文地址:https://www.cnblogs.com/xiaoshi3003/p/5021939.html
Copyright © 2020-2023  润新知