Hello I am working on a xamarin forms app that displays data collections in a cardview. What I am trying to do is when the user taps on a card it takes you to another page
here is my card data view model code:
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
},
};
}
}
}
}
Here is my card code:
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; }
}
}
and finally here is my card data model code:
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; }
}
}
EDIT I forgot to put the xaml code for the card Ui here is that code:
<?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>
And the CardViewTemplate Code:
<?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>
I have tried googling everything I could before posting this so any help would be amazing!
Thanks in advance! :)
I will give you some pointers on how to do it, assuming you want to navigate to a Card Specific Page.
First you have a error here <ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
.. Make it {Binding SelectedItem}
Second that binding isn't doing anything. If you want to run something, make it a Command
and then bind it.
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
},
};
}
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.