Develop Reference

Scrollviews not scrolling .Net Maui Mac

I have played around with various solutions to make my scrollviews actually scroll. I have this box with items inside it:
However everything I have tried doesnt make the box actually scroll. This is my scrollview code:
<ScrollView Orientation="Vertical" Scrolled="OnScrollViewScrolled">
<StackLayout HeightRequest="260" Orientation="Vertical">
<Frame BackgroundColor="White" BorderColor="Transparent" Padding="10" CornerRadius="30" Margin="0,5,0,5" WidthRequest="390"></Frame>
<Frame BackgroundColor="White" BorderColor="Transparent" Padding="10" CornerRadius="30" Margin="0,5,0,5" WidthRequest="390"></Frame>
<Frame BackgroundColor="White" BorderColor="Transparent" Padding="10" CornerRadius="30" Margin="0,5,0,5" WidthRequest="390"></Frame>
</StackLayout>
</ScrollView>
I even tried adding this code:
void OnScrollViewScrolled(object sender, ScrolledEventArgs e)
{
Console.WriteLine($"ScrollX: {e.ScrollX}, ScrollY: {e.ScrollY}");
}
Could the FlexLayout container for all my frontend be causing this issue?
Can anyone pick up on what I'm missing?

Xamarin.Forms conflict between PanGesture and TapGesture

This is my XAML code
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
x:Class="App1.Views.ItemsPage"
Title="{Binding Title}"
x:Name="BrowseItemsPage">
<StackLayout>
<StackLayout.GestureRecognizers>
<PanGestureRecognizer PanUpdated="PanGestureRecognizer_PanUpdated"/>
</StackLayout.GestureRecognizers>
<Label Text="111111111111111111111111111111">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ContentPage>
End the behind-code
private void PanGestureRecognizer_PanUpdated(object sender, PanUpdatedEventArgs e)
{
Console.WriteLine($"{DateTime.Now} pan");
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
DisplayAlert("Alert", "You have been alerted", "OK");
}
When I run above code, at the first pan gesture I make a Pan on the Label and swipe down the PanGestureRecognizer_PanUpdated is NOT fired. It's only fired when I tap outside the Label then start a pan gesture on the Label.
Then I remove the TapGestureRecognizer's Label, and make a Pan on the Label and swipe down the PanGestureRecognizer_PanUpdated is fired.
It's conflict between Tap vs Pan gesture ?
P/s: I want to make a list swipe up/down-able (the container, in this case is StackLayout), and the items are clickable. I'm not using the ListView, because I'm making custom library

This is the expected results . When you make the pan on label,the first register object is the Label , not the StackLayout .So the event will never been called .
Solution: You can put the StackLayout in a ScrollView . And add the PullToRefresh event on it .
Here is a plugin which can add Pull to Refresh to ScrollView .
<controls:PullToRefreshLayout
IsPullToRefreshEnabled="True"
RefreshCommand="{Binding RefreshCommand}"
IsRefreshing="{Binding IsBusy}"
RefreshColor="Blue">
<ScrollView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<StackLayout>
<Label Text="111111111111111111111111111111">
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>
</Label.GestureRecognizers>
</Label>
</StackLayout>
</ScrollView>
</controls:PullToRefreshLayout>

Header ache - gap appears

When starting the app I get the UI as I want it. When returning to the same page I get the gap at the top. How can I fix this?
All navigation uses the Application.Current.MainPage = new SomePage(); shape.
The XAML is trivial:
<?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="ShipShapeMobile.LandingPage"
BackgroundImage="Gradient640x1136.png"
>
<ContentPage.Content >
<Grid
x:Name="grid"
>
<StackLayout
HorizontalOptions="Center"
VerticalOptions="Center"
>
<Image
HorizontalOptions="Center"
Source="ShipShapeShipA448x591.png"
VerticalOptions="Center"
Margin="50,15,50,15"
/>
<Image
HorizontalOptions="Center"
Source="TextOnlySS.png"
VerticalOptions="CenterAndExpand"
/>
<Image Source="hr7.png" Margin="20,10,20,10" />
<Button
x:Name="btnSignIn"
BackgroundColor="DodgerBlue"
BorderColor="White"
BorderWidth="1"
Clicked="BtnSignIn_OnClicked"
CornerRadius="15"
Image="Icon29.png"
Margin="50,10,50,10"
Text="SIGN UP"
TextColor="White"
/>
</StackLayout>
</Grid>
</ContentPage.Content>

It looks like in your LandingPage NavigationBar being displayed. Hide it in your xaml class itself.
NavigationPage.HasNavigationBar="false"
Use this in your top tag of ContentPage.

Getting the selected item from ItemTemplate in seperate file MVVM Xamarin.Forms

I have the PageView which is defined like this
<?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:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
xmlns:view="clr-namespace:Fuse.ViewTemplates;assembly=Fuse"
prism:ViewModelLocator.AutowireViewModel="True"
x:Class="Fuse.Views.JoinPage">
<StackLayout Orientation="Vertical">
<Label Text="Games near your area .. "
VerticalOptions="Start"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
BackgroundColor="Transparent"
HorizontalOptions="CenterAndExpand" />
<ListView x:Name="listView" SelectedItem="{Binding SelcetedItem,Mode=TwoWay}"
RowHeight="150"
ItemsSource="{Binding CardList}" HasUnevenRows="True" >
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<view:CardViewTemplate/>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</ContentPage>
and the CardTemplateView defined like this
<?xml version="1.0" encoding="UTF-8"?>
<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Fuse.ViewTemplates.CardViewTemplate"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin.Abstractions"
xmlns:local="clr-namespace:Fuse"
xmlns:viewmodel="clr-namespace:Fuse.ViewModels"
x:Name="CardView"
>
<Frame IsClippedToBounds="True"
HasShadow="True"
BackgroundColor="White" >
<Frame.OutlineColor>
<OnPlatform x:TypeArguments="Color"
Android="Gray"
iOS="Gray"/>
</Frame.OutlineColor>
<Frame.Margin>
<OnPlatform x:TypeArguments="Thickness"
Android="7" iOS="7"/>
</Frame.Margin>
<Frame.Padding>
<OnPlatform x:TypeArguments="Thickness"
Android="10" iOS="5"/>
</Frame.Padding>
<StackLayout Orientation="Horizontal">
<Grid Grid.Row="3">
<Button Text="Join"
BackgroundColor="LawnGreen" BorderRadius="10" BorderWidth="10" HorizontalOptions="EndAndExpand">
</Button>
</Grid>
</StackLayout>
</Frame>
</ContentView>
What i want to do is bind the Button to a Command in viewmodel and pass the commandParameter to get the Item in the ListView corresponding to the Grid (aka Button) . This is a custom List Template which the ListView uses , it has a Button inside of it which when clicked should return the SelectedItem in the parent .
I hope I was clear .
Any Ideas ?

The shortest way would be to paste the ContentView into your ContentPage. Then your page needs a name and you can bind:
<Button Text="Join" Command="{Binding ElementName=PageName, Path=ViewModel.Command}" CommandParameter="{Binding}"
BackgroundColor="LawnGreen" BorderRadius="10" BorderWidth="10" HorizontalOptions="EndAndExpand">
</Button>
The other way is to put the command in your CardViewModel (or whatever class you store in CardList) and just assing the command from ContentPageViewModel.
Another way is to add DependencyPropery to your ConentView to store your command.

MainPage not added to the Navigation Stack

I start my Xamarin.Forms android project simply by calling:
MainPage = new NavigationPage(new HomePage());
in the App.xaml.cs
As stated in the https://developer.xamarin.com/guides/xamarin-forms/application-fundamentals/navigation/hierarchical/
This causes the HomePage ContentPage instance to be pushed onto the
navigation stack, where it becomes the active page and the root page
of the application.
But when i check the stack, its empty:
What is happening here? Why the page is not in the stack?

I have simply created a new XF project.
I have changed the main page xml to this
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Test" x:Class="Test.TestPage">
<StackLayout>
<Button Text="How many?" Clicked="Handle_Clicked"/>
<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>
</ContentPage>
and add this to xml.cs
void Handle_Clicked(object sender, System.EventArgs e)
{
//throw new NotImplementedException();
Application.Current.MainPage.DisplayAlert("Attention", Navigation.NavigationStack.Count.ToString(), "Ok");
}
and I see that NavigationStack's Count is 1...
UPDATE
Also with a CarouselPage, I have the same result
<?xml version="1.0" encoding="UTF-8"?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Test.TestPage">
<ContentPage>
<StackLayout>
<Button Text = "how many?" Clicked="Handle_Clicked"/>
<Label Text="Red" />
<BoxView Color="Red" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Green" />
<BoxView Color="Green" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
<ContentPage>
<StackLayout>
<Label Text="Blue" />
<BoxView Color="Blue" VerticalOptions="FillAndExpand" />
</StackLayout>
</ContentPage>
</CarouselPage>