I have this list in xamarin portable app and i cant seem to be able to remove or at least reduce spacing between items ,and disable item selection also .
<ListView x:Name="ListGroups"
ItemsSource="{Binding Source={x:Static local:Stash.Groups}}"
HorizontalOptions="Center" >
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell>
<Label Text="{Binding Name}" TextColor="Aqua" FontSize="10" HorizontalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
then some labels
<Label Text="If you feel you're missing"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
/>
<Label Text="a group or two, please contact"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
/>
<Label Text="your manager"
FontSize="15"
VerticalOptions="Center"
HorizontalOptions="Center"
TextColor="White"
/>
</StackLayout>
ImageBackgroundcolor
you can try with
HasUnevenRows = "true"
for "Disable selection" you can follow these
Disabling selection
SelectionDemoList.ItemSelected += (sender, e) => {
((ListView)sender).SelectedItem = null;
};
Note that on Windows Phone, some cells, including SwitchCell don't update their visual state in response to selection.
To reduce the ListView's height you can use a Grid. This is a sample
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="TestRelativeLayout.MyPage2">
<ContentPage.Content>
<StackLayout>
<StackLayout>
<Grid VerticalOptions = "FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10*" />
<ColumnDefinition Width = "1*"/>
</Grid.ColumnDefinitions>
<Entry Placeholder="MyEntry" Grid.Column = "0" Grid.Row="0" Grid.ColumnSpan = "2"/>
<Image Source="icon.png" Grid.Column="1" Grid.Row = "0" Margin="0,0,20,0"/>
</Grid>
</StackLayout>
<Grid VerticalOptions = "FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="150" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListView x:Name="ListGroups"
Grid.Row = "0"
Grid.Column = "0"
ItemsSource="{Binding myList}"
HorizontalOptions="Center"
VerticalOptions="Start"
BackgroundColor = "Red">
<ListView.ItemTemplate>
<DataTemplate >
<ViewCell>
<Label Text="{Binding Name}" TextColor="Aqua" FontSize="10" HorizontalOptions="Center" />
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<StackLayout Grid.Row = "1" Grid.Column = "0" >
<Label Text="If you feel you're missing"
FontSize="15"
VerticalOptions="StartAndExpand"
HorizontalOptions="Center"
TextColor="Black" />
<Label Text="a group or two, please contact"
FontSize="15"
VerticalOptions="StartAndExpand"
HorizontalOptions="Center"
TextColor="Black" />
<Label Text="your manager"
FontSize="15"
VerticalOptions="StartAndExpand"
HorizontalOptions="Center"
TextColor="Black" />
</StackLayout>
</Grid>
</StackLayout>
</ContentPage.Content>
</ContentPage>
you have this (on Emulator / Android)
Related
I am trying to display items, but only {Binding Peso} is displayed.
If you change {Binding Peso} and use{Binding Contenido} you can see that it is displayed OK
Any Help Pls?
`
<ListView x:Name="PaqueteList">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame BorderColor="Black">
<StackLayout Margin="5" Grid.Column="0" Orientation="Vertical"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center">
<Label Text ="{Binding Peso}"
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="1" Text ="{Binding TrackingNumber} "
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="2" Text ="{Binding Contenido}"
TextColor="Blue"
BackgroundColor="White"
/>
</StackLayout>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have changed the {Binding Peso} to {Binding Contenido} and so on, and it is works.
I just need to display something like this
Peso Tracking Contenido
xx yyyyy zzzz
xx yyyyy zzzz
xx yyyyy zzzz
Try this for your ViewCell:
<ViewCell>
<Frame BorderColor="Black">
<Grid
Margin="5"
HorizontalOptions="StartAndExpand"
VerticalOptions="Center"
ColumnDefinitions="*, *, *">
<Label
BackgroundColor="White"
Text="{Binding Peso}"
TextColor="Blue" />
<Label
Grid.Column="1"
BackgroundColor="White"
Text="{Binding TrackingNumber}"
TextColor="Blue" />
<Label
Grid.Column="2"
BackgroundColor="White"
Text="{Binding Contenido}"
TextColor="Blue" />
</Grid>
</Frame>
</ViewCell>
You should add the children views into a ListView like the pattern below:
<ListView>
<ViewCell>
<StackLayout>
<Frame>
<Grid>
</Grid>
<Frame/>
</StackLayout>
</ViewCell>
</ListView>
Below is the code snippet for your reference:
<ListView x:Name="PaqueteList" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Margin="5" Orientation="Vertical" HorizontalOptions="StartAndExpand" VerticalOptions="Center">
<Frame BorderColor="Black">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
<ColumnDefinition Width="1*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label Grid.Column="0" Text ="{Binding Peso}"
TextColor="Blue"
BackgroundColor="White"/>
<Label Grid.Column="1" Text ="{Binding TrackingNumber} "
TextColor="Blue"
BackgroundColor="White"
/>
<Label Grid.Column="2" Text ="{Binding Contenido}"
TextColor="Blue"
BackgroundColor="White" />
</Grid>
</Frame>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
I have a Xamarin project with a view of a product's details. I have two buttons which can increase or decrease the quantity of the product. To show how it changes I have a label named lblQuantity which shows the quantity and it's updated if you tap on the remove or add button.
To have some context here's the view
The issue is that the lblQuantity isn't updating itself. I had previously another view with a stacklayout and the gesture recognizers worked fine. Now it doesn't even go inside the method.
Here's the 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:controls="clr-namespace:AppCrijoya.Controls"
x:Class="AppCrijoya.Views.ProductDetailPage">
<ScrollView>
<StackLayout VerticalOptions="FillAndExpand" BackgroundColor="White" Spacing="0" Margin="0" Padding="0">
<Grid BackgroundColor="White" RowSpacing="0">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<!-- 1. Profile picture-->
<Frame HasShadow="True" Margin="10" CornerRadius="20">
<Image x:Name="ProductImage" Aspect="AspectFit" Grid.Row="0" Margin="0" VerticalOptions="Start" HeightRequest="230"/>
</Frame>
<!-- Here add the code that is being explained in the next block-->
<StackLayout HeightRequest="90" Grid.Row="1" BackgroundColor="Transparent" VerticalOptions="Start">
<StackLayout Padding="20" BackgroundColor="Transparent">
<!-- Here add the code that is being explained in the next block-->
<!-- Blocks: 3 and 4 -->
<Grid Padding="25,5,25,0" RowSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="80"/>
</Grid.RowDefinitions>
<!-- Here add the code that is being explained in the next block-->
<!-- 4. Contact information-->
<Label x:Name="txtName" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4" FontAttributes="Bold" FontSize="30" TextColor="Black"/>
<Label x:Name="txtDescription" Grid.Row="1" Grid.ColumnSpan="4" TextColor="Black" FontSize="16"/>
<Label Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="4" Padding="0,10,0,0" FontSize="16">
<Label.FormattedText>
<FormattedString>
<Span Text="Stock: " FontAttributes="Bold" TextColor="Black"/>
<Span x:Name="txtDetails" TextColor="black"/>
</FormattedString>
</Label.FormattedText>
</Label>
<!--4. Contact information: Board inforation-->
<Label Grid.Row="2" Grid.Column="2" Grid.ColumnSpan="3" Text="Quantity" FontAttributes="Bold" Style="{StaticResource stlBoardTitle}" />
<Frame Grid.Column="2" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="RemoveTap" Tapped="RemoveTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="-" Style="{StaticResource lblCart}"/>
</Frame>
<StackLayout Grid.Column="3" Grid.Row="3" HeightRequest="40" VerticalOptions="Center" >
<Label
x:Name="lblQuantity"
Text="1"
FontSize="17"
TextColor="Black"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
HeightRequest="40"/>
</StackLayout>
<Frame Grid.Column="4" Grid.Row="3" Style="{StaticResource stkCart}">
<Frame.GestureRecognizers>
<TapGestureRecognizer x:Name="AddTap" Tapped="AddTap_Tapped"/>
</Frame.GestureRecognizers>
<Label Text="+" Style="{StaticResource lblCart}"/>
</Frame>
</Grid>
</StackLayout>
</StackLayout>
</Grid>
<controls:MyFrame HasShadow="true" HeightRequest="80" BackgroundColor="#e5d3c2" VerticalOptions="EndAndExpand">
<StackLayout WidthRequest="20" VerticalOptions="Center">
<Grid ColumnSpacing="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Label
x:Name="txtPrice"
Grid.Column="0"
HorizontalTextAlignment="End"
TextColor="White"
HorizontalOptions="Center"
VerticalOptions="Center"
FontAttributes="Bold"
FontSize="25"
/>
<Button CornerRadius="30"
x:Name="btnAddToCart"
Clicked="BtnAddToCart_Clicked"
Grid.Column="2"
TextColor="Black"
Text="Añadir al carrito"
BackgroundColor="White"
Style="{StaticResource btn}"
FontAttributes="Bold"
/>
</Grid>
</StackLayout>
</controls:MyFrame>
</StackLayout>
</ScrollView>
</ContentPage>
Here's the Add and Remove method that I know work fine
private void RemoveTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
if (quantity > 1)
{
quantity -= 1;
}
lblQuantity.Text = quantity.ToString();
}
private void AddTap_Tapped(object sender, EventArgs e)
{
int quantity = Convert.ToInt32(lblQuantity.Text);
quantity += 1;
lblQuantity.Text = quantity.ToString();
}
The text of the label is supossed to be changed but it isn't. And as I said it doesn't even enter on the method.
I don't know what's the issue. Please help and thanks.
EDIT
I have tried changing it for a Button but still doesn't work. I thought it might be a problem with the grid but I still don't know.
I fixed the issue by making sure the frames where inside the StackLayout as they weren't before
Here is an image to explain it
The frames to add or remove weren't inside the red StackLayout so the tap gesture recognizer wouldn't do anything. I just gave it more height and set the Aspect to FillAndExpand
I need to alternate my ListView columns color so it looks like this.
I was searching Google for any help, and found out that i can put BoxView in the same column with my Label and color that BoxView
My result:
As you can see, i have this annoying white line above BoxViews, which i was not able to remove. My question is how do i remove them? i havent set any paddings and margins, have no clue what is problem.
<ListView x:Name="ListView" ItemTapped="ListView_OnItemTapped" ItemsSource="{Binding FilteredReports, Mode=TwoWay}">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout>
<BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
<Grid HorizontalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<BoxView Color="#F7FAFC" Grid.Column="0"/>
<Label Grid.Column="0" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding ClientPhone}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<Label Grid.Column="1" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding OfficeName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
<BoxView Color="#F7FAFC" Grid.Column="2"/>
<Label Grid.Column="2" FontSize="12" FontFamily="Roboto" TextColor="#162938" Text="{Binding BranchName}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
</Grid>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
You are using a StackLayout and by default it has a Spacing property with a value of 6.
You should set it to 0
<ViewCell>
<StackLayout Spacing = "0" >
<BoxView HeightRequest="1" Color="#EDEBE9" IsVisible="true"/>
<Grid HorizontalOptions="FillAndExpand">
....
</StackLayout>
</ViewCell>
Scrolling is not working in my XAML file. It cuts below content and doesnt show all content. Even when i try to scroll to see bottom it does not allow scrolling. There should be green button bottom. But i cannot scroll to see it. I tried to add scrollview and listview but i couldnt manage to scroll it down to page. So cannot see all content by sliding down.
<?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:abstractions="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:yummy="clr-namespace:Xamarin.Forms.PancakeView;assembly=Xamarin.Forms.PancakeView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
NavigationPage.HasNavigationBar="False"
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<StackLayout x:Name="stack1" BackgroundColor="White" VerticalOptions="FillAndExpand">
<StackLayout x:Name="stack2" BackgroundColor="DodgerBlue" HeightRequest="120">
<Frame
Margin="10"
BackgroundColor="White"
CornerRadius="12"
HeightRequest="300"
TranslationY="40">
<StackLayout Orientation="Horizontal">
<Frame
Margin="0,0,10,0"
Padding="10"
BackgroundColor="DodgerBlue"
BorderColor="LightGray"
CornerRadius="40"
HasShadow="True"
HeightRequest="20"
IsClippedToBounds="True"
WidthRequest="60">
<abstractions:CircleImage
Aspect="AspectFit"
HeightRequest="20"
Source="prince"
WidthRequest="20" />
</Frame>
<StackLayout>
<Label Text=" "></Label>
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
FontSize="Body"
Text="MOBILE"
TextColor="Red" />
<Span Text=" Tapper" TextColor="LightGray" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
FontAttributes="Bold"
FontSize="16"
Text="OPERATI"
TextColor="DarkSlateGray" />
<!--<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontAttributes="Bold"
Text=" Mobile "
TextColor="LightGray" />
<Span
FontAttributes="Bold"
FontSize="Body"
Text=" 0244567876"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>-->
</StackLayout>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel2" Text="cdcdcdc" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel3" Text="vfvfvf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel4" Text="rrfrfrfrf" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Label x:Name="mylabel5" Text="hgyhyhyhyh" TextColor="Black" HorizontalTextAlignment="Center" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" FontSize="Large"/>
</Grid>
</StackLayout>
</Frame>
<Frame
Margin="10"
CornerRadius="12"
BackgroundColor="White"
TranslationY="40">
<StackLayout Margin="5">
<Grid
ColumnSpacing="20"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button
x:Name="btnTransfer"
Margin="20"
BackgroundColor="#FF2ED833"
Clicked="btnTransfer_Clicked"
CornerRadius="20"
HorizontalOptions="FillAndExpand"
Text="Main Page"
TextColor="White"
VerticalOptions="EndAndExpand" />
</Grid>
</StackLayout>
</Frame>
</StackLayout>
</StackLayout>
As Jason mentioned, ScrollView should fix things, you probably just didn't use it the right way.
Add a ScrollView above the first stack layout as shown:
mc:Ignorable="d"
x:Class="CXFMob.OperatiPage">
<ScrollView>
<StackLayout x:Name="stack1" ...
And then add the closing ScrollView tag at the last line:
</StackLayout>
</StackLayout>
</ScrollView>
Obviously fix the indent formatting as well. Also, what's the purpose of the TranslationY?
I solved problem by giving HeightRequest to first StackLayout stack1. ""
Also adding ScrollView
I am trying to position frame cards as suqares one after another horizontally and can't manage it. I wrapped it in Grid, although grid fills all window size it positions frames one under another. Red color on the screenshot is background of the Grid.
How it looks and how i want it to
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid
HorizontalOptions="FillAndExpand"
BackgroundColor="Red">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame
HasShadow="True"
Margin="5"
Padding="10"
CornerRadius="5"
Scale="1"
BackgroundColor="{StaticResource DarkGreyPrimary}">
<Frame.Content>
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label Text="{Binding Address}"
FontSize="30"
VerticalTextAlignment="End"/>
<Button Clicked="InfoButtonClicked"
Text=""
FontFamily="FA"
FontSize="30"
WidthRequest="53"
Margin="0, 0, -10, 0"
HorizontalOptions="End"/>
</Grid>
<Image Source="{Binding ImageUrl}"
WidthRequest="300"
Aspect="Fill"/>
</StackLayout>
<StackLayout VerticalOptions="Fill" Margin="10, 0, 0, 0">
<StackLayout VerticalOptions="EndAndExpand">
<Label Text="{Binding Id}"
HorizontalOptions="End"
TextColor="{StaticResource LightGrey}"
FontSize="20"/>
</StackLayout>
</StackLayout>
</StackLayout>
</Frame.Content>
</Frame>
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
Use CollectionView for that, it supports showing items in a grid.
<CollectionView ItemsLayout="VerticalGrid, 3" ItemsSource="{Binding Items}">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="5">
<Frame
Padding="10"
BackgroundColor="{StaticResource DarkGreyPrimary}"
CornerRadius="5"
HasShadow="True"
Scale="1">
<StackLayout Orientation="Vertical">
<StackLayout>
<Grid>
<Label
FontSize="30"
Text="{Binding Address}"
VerticalTextAlignment="End" />
<Button
Margin="0,0,-10,0"
Clicked="InfoButtonClicked"
FontFamily="FA"
FontSize="30"
HorizontalOptions="End"
Text=""
WidthRequest="53" />
</Grid>
<Image
Aspect="Fill"
Source="{Binding ImageUrl}"
WidthRequest="300" />
</StackLayout>
<Label
Margin="10,0,0,0"
FontSize="20"
HorizontalOptions="End"
Text="{Binding Id}"
TextColor="{StaticResource LightGrey}" />
</StackLayout>
</Frame>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Notice the ItemsLayout="VerticalGrid, 3", the number 3 specifies how many columns to display.
Here's the documentation for the CollectionView (as #Jason mentioned earlier in the comments): https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/layout#vertical-grid