I have a screen where it shows comment list using stack layout and scrollview. User can add one more comment and click submit would add one more comments at the end of this scroll view for Xamarin Forms - Android and iOS app. Requirement is to scroll this list up to show latest display comment element. For this, I have used below line of code but it does not scroll up till the last element but second last element. I observed it in IOS and Android both.
await scrollView.ScrollToAsync(stkMain, ScrollToPosition.End, true);
Below image would give more idea about it.
As shown in picture, stack Layout 3 is not visible on screen though I have used above code to scroll till end. I have to scroll up scroll view to see stack layout 3.
Expected behavior - scroll view should scroll till complete last element as displayed on screen. Kindly suggest If I am not doing it right.
One thing I forget to mention is, when I have create point at line having scrolToAsync method in debug mode. Break point hits that line and if I hit F5 would make last element visible. I am surprised to see it but it happens
Remember that the rendering methods often is asynchronous, and the code behind can run before the elements are available on the rendered screen. I know that it's not the best solution, but sometimes I used to force a 300ms delay before run any visual interaction.
Try wait a short time (like 100 or 200ms) after you add new comment elements and then try scroll to the last child of your stkMain, instead.
Something like this:
// Here goes your logic to add the new comment
await Task.Delay(100);
var lastChild = stkMain.Children.LastOrDefault();
if(lastChild != null)
scrollView.ScrollToAsync(lastChild, ScrollToPosition.MakeVisible, true);
If you want to scroll just to bottom try
Device.BeginInvokeOnMainThread(async () =>
{
// Update your children here, add more or remove.
// todo
if (Device.RuntimePlatform == Device.Android)
{
await scrollView.ScrollToAsync(0, stkMain.Height, true);
}
else
{
await Task.Delay(10); //UI will be updated by Xamarin
await scrollView.ScrollToAsync(stkMain, ScrollToPosition.End, true);
}
});
Related
Is there a feature in Xamarin Forms which will point to (scroll up) to a label which became visible after validation? What I am trying to do is: if required field is blank I display label under it - saying that it needs to be filled out, I have a scrollable page and when label becomes visible I want to make it show that label by scrolling the page to desired location, so user will know what is missing.
Thank you.
You have two distinct points to implement:
first, your entry validation: there are many ways to do it, but you can take a look at this fully documented sample from Xamarin: Entry validation sample
Then next, you have to scroll to the (first) invalid entry control. That means that all your entries must be embedded into a parent Scrollview control. Then you have to find the first invalid UI element to scroll to (make your own "business" method to find this control).
Then just call the Scrollview scroll method. An example sample code could be:
// in your xaml.cs
//
public Task FocusInvalidEntryAsync()
{
var firstInvalidEntry = FindInvalidEntries().FirstOrDefault();
if(firstInvalidEntry != null)
{
return parentScrollView.ScrollToAsync(firstInvalidEntry, ScrollToPosition.MakeVisible, true);
}
return Task.FromResult(true);
}
The FindInvalidEntries() method is your own method to determine wich UI entry is invalid (maybe it needs your ViewModel).
Then ScrolltoAsync() is a method that will scroll the parent scrollview to the desired control. The last parameter indicates if you want to display the scroll animation.
Tell me if it's clear !
I have a list widget with five rows per page. When the user goes to the next page I reload the page (by doing an unload/load on the data source with the new page number) and that works fine. However, the list stays scrolled to the bottom. How can I scroll the list to the top so the user does not have to?
I tried the ways that work in standard HTML but they do not work in AppMaker, and I cannot find any documentation on how to do this.
Thanks for any tips or pointers.
I realize this is an old post, but for future visitors, here's what worked for me - you need to set the index of the list to zero. App Maker ensures that it scrolls the last selected item into view, and maintains this across navigations.
You can do this by passing in a callback function that runs after loading the list. For me, I reload the list from a dropdown widget that filters the list, so in the onValueChange event I've added:
// Load datasource
widget.datasource.load(function() {
// Set index to 1 to ensure we scroll to top of list
app.datasources.YOURDATASOURCE.selectIndex(0);
});
You can achieve the desired behavior by doing the following:
In the outline, locate the TablePanel widget and select the List:TableBody widget
2.In the property editor, scroll to the Events section and click on the onDataLoad event value. Then click on Custom Action.
Type in this code var elem = widget.getElement(); elem.scrollTop = 0; so that it looks like this
Make sure the change is saved and then preview your app and it should work. Let me know if you need something else or if it don't work.
For me Morfinismo's answer didn't work, but the following did:
In the style editor add CSS for the List element:
.app-pageName-nameOfTheListWidget {
overflow-y: auto;
}
And in the Property Editor under Layout set a Max height.
I have 2 fragments (Fragment A and Fragment B) both with collapsing toolbar layouts and corresponding recyclerviews within a coordinatorlayout.
If I scroll up in my recyclerview (so the CollapsingToolbarLayout has collapsed) and then open Fragment B from fragment A (Pushing A onto the backstack).
When I return to fragment A by hitting back. The CollapsingToolbarLayout/AppBarLayout is always expanded, even though the recycler view is in the same position.
Anyone experience this?
There's a issue related to this.
According to Chris Banes.
Add these lines inside onViewCreated() of your fragment to solve the issue.
ViewCompat.requestApplyInsets(mCoordinatorLayout);
It's an old question but none of the answers it's correct. I found this other question where they fixed the problem:
How to restore Collapsing Toolbar Layout State after screen orientation change
You have to set an id to your views in order to restore their state automatically.
I had face same problem so i write below code:-
private boolean isExpand = true;
private void setTitleNotExpand(boolean isExpand) {
if(getFragmentViewHolder() != null) {
this.isExpand = isExpand;
// AppBarLayout variable
getFragmentViewHolder().appbar.setExpanded(isExpand);
}
}
when you do add back stack then write below code :-
// write below code where you want to stick your toolbar
setTitleNotExpand(false);
// write below code where you want not to stick your toolbar
setTitleNotExpand(true);
on your onFragmentViewHolderCreated write below code :-
getFragmentViewHolder().appbar.setExpanded(isExpand);
another thing to consider is that views cannot restore their state if they don't have an id
Today, to fix this issue you only have to set an id to your coordinator layout to fix this.
So I have managed to get my lovely GLKit 3D menu working with a UIScrollview and life is good until I push to another view controller and come back.
So completely smooth movement, move to next controller and come back. UIScrollview does not bounce or flow nicely?
CADisplay Link is init and nil'd every time the scrollview moves and stops and this seems to work fine up until I push to another controller and come back.
Randomly if I click on a item which causes the scrollview to move and fire off all the code, it then kicks back in to life. sadly if I try to fire this off on the view did appear it does not do the same thing.
- (void)startDisplayLinkIfNeeded
{
if (!self.displayLink)
{
self.displayLink = [CADisplayLink displayLinkWithTarget:self.view selector:#selector(display)];
[self.displayLink addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
}
}
- (void)stopDisplayLink
{
if (self.displayLink)
{
[self.displayLink removeFromRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];
[self.displayLink invalidate];
self.displayLink = nil;
}
}
So, after a whole day of trying to work out this issue, it comes down to
self.preferredFramesPerSecond = 60`
If I dynamically change this to around 15 to 20 depending on what I do, the whole problem goes away.
I have a vertical menu inside a jScrollPane in a ASP.NET page. When the user clicks a menu choice it displays content in another panel relating to the selection. How can I make sure that the selected menu choice is in view when the page refreshes.
I'm looking for the same solution myself. You may have some success with my temporary solution using the scrollToElement api. Providing you can locate the specific menu item using a jquery selector you can have jScroll automatically jump to it in the scroll pane. eg
$(window).load(function()
{var api=$('#yourMenu').data('jsp');
api.scrollToElement($('.selectedOption'));
});
This will require the latest version of jscrollpane (http://jscrollpane.kelvinluck.com)
I wanted the same solution, and found this, which wasn't much help.
I eventually got it to work.
The position of the scrollbar is saved to localstorage, then when the page loads again, either by refresh or back from another page, if localstorage has a value greater than 0 which represents the top of the scrollbar (default, unscrolled position), it scrolls to that position.
var element = $(".scroll-pane").jScrollPane({showArrows:!0});
if(void 0 != element) {
var api = element.data("jsp");
$(function() {
0 < parseInt(localStorage.getItem("ScrollPosition")) && api.scrollToY(parseInt(localStorage.getItem("ScrollPosition")));
$(".scroll-pane").bind("jsp-scroll-y", function(b, a) {
localStorage.setItem("ScrollPosition", a)
}).jScrollPane()
})
};