Hi, guys!. so... I need to create a vertical listview with 3 options like this image!.
A friend helped me a little bit!. but I do have some issue with 'SubViewText' when I use 'Frame' on 'SubViewText' he crashed the app... and when I remove 'Frame' he worked but. does not work as expected. Look at this recorded by me. https://youtube.com/watch?v=dMa7olPCQyM
My MainPage.xaml With 'Frame' crashing the app when I remove 'Frame' he worked
<?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:App11"
x:Class="App11.MainPage"
BackgroundColor="White">
<StackLayout>
<ListView ItemsSource="{Binding MyModel}" HasUnevenRows="True" TranslationY="250">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Frame Margin="10,20,100,5" OutlineColor="#3E161A" HasShadow="true" HeightRequest="30" CornerRadius="10" TranslationX="40" BackgroundColor="#3E161A">
<Grid HorizontalOptions="FillAndExpand" BackgroundColor="#3E161A" Margin="-25,-5,-20,-10" TranslationY="-14" >
<!--1st View-->
<StackLayout>
<Label Text="{Binding Title}" TextColor="White" FontAttributes="Bold" TranslationX="20" TranslationY="15" />
<Label Text="{Binding SubTitle}" TextColor="White" FontAttributes="Bold" FontSize="10" TranslationX="20" TranslationY="8" />
</StackLayout>
<StackLayout Orientation="Horizontal" Grid.Column="1" Grid.Row="0">
<Label Text="{Binding Dollar}" TextColor="White" FontSize="16" FontAttributes="Bold" TranslationY="20" TranslationX="5" />
<Label Text="▼" Margin="30,0,0,0" FontSize="Large" TextColor="White" TranslationY="15">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="ShowSubView" />
</Label.GestureRecognizers>
</Label>
</StackLayout>
<!--SubView-->
<Frame Margin="0,40,-160,-10" BorderColor="Gray" BackgroundColor="#722f38" CornerRadius="10" TranslationY="40">
<StackLayout BackgroundColor="#722f38" IsVisible="False" HeightRequest="60">
<Label Text="{Binding SubViewText}" TextColor="White" TranslationY="-5" FontSize="10" FontAttributes="Bold"/>
</StackLayout>
</Frame>
</Grid>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
My MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace App11
{
public partial class MainPage : ContentPage
{
public MainPage()
{
// Initialize Live Reload.
#if DEBUG
LiveReload.Init();
#endif
InitializeComponent();
this.BindingContext = new MainPageViewModel();
}
private void ShowSubView(object sender, EventArgs e)
{
var item1 = ((Label)sender);
var FirstView = ((Grid)((StackLayout)item1.Parent).Parent);
var item2 = ((StackLayout)FirstView.Children[2]);
if (item2.IsVisible)
{
Grid.SetRow(item2, 0);
item2.IsVisible = false;
}
else
{
Grid.SetRow(item2, 1);
item2.IsVisible = true;
}
}
}
}
My MainPageModel.cs
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Text;
namespace App11
{
public class MainPageModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
private string title;
public string Title
{
get { return title; }
set
{
title = value;
OnPropertyChanged("Title");
}
}
private string subTitle;
public string SubTitle
{
get { return subTitle; }
set
{
subTitle = value;
OnPropertyChanged("SubTitle");
}
}
private string dollar;
public string Dollar
{
get { return dollar; }
set
{
dollar = value;
OnPropertyChanged("Dollar");
}
}
private string subViewText;
public string SubViewText
{
get { return subViewText; }
set {
subViewText = value;
OnPropertyChanged("subViewText");
}
}
}
}
My MainPageViewModel.cs
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Text;
namespace App11
{
public class MainPageViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void OnPropertyChanged(string name)
{
if (this.PropertyChanged != null)
this.PropertyChanged(this, new PropertyChangedEventArgs(name));
}
private ObservableCollection<MainPageModel> myModel;
public ObservableCollection<MainPageModel> MyModel
{
get { return myModel; }
set
{
myModel = value;
OnPropertyChanged("MyModel");
}
}
public MainPageViewModel()
{
MyModel = new ObservableCollection<MainPageModel>()
{
new MainPageModel()
{
Title = "MENSAL",
SubTitle = "cobranças a cada 30 dias",
Dollar = "R$ 22,90",
SubViewText = "Acesso a 10 campanhas por mês Até 3 campanhas por mês Visualização de perfil limitada"
},
new MainPageModel()
{
Title = "TRIMESTRAL",
SubTitle = "cobranças a cada 90 dias",
Dollar = "R$ 49,90",
SubViewText = "Acesso a rola do kid bengala quase ilimitada"
},
new MainPageModel()
{
Title = "SEMESTRAL",
SubTitle = "cobranças a cada 180 dias",
Dollar = "R$ 99,90",
SubViewText = "Acesso a rola do kid bengala ilimitada"
}
};
}
}
}