Question

您好我正在开发一个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;

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

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

我在发布之前尝试使用Google搜索所有内容，所以任何帮助都会很棒！

提前致谢！：）

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

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

1 个答案: