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?

How to handle touch event for a FlexLayout in Xamarin

So Im building an app where I should show multiple products, since I want to show more than just one product in one row, i couldn't use a ListView, so I thought about using a FlexLayout as a Bindable-Layout and use the ItemsSource to display my list of products, whiche was a sucess. So I wanted to add a touch event to each of my products shown in the flexlayout, to do so I created a new Behaviour, this is the link for the code I used :
https://gist.github.com/jtaubensee/96a5e49c66a205e36ff32787f1d2114d
that did work and therefor I can use a Command. my problem is that I want to get the product that was clicked, and I can't figure out how to do ? is there anyone who can possibly help me with that ?

If you are not adverse to xaml, this is how I handle it.
<FlexLayout BindableLayout.ItemsSource="{Binding Abilities}" IsVisible="{Binding HasAbilities}" BindableLayout.ItemTemplate="{DataTemplate attitm:AttachedAbility}"
AlignItems="Center" Wrap="Wrap" JustifyContent="Center"/>
and the template implements the touch gesture, and passes the object as the Command Parameter;
<ContentView.Content>
<StackLayout Padding="20,8" HorizontalOptions="Center">
<Frame BorderColor="{OnPlatform Android=DarkCyan, UWP=Accent}" Padding="4">
<Frame.GestureRecognizers>
<TapGestureRecognizer Command="{Binding DrillIntoCommand}" CommandParameter="{Binding}"/>
</Frame.GestureRecognizers>
<StackLayout HorizontalOptions="Center" Orientation="Horizontal">
<Label x:Name="TitleLabel" Text="{Binding Title}" HorizontalOptions="Center" VerticalOptions="Center"/>
<Label Text="" FontFamily="{StaticResource FontAwesomeSolid}" IsVisible="{Binding IsUserCreated}" TextColor="Orange" HorizontalOptions="Center"/>
</StackLayout>
</Frame>
</StackLayout>
</ContentView.Content>

Button not clickable due to overlapping view

This might be an easy solution but for some reason I couldn't find the solution online.
I have two views. One view is a grid and the other is a button. The Grid View is showing different views (boxview, label, etc..)
But underneath it is a button view. But this view is not included in the Grid View. I cannot put it inside the Grid View because of reasons. I just wanted to know if there's a possibility for it to be clickable without moving the views or even if there's a view on top of it?
Here's how it looks like:
<?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="PlayUIArea.NotificationConfirmView">
<ContentView.Content>
<Grid BackgroundColor="Blue">
<BoxView
WidthRequest="100"
VerticalOptions="Fill"
HorizontalOptions="Start"
BackgroundColor="Black" />
<Button Text="Confirm"
OnClick="Button_Click"
VerticalOptions="Start"
HorizontalOptions="Center" />
<Grid BackgroundColor="Red" Margin="100,0,0,0" Padding="-100,0,0,0">
<Label Text="Label Here"
HorizontalOptions="Center"
VerticalOptions="Center" />
</Grid>
</Grid>
</ContentView.Content>
</ContentView>
Is there anyway to make this clickable?

I am a bit late but I think I found a solution to this.
<Grid>
<WebView Grid.Row ="1" Source="[insert random embedded youtube source]"/>
<RelativeLayout Grid.Row ="1" InputTransparent="True" CascadeInputTransparent="False">
<Button CornerRadius="0" Command="{Binding GoToVideoFullscreen}"
RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=0.8}"
RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=0.9}"
RelativeLayout.HeightConstraint="{ConstraintExpression Type=Constant, Constant=17}"
RelativeLayout.WidthConstraint="{ConstraintExpression Type=Constant, Constant=17}"/>
</RelativeLayout>
</Grid>
I had a similar problem, where I wanted to overlap a WebView with a custom button. But my RelativeLayout, which I used to place the button was eating all the inputs and the WebView could not be used anymore.
So I added InputTransparent="True" and CascadeInputTransparent="False" to the RelativeLayout. The InputTransparent="True" makes it invisible to inputs, the CascadeInputTransparent="False" prevents the InputTransparent value from inheriting to the children (in this case my button).
Documentation:
https://learn.microsoft.com/de-de/dotnet/api/xamarin.forms.visualelement.inputtransparent?view=xamarin-forms
https://learn.microsoft.com/en-us/dotnet/api/xamarin.forms.layout.cascadeinputtransparent?view=xamarin-forms

Agree with #G.Mich , you should put all of elements in one layout . For example you can put them in a StackLayout
<ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
<Grid>
your code here
</Grid>
</StackLayout>
</ContentPage.Content>

place the button on top of the Grid by placing it after the Grid in the XAML
<ContentPage.Content>
<Grid>
My code here
</Grid>
<Button Onclick="Button_Clicked" /> <!-- This isn't clickable -->
</ContentPage.Content>

Xamarin Images sometimes not downloaded inside ListView

I have a ListView with two columns, the leftmost of which contains an <Image> like this:
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<ViewCell.View>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*" />
<ColumnDefinition Width="0.5*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
</Grid.RowDefinitions>
<AbsoluteLayout Grid.Column="0" Grid.Row="0">
<Image
HeightRequest="130"
Aspect="AspectFill"
Source="{Binding DynamicOfferImage}"
local:ImageBinding.URL="{Binding DynamicOfferURL}"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All">
<Image.Aspect>
<OnPlatform x:TypeArguments="Aspect">
<On Platform="iOS">AspectFit</On>
<On Platform="Android">AspectFit</On>
</OnPlatform>
</Image.Aspect>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnImageTapGestureRecognized"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
<StackLayout IsVisible="{Binding IsRedeemed}" Margin="20" AbsoluteLayout.LayoutBounds="1,1,1,1" AbsoluteLayout.LayoutFlags="All">
<ContentView Padding="3" BackgroundColor="#d9534f">
<Label Text="{loc:_ S=LoginIsRedeemed}" FontSize="Medium" TextColor="#ffffff" HorizontalOptions="Center"></Label>
</ContentView>
</StackLayout>
</AbsoluteLayout>
<StackLayout Grid.Column="1" Grid.Row="0">
<!-- Text here, irrelevant to question -->
</StackLayout>
</Grid>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
The <Image>'s Source property is bound to a URL of a JPEG image hosted on Amazon S3. The problem is most of the time these images are downloaded fine, however sometimes one image, or even all images, won't download (or won't display?)
This issue doesn't go away until the user re-installs the app. Even restarting the app doesn't count, it has to be an actual re-installation.
Below is a mockup of what this ends up looking like in some scenarios:
Any help much appreciated!
NOTE: This is not a duplicate of Xamarin Forms ListView Images Sometimes Displays, Sometimes Doesn't (UWP), as that scenario described is different.

I ended up taking G.hakim's advice and decided to employ FFImageLoading (via NuGet package) for the images. It was pretty simple although I had to use a slightly older version for Xamarin.Android. Some weird linker error occurs with the latest version (2.4.4.859) and had to go back to 2.4.1. Either way it works really well and even adds a little animation to the images on Xamarin.iOS.
Here was my code before:
<Image
HeightRequest="130"
Aspect="AspectFill"
Source="{Binding ImageURL}"
local:ImageBinding.URL="{Binding LinkURL}"
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All">
<Image.Aspect>
<OnPlatform x:TypeArguments="Aspect">
<On Platform="iOS">AspectFit</On>
<On Platform="Android">AspectFit</On>
</OnPlatform>
</Image.Aspect>
<Image.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnImageTapGestureRecognized"
NumberOfTapsRequired="1" />
</Image.GestureRecognizers>
</Image>
In order to get FFImageLoading to work you have to add this to the root <ContentPage> element:
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations"
Then I was able to do this:
<ffimageloading:CachedImage
AbsoluteLayout.LayoutBounds="1,1,1,1"
AbsoluteLayout.LayoutFlags="All"
HeightRequest="130"
DownsampleToViewSize="true"
Source="{Binding ImageURL}"
local:ViewBinding.URL="{Binding LinkURL}">
<ffimageloading:CachedImage.GestureRecognizers>
<TapGestureRecognizer
Tapped="OnViewTapGestureRecognized"
NumberOfTapsRequired="1" />
</ffimageloading:CachedImage.GestureRecognizers>
</ffimageloading:CachedImage>
In order for it to work with my TapGestureRecognizer I changed the ((Image)sender) cast in the method to a ((View)sender) cast because the CachedImage class in FFImageLoading doesn't actually inherit from Image, it inherits from View. Something to keep in mind if you have gestures or even custom bindings.
Aside from that it is very plug-and-play and I'm very happy with the outcome.

Xamarin Editor not showing keyboard in ListView

I am totally new to xamarin,
Following is my code :
<ListView x:Name="boxActivitiesList" ItemTapped="boxActivitiesList_ItemTapped" HasUnevenRows="True">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout Orientation="Vertical" Padding="25" VerticalOptions="Start" HorizontalOptions="Start">
<Label Text="{Binding Box}" TextColor="BlueViolet" FontSize="16" FontAttributes="Bold" LineBreakMode="TailTruncation" />
<TableView IsVisible="{Binding IsVisible}" Intent="Settings" HasUnevenRows="True" BackgroundColor="White">
<TableRoot>
<TableSection>
<ViewCell>
<StackLayout Orientation="Horizontal" Padding="15,0">
<Label HorizontalOptions="Fill" Text="Remarks" VerticalOptions="Center" TextColor="Black"></Label>
<Editor x:Name="txtRemarks" HorizontalOptions="FillAndExpand"></Editor>
</StackLayout>
</ViewCell>
</TableSection>
</TableRoot>
</TableView>
<Button x:Name="btnSave" Text="Save" Clicked="btnSave_Clicked" CommandParameter="{Binding BoxId}" IsVisible="{Binding IsVisible}"></Button>
</StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
When I click on Editor, Keyboard does not show. Can you please tell me what I am doing wrong.

I'm not sure why the Editor is not working in the Table, however i would reconsider this design and just use a Grid to realize a more complex layout inside your parent ViewCell.
Although there should be nothing wrong with the way you have it, it does seem to be overly complicating things with more nested controls when its not really needed. Ergo, the nested table should really just be a layout like Grid or StackPanel
Lastly, Xamarin.Forms can be a little fickle at the best of times with the various devices it supports. so its best to keep things as simple as possible