c# - 在我的 Xamarin.Forms PCL 项目中实现 FlyoutNavigation

Question

我一直在到处寻找如何在我的 Xamarin.Forms PCL 项目中实现这个 IOS 平台特定的 UI 组件(https://components.xamarin.com/view/flyoutnavigation)，但我一直无法理解这是如何实现的。

我遇到了多个我可能会使用的“流行语”，但我还是太新了，无法完全理解它们的什么意思以及我如何我将能够使用它们:

1. 自定义渲染器: 有了这个，我了解到可以自定义 Xamarin.Forms 中可用的组件并创建导出程序集，以便将特定于平台的代码从各自的平台“推送”到这些组件。

2. 依赖注入(inject): 有了这个，我明白了可以创建类，并在这些类的构造方法中，传递允许我们合并特定于平台的代码的对象。 (怎么样？我不知道...)

3. Xamarin.Forms 依赖服务: 有了这个，我明白我们可以以某种方式从共享代码(来自可移植库类)中集成平台特定代码

拜托，我的知识有很多空白，我非常努力地理解，但我就是无法理解它!

预先感谢您的帮助。

Answer 1

首先用 .cs 创建一个 xaml 页面并将名称命名为“MenuMasterPage”xaml 代码

<?xml version="1.0" encoding="UTF-8"?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestAppForms.Pages.MenuMasterPage">
 <MasterDetailPage.Master>
                <ContentPage Icon="hamburger_menu.png" Title="Daily Expense" BackgroundColor="#000000"> <!-- Menu Title background color -->
               <StackLayout VerticalOptions="FillAndExpand">
                  <ListView x:Name="MenuListView" ItemsSource="{Binding MainMenuItems}" ItemSelected="MainMenuItem_Selected" VerticalOptions="FillAndExpand" SeparatorVisibility="None" BackgroundColor="#f5f5f5"> <!-- Menu background color -->
                <ListView.ItemTemplate>
                <DataTemplate>
                            <ImageCell Text="{Binding Title}" ImageSource="{Binding Icon}" TextColor="Black"/>
                         </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
            </ContentPage>
        </MasterDetailPage.Master>
 </MasterDetailPage>

MenuMasterPage.cs代码

public partial class MenuMasterPage : MasterDetailPage  
    {
        public List<MainMenuItem> MainMenuItems { get; set; }
        public MenuMasterPage()
        {
            // Set the binding context to this code behind.
            BindingContext = this;

            // Build the Menu
            MainMenuItems = new List<MainMenuItem>()
        {
                new MainMenuItem() { Title = "Add Daily Expense", Icon = "menu_inbox.png", TargetType = typeof(Page1) },
                new MainMenuItem() { Title = "My Expenses", Icon = "menu_stock.png", TargetType = typeof(Page2) }
        };

            // Set the default page, this is the "home" page.
            Detail = new NavigationPage(new Page1());

            InitializeComponent();
        }
        // When a MenuItem is selected.
        public void MainMenuItem_Selected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MainMenuItem;
            if (item != null)
            {
                if (item.Title.Equals("Add Daily"))
                {
                    Detail = new NavigationPage(new AddDailyExpensePage());
                }
                else if (item.Title.Equals("My Expenses"))
                {
                    Detail = new NavigationPage(new MyExpensesPage());
                }

                MenuListView.SelectedItem = null;
                IsPresented = false;
            }
        }
    }
 public class MainMenuItem
    {
        public string Title { get; set; }
        public Type TargetType { get; set; }
        public string Icon { get; set; }
    }

在你的 App.xaml.cs 中用这个替换代码

public App()
        {
            InitializeComponent();
       {
                MainPage = new MenuMasterPage();
            }
            catch(Exception ex)
            {
                Console.WriteLine(ex.Message);
                }
        }