is it possible to create a list of cards with multiple buttons in xamarin forms? - xamarin.forms

I looked for open codes or nuget that could help me with this question, I would like to create a list of Cards like these in the images, where I could have several click events, but could get the id of the item that fills the card.
Eu tentei com CollectionView, porem não consigo pegar a id do item do card, nem com uma label e o x:Name atribuído a essa label.
Segue o cod xaml que criei
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage.Resources>
<converters:ByteArrayToImageSourceConverter x:Key="ByteArrayToImage" />
</ContentPage.Resources>
<ContentPage.Content>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Image.GestureRecognizers HeightRequest="30" WidthRequest="30">
</Image.GestureRecognizers>
<CollectionView ItemsSource="{Binding Items}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Padding="0" Margin="2">
<Grid>
<StackLayout Padding="0" Margin="5,25,10,0" HorizontalOptions="Center">
<Frame BackgroundColor="White" HeightRequest="440" WidthRequest="330" HasShadow="True" Padding="5" Margin="0">
<StackLayout>
<Label x:Name="lblMessage" HorizontalOptions="StartAndExpand" Text="Rep:" IsVisible="false"></Label>
<StackLayout HeightRequest="100" WidthRequest="320" Orientation="Horizontal" HorizontalOptions="Fill">
<Frame HeightRequest="100" WidthRequest="320" BackgroundColor="Transparent" Padding="0" Margin="0">
<ImageButton Source="{Binding ImagemVideo, Converter={StaticResource ByteArrayToImage}}" Aspect="AspectFill" Margin="0" Clicked="Video_Clicked"/>
</Frame>
</StackLayout>
<Frame BorderColor="Transparent" BackgroundColor="White" HorizontalOptions="CenterAndExpand">
<Label Grid.Column="0"
TextColor="#000000"
Text="{Binding NomeTreino}"
FontAttributes="None"
HorizontalOptions="FillAndExpand"
HorizontalTextAlignment="Start"
Margin="8,0,10,10"
FontSize="Medium"/>
</Frame>
<Frame BorderColor="LightGray" BackgroundColor="White" HorizontalOptions="StartAndExpand">
<Label Grid.Row="2" HorizontalOptions="StartAndExpand" Text="{Binding Descricao}"/>
</Frame>
<StackLayout Padding="0" Margin="5,5">
<Grid Visual="Material">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="65"/>
<RowDefinition Height="65"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Visual="Material" Grid.Column="0" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Carga:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding cargaInicial}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="0" Grid.Column="1" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Séries:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding serie1}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" BorderColor="LightGray">
<StackLayout >
<Label HorizontalOptions="StartAndExpand" Text="Rep:"></Label>
<Label HorizontalOptions="CenterAndExpand" Text="{Binding repeticao1}"></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" BorderColor="LightGray">
<StackLayout >
<!--<Image Source="prod.jpg"></Image>-->
<Label Text="{Binding tempoIntervalo}" ></Label>
</StackLayout>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" BorderColor="LightGray">
<StackLayout >
<ImageButton BackgroundColor="White" Source="Checkblue.png" Aspect="Fill" HeightRequest="20" WidthRequest="20" Margin="0" Clicked="BtnCheck_Clicked"/>
</StackLayout>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Frame>
</StackLayout>
</Grid>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</ScrollView>
</StackLayout>
</ContentPage.Content>

in your event handler
protected void ButtonClicked(object Sender, EventArgs args)
{
var btn = (Button)sender;
var item = (MyClassName)btn.BindingContext;
// now you can access an property on item that you need
}

Related

unable to navigate the content page when i click on button using xamarin forms

Im unable to navigate the content page when i click on button using xamarin forms. It is working on Android but not working in IOS.
Kindly check the below code.
ButtonClick Event
Navigation.PushAsync(new LeaveRequestAddEdit("insert"));
The xaml code is
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
<ContentPage.Content>
<StackLayout>
<Frame Padding="5" Margin="5,5,5,5" CornerRadius="10" HasShadow="True" BackgroundColor="White" BorderColor="LightBlue">
<Grid BackgroundColor="White" x:Name="LeaveRequestContainer">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" Orientation="Horizontal">
<RadioButton x:Name="OnedayRadioBtn" Clicked="OnedayRadioBtn_Clicked" />
<Label Text="One Day" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<StackLayout Grid.Row="0" Grid.Column="1" Orientation="Horizontal">
<RadioButton x:Name="MultipledaysRadioBtn" Clicked="MultipledaysRadioBtn_Clicked"/>
<Label Text="Multiple Days" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</StackLayout>
<Label x:Name="selectlable" Text="Select :" Margin="50,0,0,0" IsVisible="False" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="selectdate" IsVisible="False" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand" />
<Label x:Name="fromdatelabel" Text="From Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="1" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="fromdate" IsVisible="False" DateSelected="fromdate_DateSelected" Date="{Binding FromDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="1" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Label x:Name="todatelable" Text="To Date :" IsVisible="False" Margin="50,0,0,0" Grid.Row="2" Grid.Column="0" HorizontalOptions="StartAndExpand" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
<DatePicker x:Name="Todate" IsVisible="False" Date="{Binding ToDate,Mode=TwoWay}" Format="dd/MM/yyy" Grid.Row="2" Grid.Column="1" HorizontalOptions="StartAndExpand"/>
<Frame CornerRadius="10" Margin="0" Padding="0" BorderColor="LightBlue" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<local1:ExtendedEditorControl x:Name="Reason" Placeholder="Enter Reason Here" IsExpandable="True" Text="{Binding ReasonForLeave,Mode=TwoWay}" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" MaxLength="250" />
</Frame>
<StackLayout Orientation="Vertical" x:Name="ActionNoteStack" IsVisible="False" Grid.Row="4" Grid.ColumnSpan="2" Grid.RowSpan="2">
<Label x:Name="title" IsVisible="False" Text="Action Notes :" TextColor="Black" HorizontalOptions="Start" VerticalOptions="Center" />
<!--<Label Text="Action Notes :" WidthRequest="400" VerticalTextAlignment="Center" HorizontalOptions="FillAndExpand" TextColor="Blue"/>-->
<Frame x:Name="actionframe" IsVisible="False" CornerRadius="10" Margin="0" BorderColor="LightBlue" Padding="0">
<Label x:Name="actionNote" IsVisible="False" Text="{Binding ActionNotes,Mode=TwoWay}" Margin="5" VerticalOptions="Center" HorizontalOptions="FillAndExpand" />
</Frame>
</StackLayout>
</Grid>
</Frame>
<StackLayout Margin="5,0,5,5" Orientation="Horizontal" VerticalOptions="End">
<Button Text="Save" x:Name="btnSave" BackgroundColor="#6559D8" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand" Clicked="btnSave_Clicked"/>
<Button Text="Cancel" x:Name="btnCancel" Clicked="btnCancel_Clicked" BackgroundColor="Gray" CornerRadius="10" TextColor="White" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Kindly help on this. I'm new to Xamarin forms
​You can replace the Clicked event in the RadioButton with the CheckedChanged event to make it work.

Position 1st StackLayout on page at the bottom Xamarin.Forms

I am new to Xamarin and I am trying to position my first stacklayout of the page at the bottom of the screen and then scroll to see the remaining content.
Also, I have an image as background for my content page and I am trying to use scrollview for rest of the page content. I tried other solutions on StackOverflow but they have StackLayouts VerticalOptions as Center and Start which I don’t. I want the first stacklayout to start from the bottom and no control/layout above that.
Also, this contentpage acts as a Detail page for a MasterDetailPage.
This is my contentpage so far -
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="Excercise.Views.HomePage" Title="App"
NavigationPage.HasBackButton="False" BackgroundImageSource="image.jpg">
<ContentPage.ToolbarItems>
<ToolbarItem Text="Option1"></ToolbarItem>
<ToolbarItem Text="Option2"></ToolbarItem>
</ContentPage.ToolbarItems>
<!--<NavigationPage.Icon>
<OnPlatform x:TypeArguments="FileImageSource">
<On Platform="iOS" Value="tab_feed.png"/>
</OnPlatform>
</NavigationPage.Icon>-->
<ContentPage.Content>
<StackLayout Orientation="Horizontal" >
<ScrollView>
<StackLayout Orientation="Vertical" VerticalOptions="EndAndExpand">
<Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10" VerticalOptions="EndAndExpand">
<Grid VerticalOptions="EndAndExpand">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="2"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Label x:Name="Label1" FontSize="Large" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" ></Label>
<Label x:Name="Label2" FontSize="Medium" Grid.Row="0" Grid.Column="3" Grid.ColumnSpan="2"></Label>
<BoxView BackgroundColor="Black" Grid.Row="1" Grid.ColumnSpan="6"></BoxView>
<Label x:Name="Label3" FontSize="Large" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Grid.RowSpan="3"></Label>
<Label Text="Label4" Grid.Row="2" Grid.Column="1" Grid.ColumnSpan="2" Grid.RowSpan="3"></Label>
<Label x:Name="Label5" Grid.Row="5" Grid.ColumnSpan="2"></Label>
<Label x:Name="Label6" Grid.Row="2" Grid.Column="3" Grid.ColumnSpan="2"></Label>
<Label x:Name="Label7" Grid.Row="3" Grid.Column="3" Grid.ColumnSpan="2"></Label>
<Label x:Name="Label8" Grid.Row="4" Grid.Column="3" Grid.ColumnSpan="2"></Label>
<Label x:Name="Label9" Grid.Row="5" Grid.Column="3" Grid.ColumnSpan="2"></Label>
<CollectionView x:Name="collecview1" WidthRequest="100" Grid.Row="6" Grid.RowSpan="3" Grid.ColumnSpan="6" ItemsLayout="HorizontalList" >
<CollectionView.ItemTemplate>
<DataTemplate>
<StackLayout Orientation="Vertical" Padding="5,25,30,25" VerticalOptions="Center">
<Label Text="{Binding Text}"></Label>
<Image Source="{Binding Text}"></Image>
<Label Text="{Binding Text}" HorizontalTextAlignment="Center"></Label>
</StackLayout>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</Grid>
</Frame>
<Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0">
<Label Text="Label10"></Label>
<BoxView BackgroundColor="Gray" HeightRequest="2"></BoxView>
<CollectionView x:Name="collecview2" ItemsLayout="VerticalList" ItemSizingStrategy="MeasureAllItems">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Label Text="{Binding Text}" Grid.Column="0" HorizontalTextAlignment="End" ></Label>
<Label Text="Image" Grid.Column="1"></Label>
<!--<Image Source="{Binding IconSource}" Grid.Column="1"></Image>-->
<Label Text="{Binding Text}" FontAttributes="Bold" Grid.Column="2"></Label>
<Label Text="{Binding Text}" Grid.Column="3"></Label>
<Label Text="{Binding Text}" Grid.Column="4"></Label>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
</StackLayout>
</Grid>
</Frame>
<Frame BorderColor="Gray" CornerRadius="5" Padding="5" Margin="10">
<StackLayout>
<Label Text="Label23"></Label>
<BoxView BackgroundColor="Black" HeightRequest="2"></BoxView>
</StackLayout>
</Frame>
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
MainPage.xaml.cs
[DesignTimeVisible(false)]
public partial class MainPage : MasterDetailPage
{
public MainPage()
{
InitializeComponent();
MasterBehavior = MasterBehavior.Split;
Detail = new HomePage();
}
public MainPage(string City, string lockey,string StateID)
{
InitializeComponent();
Detail = new HomePage(City,lockey,StateID);
}
}
MainPage.xaml
<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:Excercise.Views"
x:Class="Excercise.MainPage" Title="App" IsPresented="False">
<MasterDetailPage.Master>
<local:MenuPage Title="MenuPage" x:Name="menuPage"></local:MenuPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<local:HomePage Title="HomePage" x:Name="homePage" BackgroundImageSource="raleigh.jpg"></local:HomePage>
</MasterDetailPage.Detail>
</MasterDetailPage>
Is there anyway to achieve this? Any help is much appreciated!
Thank you so much!
I want the first stacklayout to start from the bottom and no
control/layout above that.
You can give your first stacklayout a top margin with screen height request so that it will start from the bottom.
In xaml, give a name to your StackLayout :
<StackLayout Orientation="Vertical" VerticalOptions="End" x:Name="firstStacklayout">
In code behind:
protected override void OnAppearing()
{
base.OnAppearing();
firstStacklayout.Margin = new Thickness(0, Application.Current.MainPage.Height, 0, 0);
}

Get Label aligned when in flexlayout and frame xamarin forms

I have a flexlayout when a display some items in a frame, but all the items that have labels with text on 2 lines the icon gets pushed up and the label text do not align with each other. Any suggestions of what I am doing wrong?
my code
<Grid>
<ScrollView>
<FlexLayout
Padding="8"
AlignContent="Start"
AlignItems="Start"
BindableLayout.ItemsSource="{Binding MyItems}"
Direction="Row"
JustifyContent="Start"
Wrap="Wrap">
<BindableLayout.ItemTemplate>
<DataTemplate>
<StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"
Margin="4,4,4,4"
FlexLayout.AlignSelf="Start"
FlexLayout.Basis="{OnIdiom Phone='50%',
Tablet='33%'}">
<Frame
Margin="0"
Padding="0"
BorderColor="DarkGray"
CornerRadius="10"
HeightRequest="130"
HasShadow="True">
<StackLayout VerticalOptions="Center" HorizontalOptions="Center">
<Image Aspect="AspectFit" Source="PhotoIcon.png"
Margin="0,20,0,0" WidthRequest="50" HeightRequest="50"/>
<Label Text="{Binding Name}" Margin="0,10,0,10" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</BindableLayout.ItemTemplate>
</FlexLayout>
</ScrollView>
</Grid>
Improve your code
<Label Text="{Binding Name}" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Margin="0,10,0,10" />
Update:
Because StackLayout will not fit the size of its child elements ,so I suggest you can use Grid instead of it.
<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Aspect="AspectFit" Source="PhotoIcon.png" Margin="0,20,0,0" WidthRequest="50" HeightRequest="50"/>
<Label Grid.Row="1" Text="{Binding Name}" Margin="0,10,0,10" HorizontalTextAlignment="Center" VerticalTextAlignment="Center"/>
</Grid>

Different png images are not showing in page

I have created a page in Xamarin forms and trying to show 4 images. These images are in png format. However I can only see one png image at a time and not all of them
I have tried moving image tag outside StackLayout but it doesnt show. However if i use same png image for all 5 icons, i can see them.
If i comment first image, I can see second image only.
<ContentPage.Content>
<StackLayout HorizontalOptions="CenterAndExpand"
VerticalOptions="CenterAndExpand"
Padding="10"
Spacing="30">
<Label Style="{StaticResource HeadingLblStyle}" Text="{Binding AssetPalletScanning}" />
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
<ColumnDefinition Width=".33*"/>
</Grid.ColumnDefinitions>
<StackLayout HorizontalOptions="Center"
Spacing="10"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnInventoryPallet"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding MoveChagneCommand}"
CommandParameter="Inventory"/>
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center" BackgroundColor="{StaticResource DeepSea}">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Inventory"/>
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="inventory.png">
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Inventory"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding MoveChagneCommand}"
CommandParameter="Inventory"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding AssetInventoryPallet}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
<StackLayout HorizontalOptions="Center"
Spacing="10" Grid.Column="1"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnProductionPallet"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding MoveChagneCommand}"
CommandParameter="Production"/>
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Production"/>
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="production.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Production"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding MoveChagneCommand}"
CommandParameter="Production"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding AssetProductionPallet}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
<StackLayout HorizontalOptions="Center"
Spacing="10" Grid.Column="2"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnTeardownPallet"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="teardown.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding MoveChagneCommand}" CommandParameter="Teardown"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding MoveChagneCommand}"
CommandParameter="Teardown"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding AssetTeardownPallet}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
</Grid>
<Label Style="{StaticResource HeadingLblStyle}" Text="{Binding StorageUnitLocation}" />
<StackLayout HorizontalOptions="Center"
Spacing="10"
Style="{StaticResource VStackStyle}">
<Grid WidthRequest="100" HeightRequest="100">
<ct:CustomButton x:Name="btnMoveChange"
Grid.Row="0"
WidthRequest="100"
HeightRequest="100"
HorizontalOptions="Center"
VerticalOptions="Center"
BackgroundColor="{StaticResource DeepSea}"
BorderRadius="50"
Command="{Binding PalletZoneCommand}" />
<StackLayout Grid.Row="0"
WidthRequest="50"
HeightRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center">
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Command="{Binding PalletZoneCommand}" />
</StackLayout.GestureRecognizers>
<Image HorizontalOptions="Center"
VerticalOptions="Center"
Source="zone_location.png" >
<Image.GestureRecognizers>
<TapGestureRecognizer Command="{Binding PalletZoneCommand}"/>
</Image.GestureRecognizers>
</Image>
</StackLayout>
</Grid>
<Button HorizontalOptions="CenterAndExpand"
BackgroundColor="Transparent"
Command="{Binding PalletZoneCommand}"
FontFamily="{StaticResource RegularFont}"
FontSize="{StaticResource BigSize}"
Text="{Binding PalletZoneLocation}"
TextColor="{StaticResource HippieBlue}" />
</StackLayout>
</StackLayout>
</ContentPage.Content>
Expected result - It should show all 5 icons but Actual result - It shows only one icon at a time and shows all if same image used
I think you're missing Grid.Row attributes on your StackLayouts inside your top-level Grid - so they all end up displaying on the 0th row.

Xamarin Forms ListView with HasUnEvenRows=True Occupies complete screen

I have different views along with ListView on my screen. ListView almost fills the screen and elements below the ListView are not visible. I have set HasUnEvenRows=True because each list item has different height.
<StackLayout Spacing="0">
<local:PageHeader></local:PageHeader>
<Grid Padding="25,15,25,10" Grid.RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Label Grid.Column="0" Grid.Row="0" VerticalOptions="CenterAndExpand" Grid.ColumnSpan="1" Text="{local:Translate FROM_COLON}" FontSize="18"></Label>
<StackLayout Orientation="Vertical" Grid.Column="1" Grid.Row="0" Grid.RowSpan="3" Grid.ColumnSpan="3">
<Label Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontStyle="Bold" FontSize="18"></Label>
<Label Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.DarkBlue}" FontSize="18"></Label>
</StackLayout>
<ContentView Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="3" Padding="0,15,0,0">
<Button Text="{Binding DetailsButtonTitle}" Clicked="OnDetailButtonClick" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.DarkBlue}" HorizontalOptions="Start" VerticalOptions="StartAndExpand" Padding="0"></Button>
</ContentView>
<Button Grid.Column="3" Grid.Row="1" Grid.RowSpan="{Binding ReplyButtonRowSpan}" Text="{local:Translate REPLY}" Image="reply_arrow_small" BackgroundColor="Transparent" TextColor="{x:Static local:ColorUtils.Gray}" HorizontalOptions="End" VerticalOptions="EndAndExpand" Padding="0" FontSize="13" WidthRequest="65" Clicked="OnReplyButtonClick"></Button>
<Label Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown, Converter={local:NotConverter Convert}}" Text="{Binding HumanizedDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
<ContentView Padding="0,0,0,5" Grid.Column="0" Grid.Row="2" IsVisible="{Binding IsDetailShown}" >
<Label Text="{local:Translate FROM_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<StackLayout Orientation="Horizontal" Grid.Column="1" Grid.Row="2" Grid.RowSpan="2" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}">
<Label VerticalTextAlignment="Start" Text="{Binding Group}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<Label VerticalTextAlignment="Start" Text="{Binding Sender, StringFormat='<{0}>'}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</StackLayout>
<Label Grid.Column="0" Grid.Row="4" Grid.RowSpan="1" IsVisible="{Binding IsDetailShown}" Text="{local:Translate TO_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
<ListView x:Name="ListToAddresses" Grid.RowSpan="1" Grid.Column="1" Grid.Row="4" Grid.ColumnSpan="3" IsVisible="{Binding IsDetailShown}" HeightRequest="{Binding ListHeight}" VerticalOptions="Start" HasUnevenRows="True" CachingStrategy="RecycleElement" ItemsSource="{Binding Recipients}" SeparatorVisibility="None">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell IsEnabled="False">
<StackLayout VerticalOptions="Start" Padding="0,0,0,12" >
<Label Text="{Binding Path=Key}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" VerticalOptions="Start" />
<Label Text="{Binding Path=Value}" VerticalTextAlignment="Start" TextColor="{x:Static local:ColorUtils.Gray}" VerticalOptions="Start" />
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<ContentView Padding="0,5,0,0" Grid.Column="0" Grid.Row="5" IsVisible="{Binding IsDetailShown}">
<Label Text="{local:Translate DATE_COLON}" TextColor="{x:Static local:ColorUtils.Gray}" FontStyle="Bold" />
</ContentView>
<Label Grid.Column="1" Grid.Row="5" Grid.ColumnSpan="3" VerticalTextAlignment="End" IsVisible="{Binding IsDetailShown}" Text="{Binding LongDateFormat}" TextColor="{x:Static local:ColorUtils.Gray}"></Label>
</Grid>
<BoxView HeightRequest="1" BackgroundColor="{x:Static local:ColorUtils.LightGray}"></BoxView>
<ContentView Padding="25,15,25,0">
<Label Text="{Binding Description}" FontSize="18"></Label>
</ContentView>
</StackLayout>

Resources