I created below code with ScrollView in .NET MAUI, when trying to scroll nothing happens. Any help would be appreciated.
<ContentPage.Content>
<StackLayout>
<!-- <local:NavigationControl x:Name="_accountPage"/> -->
<ScrollView VerticalScrollBarVisibility="Always">
<StackLayout Margin="5" Spacing="20">
--- some content
</StackLayout>
</ScrollView>
</StackLayout>
</ContentPage.Content>
</ContentPage>
Regards,
Ali
The scroll view vertical options need to be FillAndExpand
Try this
<ContentPage.Content>
<ScrollView VerticalScrollBarVisibility="Always">
<StackLayout>
<!-- <local:NavigationControl x:Name="_accountPage"/> -->
<StackLayout Margin="5" Spacing="20">
--- some content
</StackLayout>
</StackLayout>
</ScrollView>
</ContentPage.Content>
</ContentPage>
scrollview have a size is scrollview's size, it also have a size is child size, when child size is biger than scrollview size, it need scroll. But when scrollview in stacklayout, stacklayout determine size according to child itself size, so scrollview size = child size, so you don't need scroll. That mean you need give a size to scrollview, or set it on other layout, such as Grid, Grid size is fixed,it will give child a fixed size.
Is it Android where your scrollview is not working? If so this issue has been noted here:
ScrollView doesn't work properly on Android. #7590
It suggests that it's been fixed in a service release. I have not seen that fix come to fruition yet - maybe we're still waiting for that next service release.
I also came across this issue while update a program to MAUI. I looked into the Microsoft documentation # https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-7.0
Within this I found the following:
ScrollView as a child layout
A ScrollView can be a child layout to a different parent layout.
A ScrollView will often be the child of a Grid. A ScrollView requires a specific height to compute the difference between the height of its content and its own height, with the difference being the amount that the ScrollView can scroll its content. When a ScrollView is the child of a Grid, it doesn't receive a specific height. The Grid wants the ScrollView to be as short as possible, which is either the height of the ScrollView contents or zero. To handle this scenario, the RowDefinition of the Grid row that contains the ScrollView should be set to *. This will cause the Grid to give the ScrollView all the extra space not required by the other children, and the ScrollView will then have a specific heigh
So in the end I moved by ScrollView from a stack like referenced in the code above into a grid with a row height of * for the ScrollView and auto for my other componence.
Related
I have a button within my CollectionView Footer that reaches the ends of the screen horizontally. I want to be able to set the width either to the size of the text, or to a width I pick.
Changing HorizontalOptions does nothing. I've been messing around with :
WidthRequest
MinimumWidthRequest
HeightRequest
MinimumHeightRequest
These options only affect button height.
As a workaround, you can set a grid in footer, then set the width and height of grid ,code like:
<CollectionView.Footer>
//width&height
<Grid ColumnDefinitions="*,100,*"
RowDefinitions="50">
<Button Grid.Column="1",Text="Click" BackgroundColor="Red"/>
</Grid>
</CollectionView.Footer>
The CollectionView in Xamarin Forms does not support the Padding Property. Therefore the last item in the collection can be hidden behind overlaying items higher in the z-stack, like floating action buttons. Is there a workaround for this?
The best workaround I found is to use the Footer property of collectionview and add an empty, fixed height, transparent StackLayout to act as the missing padding.
<CollectionView ItemsSource="{Binding Items}" ... >
<CollectionView.Footer>
<!--A fixed height footer,to simulate bottom padding and keep the last item in view when scrolling-->
<StackLayout Padding="0,0,0,70" BackgroundColor="Transparent"/>
</CollectionView.Footer>
</CollectionView>
A simple workaround for that is to create a view that contains it, and create padding on this View. I think it is better than placing a footer.
I wanted to use a floating button in a project but used the Footer also for a button.
Then there is no problem with overlaying .
<CollectionView.Footer>
<StackLayout BackgroundColor="LightGray">
<Button Margin="10,0,0,0"
Text="Friends of Xamarin Monkey"
FontSize="Small"
FontAttributes="Bold"
Clicked="Button_Clicked"/>
</StackLayout>
</CollectionView.Footer>
I would like to achieve the layout shown at the bottom in my app.
I got it sort of working by using the following structure
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout>
<Image>
I currently have the problem that I want to control the image height so that, considering the screen size or screen orientation, there are 2 or 3 rows of images visible.
Things I tried:
setting a HeightRequest on the image. This seems to be ignored, probably because the scrollcontainer creates an "unlimited" canvas to paint on. The image scales up to the actual image size, which is too large.
set a hard value for the height of the Grid.Row. This clips the fullsize image.
I've seen this workaround in the demo of the flexgrid where they seem to get around this by downloading a image that is resized on the fly. But this does not seem like an ultimate fix for me.
blue lines = scrollview
black lines = view
red lines = image
Thx #Nick Kovalsky for telling me that it should work like that. I just found out that the cause seems to lie in the fact that I used a StackLayout around the image (containing the image and the image-label). This was something I left out when posting my original question. When I replaced this StackLayout with a Grid it worked as expected.
Old situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<StackLayout Orientation="Vertical">
<Image>
<Label>
New situation:
<ScrollView Orientation="Vertical">
<Grid>
<ScrollView Orientation="Horizontal">
<Grid>
<Image>
<Label>
I am using ImageCircle plugin for xamarin forms
and it works well sometimes, when the picture is a kind of square...
But, when it's a rectangle, my image is resized and it's not that I planned
what Can I do to the image stop resize?
my code
<controls:CircleImage WidthRequest="75" HeightRequest="75" Grid.Row ="0" Grid.Column="1" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
I seted a fix height and width as you can see, but it didn't solve my problem, maybe because this circle image is a child of a grid and its grandfather (lol) is a relative layout but I really don't know if WidthRequest can change because of that...
How it always should be
How it is when the image is a rectangle:
EDIT---------------------------------------------
I put it in a Stach layout and I defined Aspect as fit...it helped but didnt solve...
<StackLayout Orientation="Horizontal" HorizontalOptions="Center" WidthRequest="75" HeightRequest="75" Grid.Row="0" Grid.Column="1">
<controls:CircleImage Aspect="AspectFit" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" Source="cadastrarPhoto.png" x:Name="cadastrar_foto_perfil">
<controls:CircleImage.GestureRecognizers>
<TapGestureRecognizer Tapped="ChamaPickerImage"/>
</controls:CircleImage.GestureRecognizers>
</controls:CircleImage>
</StackLayout>
I changed the api that I was using.
Now I use ffimage
Setting your HorizontalOptions="EndAndExpand" is what is causing you issues.
Instead, try setting both HorizontalOptions and VerticalOptions to a vaule that doesn't expand (Start, Center, End)
Note: I've noticed that you actually have to explicitly set HorizontalOptions to something that doesn't expand in order to get iOS to avoid stretching your CircleImage. Simply leaving it blank will default to stretching the image.
In the image, instead of HorizontalOptions="EndAndExpand" or VerticalOptions="EndAndExpand", just set it as "Start", "Center" or "End".
By default if you set it as "xxExpand" or do not set it at all, Xamarin iOS expands the image...
Im new to NS and I have a project. I want a Button floating inside a ScrollView.
<ScrollView>
<StackLayout orientation="vertical">
<AbsoluteLayout >
<Button top="0" left="0" right="0" text="Test" style="font-size: 10; margin:5; " />
</AbsoluteLayout>
<Label text="Trending Now: " cssClass="trending-label" />
<Repeater items="{{ categories }}">
<Repeater.itemTemplate>
.
.
.
</Repeater.itemTemplate>
</Repeater>
</StackLayout>
</ScrollView>
But its not working. The Button is also scrolling. I want the Button to be floating on ScrollView. Thank you.
The reason why the button is scrolling together with the other items is that everything is situated in a ScrollView. In order to have only the Label and the Repeater scrolling, the Button should be placed outside of it.
Another thing I have noticed is that on the Button, simultaneously are applied left and right alignment, which might cause a problem.
I made a possible implementation of the float button, which you can check here.