Question

Xamarin Forms Cross Platform。 1.我正在使用Shell创建标签栏，其中一个标签栏由listview组成。 2.每个单元格将导航到其详细信息页面。

我的问题在这里：由于我使用的是Shell（xamarin 4.0的新功能），因此我不知道如何制作listview导航页面。

感谢那些使用shell导航使我的列表视图中的单元格能够导航到特定页面的人。

<StackLayout  Orientation="Vertical">
        <Frame BackgroundColor="DarkOrange" HeightRequest="100" Margin="10,10,10,20" BorderColor="Black" HasShadow="True">

        </Frame>
        <ListView x:Name="ListView" SeparatorVisibility="Default" SeparatorColor="Red" IsPullToRefreshEnabled="True"

                  >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Image Source="{Binding Icon}"/>
                            <Label Text="{Binding Name}"  FontAttributes="Bold" VerticalTextAlignment="Center" 
                                   HorizontalOptions="StartAndExpand"/>
                            <Image Source="{Binding RightArrowIcon}" HorizontalOptions="End"/>
                        </StackLayout>
                    </ViewCell>

                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>
    </StackLayout>

async private void ListView_ItemSelected(object sender, 
SelectedItemChangedEventArgs e)
    {
        if(e.SelectedItem != null)
        {
            var listview = e.SelectedItem as MeListView;
            var name = listview.Name.ToString();

            if (e.SelectedItem == null)
                return;

            ListView.SelectedItem = null; //clear the selected item when 
back to the listview.

            switch (name)
            {
                case "Payment Methods":                        
                    await Navigation.PushAsync(new PaymentPage(listview));                        
                    break;
                case "Setting":
                    await Navigation.PushAsync(new SettingPage(listview));
                    break;
                case "FAQ":
                    await Navigation.PushAsync(new FaqPage(listview));
                    break;
                case "Terms & Conditions":
                    await Navigation.PushAsync(new TermsPage(listview));
                    break;

                case "About us":
                    await Navigation.PushAsync(new AboutPage(listview));
                    break;

                case "Contact us":
                    await Navigation.PushAsync(new ContactPage(listview));
                    break;
            }                
        }                
    }

Answer 1

没有内置的机制。但这很容易实现。

您可以如下使用ListView的ItemSelected或ItemTapped事件：

        <ListView x:Name="ListView" SeparatorVisibility="Default" SeparatorColor="Red" IsPullToRefreshEnabled="True" ItemTapped="OnListViewItemTapped">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <Image Source="{Binding Icon}"/>
                            <Label Text="{Binding Name}"  FontAttributes="Bold" VerticalTextAlignment="Center" 
                                   HorizontalOptions="StartAndExpand"/>
                            <Image Source="{Binding RightArrowIcon}" HorizontalOptions="End"/>
                        </StackLayout>
                    </ViewCell>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

在后面的代码中：

async void OnListViewItemTapped(object sender, ItemTappedEventArgs e)
{
    await Shell.Current.Navigation.PushAsync(new DetailsPage());
}

Answer 2

我的问题在这里：由于我使用的是Shell（xamarin 4.0的新功能），所以我不知道如何制作listview导航页面。

首先在{strong> Xaml 中将ItemSelected="OnItemSelected"添加到ListView：

 <ListView x:Name="ListView" SeparatorVisibility="Default" SeparatorColor="Red" IsPullToRefreshEnabled="True" ItemSelected="OnItemSelected">
     <ListView.ItemTemplate>
            //...
     </ListView.ItemTemplate>
</ListView>

然后在OnItemSelected函数中，您可以编写导航功能。在Shell应用中，您还可以使用Navigation.PushAsync导航到下一页。如下：

void OnItemSelected(object sender, SelectedItemChangedEventArgs args)
{
    var item = args.SelectedItem as Item;
    if (item == null)
        return;

    switch (args.SelectedItemIndex)
    {
        case 0:
            Console.WriteLine("Case 1");
            Navigation.PushAsync(new PayMentPage());
            break;
        case 1:
            Console.WriteLine("Case 2");
            Navigation.PushAsync(new SettingPage());
            break;
        //...
        default:
            Console.WriteLine("Default case");
            break;
    }
}

此外，shell应用程序提供了一种新的导航方式（Shell.Current.GoToAsync。为此，您应首先通过 Routes 注册页面。如下：

注册页面：

Routing.RegisterRoute("setting", typeof(SettingPage));

执行导航：

Shell.Current.GoToAsync("setting");

这是使用shell导航的简便方法，还有关于路线和导航的其他要点。这里是official document供参考。

==================================更新============ =======================

如果要导航到详细信息页面，而标签栏不可见，则可以在“详细信息页面”中手动执行此操作。

Shell.SetTabBarIsVisible(this, false);

如何使用Xamarin表单跨平台在外壳选项卡栏中创建ListView导航？

2 个答案: