I have an image that I can scroll horizontally and I need to put a button on the image that will still be in the same position even if I scroll the image.
Like this
My code:
<StackLayout>
<Button WidthRequest="30" HeightRequest="30" BorderRadius="20" HorizontalOptions="Start" />
<ScrollView Orientation="Horizontal" >
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="mapasveta.png" />
</ScrollView>
</StackLayout>
Use Grid with no Row and now Columns now the button will overlap on ScrollView.
<StackLayout>
<Grid>
<ScrollView Orientation="Horizontal" >
<Image HorizontalOptions="Center" VerticalOptions="Center" Source="mapasveta.png" />
</ScrollView>
<Button WidthRequest="30" HeightRequest="30" BorderRadius="15" HorizontalOptions="Start" VerticalOptions="Start"
Margin="15"/>
</Grid>
</StackLayout>
Related
I am developing a xamarin application. I have a button as below:
<Button
BackgroundColor="{StaticResource MyBackgroundColor}"
BorderColor="{StaticResource PrimaryColor}"
BorderWidth=".1"
..../>
The button has border around all the sides. How can I add border only in the left and right sides. I saw that, I have to make a custom renderer. Is this the only way to achieve this? If so Is there any example? OR Is there any other way?
You can try to use the BoxView as the Button's border. Such as:
<StackLayout Orientation="Vertical">
<StackLayout Orientation="Vertical" Spacing="0">
<Button Text="hello" BorderColor="Transparent" BorderWidth="0" CornerRadius="0"/>
<BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Color="Red"/>
</StackLayout>
<StackLayout Orientation="Vertical" Spacing="0">
<BoxView HeightRequest="2" HorizontalOptions="FillAndExpand" VerticalOptions="StartAndExpand" Color="Red"/>
<Button Text="hello" BorderColor="Transparent" BorderWidth="0" CornerRadius="0"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<Button Text="hello" BorderColor="Transparent" HorizontalOptions="FillAndExpand" BorderWidth="0" CornerRadius="0"/>
<BoxView WidthRequest="2" HorizontalOptions="Start" VerticalOptions="FillAndExpand" Color="Red"/>
</StackLayout>
<StackLayout Orientation="Horizontal" Spacing="0">
<BoxView WidthRequest="2" HorizontalOptions="End" VerticalOptions="FillAndExpand" Color="Red"/>
<Button Text="hello" BorderColor="Transparent" BorderWidth="0" CornerRadius="0" HorizontalOptions="FillAndExpand"/>
</StackLayout>
</StackLayout>
And the screenshot of the result:
For more information, you can refer to this case about the Xamarin.Forms Button with only single border on bottom.
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);
}
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>
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.
i'm very new to xamarin forms so, sorry if i ask obvious question.
I need to build a frame with labels and pictures within. It should look like the following
By now i tried this:
<Frame OutlineColor="#2e5982"
BackgroundColor="#2e5982"
HorizontalOptions="Fill"
Grid.Column="0"
Margin="0">
<Frame.Content>
<StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<Label x:Name="LbSecsHead" Font="Arial" TextColor="White" Text="Status" HorizontalOptions="Center"/>
<Grid HorizontalOptions="Fill" VerticalOptions="Fill">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="50*"/>
<ColumnDefinition Width="50*"/>
</Grid.ColumnDefinitions>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="0">
<StackLayout Orientation="Horizontal" BackgroundColor="Accent">
<Image x:Name="SignalSec6" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOff.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
<Label Font="Arial" TextColor="White" Text="6" HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
<StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="1">
<StackLayout Orientation="Horizontal">
<Image x:Name="SignalSec5" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOn.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
<Label Font="Arial" TextColor="White" Text="5" HorizontalOptions="Center"/>
</StackLayout>
</StackLayout>
</Grid>
</StackLayout>
</Frame.Content>
</Frame>
The frame is inside a grid column of an outer layout, and here i just limited to the first two icons since result is the same for multiple identical items stacked vertically. Regardless of many tryouts i've done with Horizontal and Vertical options i always obtain this:
The frame sizing with respect to outer layout is correct but not the elements inside. Strange think (at least to me) is that picture looks like being outside of the stacklayout as can be seen by the pink background of the layout. Basically i need the pictures to autofit the layout.
Any hint would be appreciated
Thanks
You'll need to use Span :
Spans – configure elements to span across multiple rows or columns.
<Label Text="SEC" FontSize="40" HorizontalOptions="CenterAndExpand"/>
<Grid HorizontalOptions="CenterAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
<RowDefinition Height="80" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80" />
<ColumnDefinition Width="80" />
</Grid.ColumnDefinitions>
<StackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="6" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="4" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="2" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="3" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="0" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="5" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="3" FontSize="30" TextColor="Gray" />
</StackLayout>
<StackLayout Grid.Row="2" Grid.RowSpan="2" Grid.Column="1"
VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
<Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
<Label Text="1" FontSize="30" TextColor="Gray" />
</StackLayout>
</Grid>