C# 如何通过单击xamarin表单中的数据模型中的项来推送到另一个页面？

您好，我正在开发一个xamarin表单应用程序，它在cardview中显示数据收集。我想做的是，当用户点击一张卡片时，它会把你带到另一个页面

以下是我的卡数据视图型号代码：

using appname.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using Xamarin.Forms;

namespace appname.ViewModel
{
    public class CardDataViewModel
    {
        public IList<CardDataModel> CardDataCollection { get; set; }

        public object SelectedItem { get; set; }

        public CardDataViewModel()
        {
            CardDataCollection = new List<CardDataModel>();
            GenerateCardModel();
        }

        private void GenerateCardModel()
        {
            // for (var i = 0; i < 10; i++)
            {
                CardDataCollection = new ObservableCollection<CardDataModel>
                {
                    new CardDataModel(typeof(FindArtistsPage))
                    {
                         HeadLines ="Find Artists Near You" ,
                         ProfileImage = "Person_7.jpg",
                         HeadLinesDesc = "Find Pefromers Near your location",
                         // Code to go another page should go here
                    },
                };
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace appname.Model
{
    public class CardDataModel
    {
        public CardDataModel(Type type)
        {
        }

        public string HeadTitle { get; set; }
        public string HeadLines { get; set; }
        public string HeadLinesDesc { get; set; }
        public string ProfileImage { get; set; }
    }
}

最后是我的卡数据模型代码：

using appname.Model;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Text;
using Xamarin.Forms;

namespace appname.ViewModel
{
    public class CardDataViewModel
    {
        public IList<CardDataModel> CardDataCollection { get; set; }

        public object SelectedItem { get; set; }

        public CardDataViewModel()
        {
            CardDataCollection = new List<CardDataModel>();
            GenerateCardModel();
        }

        private void GenerateCardModel()
        {
            // for (var i = 0; i < 10; i++)
            {
                CardDataCollection = new ObservableCollection<CardDataModel>
                {
                    new CardDataModel(typeof(FindArtistsPage))
                    {
                         HeadLines ="Find Artists Near You" ,
                         ProfileImage = "Person_7.jpg",
                         HeadLinesDesc = "Find Pefromers Near your location",
                         // Code to go another page should go here
                    },
                };
            }
        }
    }
}

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;

namespace appname.Model
{
    public class CardDataModel
    {
        public CardDataModel(Type type)
        {
        }

        public string HeadTitle { get; set; }
        public string HeadLines { get; set; }
        public string HeadLinesDesc { get; set; }
        public string ProfileImage { get; set; }
    }
}

编辑我忘了为卡片用户界面输入xaml代码，代码如下：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              xmlns:local="clr-namespace:appname"
             xmlns:view="clr-namespace:appname.View;assembly=appname"
             xmlns:viewModel="clr-namespace:appname.ViewModel;assembly=appname"
             x:Class="appname.HomePage">
    <ContentPage.BindingContext>
        <viewModel:CardDataViewModel/>
    </ContentPage.BindingContext>

    <StackLayout Orientation="Vertical" BackgroundColor="White">

        <ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}" 
              RowHeight="150" 
              ItemsSource="{Binding CardDataCollection}" HasUnevenRows="True"  >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <view:CardViewTemplate/>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

以及CardViewTemplate代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="appname.View.CardViewTemplate"
             xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
             xmlns:local="clr-namespace:appname">
    <Frame IsClippedToBounds="True"
         HasShadow="True"
         BackgroundColor="#443b3e" >
        <Frame.OutlineColor>
            <OnPlatform x:TypeArguments="Color"
                  Android="Gray"
                  iOS="Gray"/>
        </Frame.OutlineColor>
        <Frame.Margin>
            <OnPlatform x:TypeArguments="Thickness"
                  Android="7" iOS="7"/>
        </Frame.Margin>
        <Frame.Padding>
            <OnPlatform x:TypeArguments="Thickness"
                  Android="5" iOS="5"/>
        </Frame.Padding>
        <StackLayout Orientation="Horizontal">

            <Grid VerticalOptions="CenterAndExpand"
            Padding="0"
            HorizontalOptions="FillAndExpand"
            BackgroundColor="Transparent">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="*"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <StackLayout Orientation="Horizontal" VerticalOptions="Start" >
                    <controls:CircleImage Source="{Binding ProfileImage}" VerticalOptions="Start" HeightRequest="30" WidthRequest="30"></controls:CircleImage>
                    <Label FontAttributes="None"
               Grid.Row="0"
               HorizontalTextAlignment="Start"
               VerticalTextAlignment="Center"
               FontSize="12"
               Text="{Binding HeadTitle , Mode = TwoWay}" TextColor="White"  >
                    </Label>



                </StackLayout>
                <Grid Grid.Row="1">
                    <StackLayout Orientation="Horizontal">
                        <Label FontAttributes="None"
               Grid.Row="1"
               HorizontalTextAlignment="Start"
               VerticalTextAlignment="Start"
               FontSize="30"
               Text="{Binding HeadLines, Mode = TwoWay}" TextColor="White" HorizontalOptions="Center">

                        </Label>
                        <Image Source="{Binding  ProfileImage}"  Grid.Row="2"  WidthRequest="40" HeightRequest="40" HorizontalOptions="End" />
                    </StackLayout>
                </Grid>

                <Grid Grid.Row="2"
              BackgroundColor="Transparent"
              Padding="4">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>
                    <Label Grid.Row="0"
                 Grid.Column="0"
                 />
                    <Label Grid.Row="0"
                 Grid.Column="0"
                 Text="{Binding HeadLinesDesc}" HorizontalOptions="Start" TextColor="White" VerticalOptions="CenterAndExpand"/>
                </Grid>

            </Grid>
        </StackLayout>
    </Frame>
</ContentView>

在发布这篇文章之前，我已经试着用谷歌搜索了所有我能搜索到的东西，所以任何帮助都将是惊人的

---

提前感谢！：）

假设您希望导航到特定于卡片的页面，我将为您提供一些如何操作的提示

---

首先，你在这里有一个错误

@Jason谢谢你的链接，但是那些只与按钮点击一起工作，我没有一个可以点击的按钮。卡片根据CardDataModel中的内容显示。还有其他建议吗？提前感谢：）是什么让你认为它只适用于点击按钮？问题是您不了解表单中的导航，还是您不了解如何捕获卡上的点击事件？还是别的什么？请具体说明问题。如何显示卡？通过ContentPage还是ContentView？列表格式？@adimano这些卡片显示在列表视图中我已经用xaml页面代码更新了问题请查看让我知道你的想法！提前感谢：）谢谢你的回答！我尝试了你的建议，但我得到了以下错误：错误CS0103当前版本中不存在“导航”名称。有关如何修复此错误的任何建议（提前感谢！）@Phoneswapshop只需导入所需的任何依赖项。@Phoneswapshop错误是在编译时还是在运行时？@Phoneswapshop。您必须将
主页
包装在
导航页面
中。然后你可以使用
Application.Current.MainPage.Navigation
code我尝试了你的建议，这样就消除了错误，但是当我点击卡片时，它不会带我进入FindArtList页面。你知道为什么吗？感谢迄今为止的所有帮助！：）