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

Question

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

这是我的卡片数据视图模型代码：

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;

namespace appname.ViewModel
{
    public class Cards 
    { 
        public Cards (string name, string image)
        {
            this.Name = name;
            this.Image = image;
        }

        public string Name { private set; get; }

        public string Image { private set; get; }
    }
}

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

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; }
    }
}

编辑我忘了把卡 Ui 的 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>

在发布此内容之前，我已尝试在谷歌上搜索所有可能的内容，因此任何帮助都会令人惊叹！

提前致谢！ :)

Answer 1

假设您要导航到卡片特定页面，我将为您提供一些指导。

首先你在这里有一个错误<ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}".. 让它{Binding SelectedItem}

其次，绑定没有做任何事情。如果你想运行一些东西，把它设为Command然后绑定它。

public IList<CardDataModel> CardDataCollection { get; set; }

    public ICommand SelectedItem;

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

    private async void NavigateToCardPage(CardDataModel c)
    {
        await Application.Current.MainPage.Navigation.PushAsync(new CardPage(c));
    }

    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
                },
            };
        }
    }
}