Step1: CardDataModel
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace AwesomeCardView.Model
{
public class CardDataModel
{
public string HeadTitle { get; set; }
public string HeadLines { get; set; }
public string HeadLinesDesc { get; set; }
public string ProfileImage { get; set; }
}
}
Step 2: Card View Template.Xaml
<?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="AwesomeCardView.View.CardViewTemplate"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
xmlns:local="clr-namespace:AwesomeCardView">
<Frame IsClippedToBounds="True"
HasShadow="True"
BackgroundColor="White" >
<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="Gray" >
</Label>
</StackLayout>
<Grid Grid.Row="1">
<StackLayout Orientation="Horizontal">
<Label FontAttributes="None"
Grid.Row="1"
HorizontalTextAlignment="Start"
VerticalTextAlignment="Start"
FontSize="12"
Text="{Binding HeadLines, Mode = TwoWay}" TextColor="Black">
</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" VerticalOptions="Start"/>
</Grid>
</Grid>
</StackLayout>
</Frame>
</ContentView>
Step3:
CardViewTemplate.Xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using Xamarin.Forms.Xaml;
namespace AwesomeCardView.View
{
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class CardViewTemplate : ContentView
{
public CardViewTemplate()
{
InitializeComponent();
}
}
}
Step4: CardDataViewModel
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
using AwesomeCardView.Model;
namespace AwesomeCardView.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
{
HeadTitle = " 1 day ago - FaceBook ",
HeadLines="Samsung SM-T385S with Android 7.0 gets Wifi certified - GSM Arena News " ,
ProfileImage = "Person_7.jpg",
HeadLinesDesc = "Facebook is a social networking service launched on February 4........small sample based on your scenario. Please review my project and let us know ",
},
new CardDataModel
{
HeadTitle = " 9 hrs ago - The Indipendendent",
HeadLines="Game of THrones season 7 : Fans think Catelyn's Stark's Ghost was" ,
HeadLinesDesc = "The Independent is a British online newspaper.[2]............small sample based on your scenario. Please review my project and let us know",
ProfileImage = "Person_2.png"
},
new CardDataModel
{
HeadTitle = " 10 hrs ago - Power BI Microsoft",
HeadLines ="Announcing the Power BI Solution Tempelate for Azure Activity Log" ,
HeadLinesDesc = "Microsoft Corporation (/ˈmaɪkrəˌsɒft/,[2][3] abbreviated.............small sample based on your scenario. Please review my project and let us know",
ProfileImage = "Person_3.png"
},
new CardDataModel
{
HeadTitle = " 13 hrs ago - MacRumors ",
HeadLines = "MacRumors.com is a website that aggregates Mac and Apple",
HeadLinesDesc="Google Rolls Out Anti-Polishing Feature to Gmail on Ios",
ProfileImage = "Person_4.jpg"
},
new CardDataModel
{
HeadTitle= " 15 hrs ago - Android Authority",
HeadLinesDesc = "If you have read Jules Verne’s Around the World...........small sample based on your scenario. Please review my project and let us know" ,
HeadLines="Set it and forget it : 5 Things you should always automate on your phone" ,
ProfileImage = "Person_5.jpg"
},
new CardDataModel
{
HeadTitle = " 16 hrs ago - MacRumors",
HeadLinesDesc = "MacRumors.com is a website that aggregates Mac and Apple related news................small sample based on your scenario. Please review my project and let us know,",
HeadLines="Set it and forget it : 5 Things you should always automate on your phone" ,
ProfileImage = "Person_1.png"
},
new CardDataModel
{
HeadTitle = " 19 hrs ago - Android Authority",
HeadLinesDesc = "MacRumors.com is a website that aggregates Mac and Apple.........small sample based on your scenario. Please review my project and let us know",
HeadLines="Set it and forget it : 5 Things you should always automate on your phone" ,
ProfileImage = "Person_2.png"
},
// AlertColor = Color.Green : Color.Blue, This can be added to set alert dialog inside card data model
};
}
}
}
}
Step 5: MainPage.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:AwesomeCardView"
xmlns:view="clr-namespace:AwesomeCardView.View;assembly=AwesomeCardView"
xmlns:viewModel="clr-namespace:AwesomeCardView.ViewModel;assembly=AwesomeCardView"
x:Class="AwesomeCardView.MainPage"
Title="Lets Hack It">
<ContentPage.BindingContext>
<viewModel:CardDataViewModel/>
</ContentPage.BindingContext>
<StackLayout Orientation="Vertical">
<Label Text="Google List View"
VerticalOptions="Start"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand" />
<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>
Step6:
MainPage.Xaml.cs
<pre class="code">using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace AwesomeCardView
{
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
}
}
}
</pre>
Step -7: Holaaa We are All Done No More Steps :D....
No comments:
Post a Comment