I am placing a ScrollView inside the AbsoluteLayout and I want to move it downwards according to my requirement, so I have translated the y position of the ScrollView.
But after that, only a certain part of the content is visible when scrolling and not all content of the ScrollView.
How to overcome this?
I need to visualize all content of the ScrollView when scrolling, even after the view is translated.
XAML:
<AbsoluteLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Grid.Row="1">
<ScrollView x:Name="scrollView" AbsoluteLayout.LayoutFlags="SizeProportional"
AbsoluteLayout.LayoutBounds="0,0,1,1">
<StackLayout>
<Button Margin="10" Text="Button 1"/>
<Button Margin="10" Text="Button 2"/>
<Button Margin="10" Text="Button 3"/>
<Button Margin="10" Text="Button 4"/>
<Button Margin="10" Text="Button 5"/>
<Button Margin="10" Text="Button 6"/>
<Button Margin="10" Text="Button 7"/>
<Button Margin="10" Text="Button 8"/>
<Button Margin="10" Text="Button 9"/>
<Button Margin="10" Text="Button 10"/>
<Button Margin="10" Text="Button 11"/>
<Button Margin="10" Text="Button 12"/>
<Button Margin="10" Text="Button 13"/>
<Button Margin="10" Text="Button 14"/>
<Button Margin="10" Text="Button 15"/>
<Button Margin="10" Text="Button 16"/>
<Button Margin="10" Text="Button 17"/>
<Button Margin="10" Text="Button 18"/>
<Button Margin="10" Text="Button 19"/>
<Button Margin="10" Text="Button 20"/>
<Button Margin="10" Text="Button 21"/>
<Button Margin="10" Text="Button 22"/>
<Button Margin="10" Text="Button 23"/>
<Button Margin="10" Text="Button 24"/>
<Button Margin="10" Text="Button 25"/>
<Button Margin="10" Text="Button 26"/>
<Button Margin="10" Text="Button 27"/>
<Button Margin="10" Text="Button 28"/>
<Button Margin="10" Text="Button 29"/>
<Button Margin="10" Text="Button 30"/>
<Button Margin="10" Text="Button 31"/>
<Button Margin="10" Text="Button 32"/>
<Button Margin="10" Text="Button 33"/>
<Button Margin="10" Text="Button 34"/>
<Button Margin="10" Text="Button 35"/>
</StackLayout>
</ScrollView>
</AbsoluteLayout>
C#:
/// Translated the y position of the grid in code behind
scrollView.TranslationY = 250;
Before translation, all content is visible when scrolling (i.e. up to 35 button).
After translating y position, a part of the content is cut off, and I can see only up to 31 buttons.
The problem is that your LayoutBounds defines the proportional height with value of 1, which means the same as parent, and when you translate it, it goes outside of the bounds.
What you can do is to bind LayoutBounds like this
AbsoluteLayout.LayoutBounds="{Binding rect}
and then in C# do something like this:
public Rectangle rect { get; set; }
public MainPage()
{
InitializeComponent();
Double screenHeigth = DeviceDisplay.MainDisplayInfo.Height / DeviceDisplay.MainDisplayInfo.Density;
rect = new Rectangle(0,250,1,(screenHeigth - 250)/ screenHeigth);
BindingContext = this;
}
Note that I defined the height proportional to the screen height, because I'm not sure how your UI looks like. This is only example for the code you provided, but I guess you can do something similar in your app. From your XAML, it seems that your Absolute Layout is inside the Grid, so you should be able to do something similar with the Row Height in your grid.
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 using Xamarin forms version (5.0.0.2515) and Xamarin community toolkit (2.0.4). I have tried to set TabViewItem content a normal label as well as a sample content view but none of them is rendering. Am I missing something or may be doing something wrong or anybody else recently faced similar issue with Xamarin community toolkit TabView.
Emulator Screenshot
Sample code :
<ContentPage.Content>
<ScrollView>
<Grid RowDefinitions="220,Auto,auto,Auto,Auto,150" RowSpacing="5">
<Image
Aspect="Fill"
Source="ocean.jpeg"
HeightRequest="190"
VerticalOptions="Fill"
HorizontalOptions="Fill"/>
<Label
Margin="0,15,20,0"
VerticalOptions="Start"
HorizontalOptions="End"
WidthRequest="30"
FontSize="30"
TextColor="White"
FontFamily="Material"
Text=""/>
<pancakeview:PancakeView Grid.Row="1" Margin="0,-20,0,0" CornerRadius="30,30,0,00">
<Grid RowDefinitions="Auto,Auto,auto,Auto,10,Auto" BackgroundColor="white">
<Label Margin="9,10,6,0" HorizontalOptions="StartAndExpand">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Delhi"
TextColor="Black" />
<Span Text=" " FontSize="14"/>
<Span
FontSize="16"
FontFamily="Material"
Text=""
TextColor="Black" />
<Span
Text=" "
FontSize="Medium"/>
<Span
FontFamily="FontMontserratMedium"
FontSize="Medium"
Text="Kasol, Haridwar, Rishikesh"
TextColor="Black" />
</FormattedString>
</Label.FormattedText>
</Label>
<Label
Margin="9,0,5,0"
Grid.Row="1"
Text="Monday, 25 July 2022 To Friday, 25 July 2022"
FontSize="11"
TextColor="Black"
HorizontalTextAlignment="Center"
HorizontalOptions="Start"/>
<Label
Margin="9,0,5,0"
Grid.Row="2"
FontSize="Caption"
Text="Safar Partner Id: Safar2022"/>
<StackLayout
Margin="9,0,5,0"
Grid.Row="3"
Orientation="Horizontal"
Spacing="15"
HorizontalOptions="Start"
Padding="5">
<Label
FontFamily="Material"
FontSize="26"
TextColor="Black"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
Text=""
FontSize="26"/>
<Label
FontFamily="Material"
FontSize="26"
Text="" />
<Label
FontFamily="Material"
FontSize="26"
Text="" />
</StackLayout>
<StackLayout Grid.Row="3"
Margin="0,-20,5,5"
HorizontalOptions="End"
Orientation="Vertical"
Spacing="10">
<Label>
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="14"
Text="Rating"
TextColor="Black" />
<Span Text=" 5" FontSize="14"/>
<Span Text=" *" FontSize="15" TextColor="Gold"/>
</FormattedString>
</Label.FormattedText>
</Label>
<pancakeview:PancakeView CornerRadius="10">
<Label Text="View review" BackgroundColor="LightGreen"/>
</pancakeview:PancakeView>
</StackLayout>
<Label Grid.Row="4" BackgroundColor="LightGreen" Opacity="0.7"/>
<Grid Grid.Row="5">
<xct:TabView
TabStripPlacement="Top"
TabStripBackgroundColor="White"
TabStripHeight="40"
TabIndicatorColor="Green"
TabContentBackgroundColor="White">
<xct:TabViewItem
Text="Overview"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Itineary"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="Itineary" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Safety and Security"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
<xct:TabViewItem
Text="Terms/Conditions"
TextColor="Gray"
TextColorSelected="LightGreen"
FontSize="12">
<Grid>
<Label
HorizontalOptions="Center"
VerticalOptions="Center"
Text="TabContent2" />
</Grid>
</xct:TabViewItem>
</xct:TabView>
</Grid>
</Grid>
</pancakeview:PancakeView>
<pancakeview:PancakeView
Grid.Row="1"
VerticalOptions="Start"
HorizontalOptions="End"
CornerRadius="10,0,0,10"
HeightRequest="60"
WidthRequest="150"
Margin="0,-70,18,-10">
<StackLayout
BackgroundColor="{AppThemeBinding Dark=Gray,Light=black}" >
<Label Margin="5,5,0,3">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="12"
Text="Rs 4000"
TextColor="White" />
<Span
Text=" 50 % Off"
FontSize="10"
TextColor="Red"/>
</FormattedString>
</Label.FormattedText>
</Label>
<Label Margin="5,-5,0,0">
<Label.FormattedText>
<FormattedString>
<Span
FontFamily="FontMontserratMedium"
FontSize="15"
Text="Rs 2000/"
TextColor="White" />
<Span
Text=" Per Person"
TextColor="White"
FontSize="Caption"/>
</FormattedString>
</Label.FormattedText>
</Label>
</StackLayout>
</pancakeview:PancakeView>
</Grid>
</ScrollView>
</ContentPage.Content>
I would like to add a scrollable (vertically and horizontally) Grid in a row of an outer Grid. I want to set the Grid column widths based on the GridUnitType.Star.
I can achieve this when the SrollView orientation is set to Vertical but not when set to Horizontal or Both.
The following XAML demonstrates this:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiGrids.MainPage">
<Grid Margin="20" RowDefinitions="Auto,Auto,Auto">
<Grid Grid.Row="0" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Outer" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Outer" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Outer" Grid.Row="0" Grid.Column="2"/>
</Grid>
<ScrollView Grid.Row="1" Orientation="Horizontal">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Horizontal" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Horizontal" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Horizontal" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
<ScrollView Grid.Row="2" Orientation="Vertical">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Vertical" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Vertical" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Vertical" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
</Grid>
</ContentPage>
The column widths of the outer and vertical grid are correctly set based on the Star value but these values are ignored in the case of the horizontal grid.
Code output.
I was able to do this in Xamarin Forms but does not seem possible in Maui. Am I missing something.
Here's the code snippet below that works well on Android for the Maui, you can refer to it:
<Grid Margin="20" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Row="0" ColumnDefinitions="*,2*,3*" Grid.ColumnSpan="3">
<Label Text="Column 1 Outer" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Outer" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Outer" Grid.Row="0" Grid.Column="2"/>
</Grid>
<ScrollView Grid.Row="1" Orientation="Horizontal" Grid.ColumnSpan="3">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Horizontal" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Horizontal" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Horizontal" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
<ScrollView Grid.Row="2" Orientation="Vertical" Grid.ColumnSpan="3">
<Grid ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Vertical" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Vertical" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Vertical" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
</Grid>
Think I am a good part the way there.
It appears unlike the vertical ScrollView the horizontal ScrollView needs to have a width or a child with a specific width.
I have named the outerGrid, the horizontalGrid and the verticalGrid in the XAML.
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MauiGrids.MainPage">
<Grid Margin="20" RowDefinitions="Auto,Auto,Auto">
<Grid x:Name="outerGrid" Grid.Row="0" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Outer" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Outer" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Outer" Grid.Row="0" Grid.Column="2"/>
</Grid>
<ScrollView Grid.Row="1" Orientation="Both" HorizontalScrollBarVisibility="Default" VerticalScrollBarVisibility="Default">
<Grid x:Name="horizontalGrid" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Horizontal" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Horizontal" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Horizontal" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
<ScrollView Grid.Row="2" Orientation="Vertical" VerticalScrollBarVisibility="Default">
<Grid x:Name="verticalGrid" ColumnDefinitions="*,2*,3*">
<Label Text="Column 1 Vertical" Grid.Row="0" Grid.Column="0"/>
<Label Text="Column 2 Vertical" Grid.Row="0" Grid.Column="1"/>
<Label Text="Column 3 Vertical" Grid.Row="0" Grid.Column="2"/>
</Grid>
</ScrollView>
</Grid>
and then set the grid widths in code behind based on the defaulted outerGrid width as follows:
public MainPage()
{
InitializeComponent();
}
protected override void OnAppearing()
{
base.OnAppearing();
outerGrid.Loaded += OuterGrid_Loaded;
this.SizeChanged += MainPage_SizeChanged;
}
private void MainPage_SizeChanged(object sender, EventArgs e)
{
horizontalGrid.WidthRequest = outerGrid.Width;
verticalGrid.WidthRequest = outerGrid.Width;
}
private void OuterGrid_Loaded(object sender, EventArgs e)
{
horizontalGrid.WidthRequest = outerGrid.Width;
verticalGrid.WidthRequest = outerGrid.Width;
}
This works in Windows when the form is displayed and resized. Also works in Android, both portrait and landscape.
I am currently going through the style aspects of a Xamarin Forms Shell Application, I am currently not able to find how to change the FlyoutMenu TextColor.
I have tried adding a style for Label TextColor with the BasedOn being the Base Style I am using, but the text colour still does not change, or it changes all label's TextColor.
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="MainShellPage"
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
NavigationPage.HasBackButton="False"
FlyoutBackgroundColor="{StaticResource Grey}"
BackgroundColor="{StaticResource Grey}"
IsBusy="{Binding IsBusy}"
BindingContext="{Binding MainShell, Source={StaticResource ViewModelLocator}}"
Navigated="MainShellPage_OnNavigated">
<Shell.Resources>
<Style x:Key="BaseStyle"
TargetType="Element">
<Setter Property="Shell.BackgroundColor"
Value="{StaticResource Grey}" />
<Setter Property="Shell.ForegroundColor"
Value="{StaticResource White}" />
<Setter Property="Shell.TitleColor"
Value="{StaticResource White}" />
<Setter Property="Shell.DisabledColor"
Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor"
Value="#95FFFFFF" />
</Style>
</Shell.Resources>
<Shell.FlyoutHeaderTemplate>
<DataTemplate>
<StackLayout BackgroundColor="{StaticResource Grey}" HeightRequest="180"
Orientation="Vertical">
<Image Source="mobile_logo" HorizontalOptions="Center" VerticalOptions="Start"
WidthRequest="160"/>
<Label Text="{Binding TeamName}" TextColor="{StaticResource White}" FontAttributes="Bold"
HorizontalOptions="Center" />
<Label Text="{Binding UserFullName}" TextColor="{StaticResource White}"
HorizontalOptions="Center" />
<Label Text="{Binding UserEmail}" TextColor="{StaticResource White}"
HorizontalOptions="Center" />
<Label Text="{Binding Version}" TextColor="{StaticResource White}" VerticalOptions="End"
HorizontalOptions="End" Margin="0, 10, 0, 0" FontSize="10" />
</StackLayout>
</DataTemplate>
</Shell.FlyoutHeaderTemplate>
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<Tab Title="TabOne" Style="{StaticResource BaseStyle}"
Route="tabone">
<Tab.Icon>
<FontImageSource
Glyph="{Binding TabOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</Tab.Icon>
<ShellContent Title="TabOne" ContentTemplate="{DataTemplate pages:TabOnePage}" />
</Tab>
<Tab Title="TabTwo" Style="{StaticResource BaseStyle}"
Route="tabtwo">
<Tab.Icon>
<FontImageSource
Glyph="{Binding TabTwoGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</Tab.Icon>
<ShellContent ContentTemplate="{DataTemplate pages:TabTwoPage}" />
</Tab>
</FlyoutItem>
<MenuItem />
<MenuItem />
<MenuItem />
<MenuItem
Text="MenuItemOne"
Command="{Binding MenuItemOneCommand}">
<MenuItem.IconImageSource>
<FontImageSource Glyph="{Binding MenuItemOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
</MenuItem.IconImageSource>
</MenuItem>
I am currently not able to find how to change the FlyoutMenu TextColor.
From this document, Shell includes three style classes, which are automatically applied to FlyoutItem and MenuItem objects. The style class names are FlyoutItemLabelStyle, FlyoutItemImageStyle, and FlyoutItemLayoutStyle.
If you want to change FlyoutMenu Text color, you can create new style and use FlyoutItemLabelStyle to change FlyoutMenu text color.
<Style Class="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="TextColor" Value="Red" />
</Style>
From Flyout Items document, each ShellContent object can only be accessed through flyout items, and not through tabs. This is because by default, tabs will only be displayed if the flyout item contains more than one tab.
So you need to add Tab in FlyoutItem if you want o display FlyoutMenu.
<FlyoutItem Title="About" Icon="icon_about.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:AboutPage}" Route="AboutPage" />
</Tab>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
<Tab>
<ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" Route="ItemsPage" />
</Tab>
</FlyoutItem>
There is another way of doing it, you can set an ItemTemplate to your flyout as you did for the header, then you can set a colour for the text:
<Shell.ItemTemplate>
<DataTemplate>
<Grid Grid.Row="0">
<Grid.ColumnDefinitions>
<!-- Icon -->
<ColumnDefinition Width="*"/>
<!-- Title-->
<ColumnDefinition Width="2*"/>
</Grid.ColumnDefinitions>
<!-- Icon -->
<Label Grid.Column="0"
Margin="20,0,0,0"
VerticalOptions="Center"
HorizontalTextAlignment="Center"
HorizontalOptions="Center"
Text="{Binding Icon}"
FontFamily="{StaticResource FontAwesome}"
FontSize="26"
TextColor="{StaticResource White}"/>
<!-- Label -->
<Label Grid.Column="1"
Text="{Binding Title}"
FontSize="23"
VerticalOptions="Center"
VerticalTextAlignment="Center"
TextColor="[ Here you can insert the colour you want]"
HorizontalOptions="Start" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
And then, to use it:
<FlyoutItem Title="TabOne"
Icon="{Binding TabOneGlyph, Source={StaticResource
MainShellGlyphHelper}}">
<ShellContent ContentTemplate="{DataTemplate pages:TabOnePage}"/>
</FlyoutItem>
I am doing this technique in most of my project when I sure Shell.
Here's an example of a project I did: https://github.com/bricefriha/AresGaming/blob/master/AresNews/AresNews/AppShell.xaml
I hope this helped you 😉
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>