How to use a ListView in a ScrollView with XLabs-PopUp-Control?

FredyWengerFredyWenger CHInsider ✭✭✭✭✭

Hi all

In my App, I have a huge search-page with various (filterable) ListViews (until over 4’000 Items) in a StackLayout and the StackLayout in a ScrollView (as the Page has to be scrollable).
The ListViews were “linked” to SearchBars and were showed (.istvisible = true/false) over the focus-events of the SearchBars.
This has worked without problems on all platforms. With one of the 1.3-Versions, this don’t work anymore on Android (and - I apprehend - will also not work in the feature).
So.. had to search for another Implementation to bring my app to work again.

I have found a solution now with the PopUp-Control from XLabs

As there is no real documentation to the Control on the XLabs-site:
https://github.com/XLabs/Xamarin-Forms-Labs/wiki
and the control (until now) also don’t appears on the site under “controls”, I have documented my way to implement it (step-by-step, including installation) in my existing app n the attached .pdf.

With this control (for me the most important of the XLabs-Controls), I was able to solve my problem on a good way with only minor changes in the code of my existing app.

The documentation (attached .pdf) is for:

  • Users, that want to use the PopUp-control
  • Users, that want to implement a ListView in a ScrollView

I want to thank here @Skall for his awesome work to create the control in the XLabs-project, @RaphaelSchindler for help me over the first hurdles to the control and last but not least the whole XLabs-team for they awesome work (and they work for free!).

I hope, my documentation will helps some users to implement the PopUp-control and - specially - to implement it to use ListViews in ScrollView.
I further hope, it will help to boost the XLabs-project.

«13

Posts

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    Yay I'm mentioned on the internet :smile: Seriously, that is some nice document you created there and I think it will help a lot of people because it is so detailed.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @RaphaelSchindler:
    Thanks for your nice comment and... I hope so.
    Unfortunately there are not much detailed description in the "XF-universe", so that also newbies (like me) have the information's they need (for an easy implementation of "somewhat").

  • RaphaelSchindlerRaphaelSchindler USMember ✭✭✭

    Yeah that's true. But XF is a relatively new Framework so it will get better. And not to forget, they have a small team and you can't put 3 of them to write detailed Dev Guides the hole day, what would be great btw^^

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @FredyWenger , great job, well done.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @AlessandroCaliaro : Thanks.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    Update:
    In the .pdf, in the chapter "Add XLabs to project", I describe a problem with "LocalizedStrings" (WP-Project).
    This seems to be a general problem with the windows phone platform.
    For now (maybe/hopefully the problem can be solved), the XF-dependency in the XLabs-package has to be on the same version as the installed Xamarin.Forms (in the XLabs-Package there is a dependency set to Xamarin.Forms).
    To prevent the problem, install the latest XLabs-NuGet and be sure, that an already installed Xamarin.Forms-package is not newer as the XF-Version under dependencies in the XLabs-Package version (you can see it in NuGet-Manager, If you select the XLabs-project).
    If you install a Xlabs-Package, that include a dependency to a newer XF-version (as already installed), also the newer XF-version is installed automatically with the XLabs-Package.
    You also can install a specific XLabs-version with the NuGet-console( e.g. with dependency to an older XF-version) under this Link :
    https://nuget.org/packages/XLabs.Forms/

  • Junior.4184Junior.4184 USMember ✭✭

    Good job

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    As the attachment - for whatever reason - was lost, I post a new link to the .pdf:

    matrixguide.ch/Datenablage/diverses/How_to_Implement_XLabs_PopUp_Control.pdf

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:

    I have some strange problems with the PopUp-control in Windows Phone (8.0) and XF 1.4.2-pre-2 (they also exits in 1.4.1) and newest XLabs.
    I use the PopUp's to show some ListViews on the PopUp’s (from a ScrollView).

    I have various PopUp’s with ListViews on my search-page. I can show one after the other without problems…

    But… as soon as I show the same PopUp a second time, I have hard crashes:

    System.ArgumentException 
    An exeption (first chance) of type "System.ArgumentException" has occured in System.Windows.ni.dll
    Value does not fall within the expected range.
    

    and sometimes a

    null reference exception by .ShowPopup (object reference is not set to an instance of an object)

    Unfortunately I am not able to find out the reason by debugging...

    While it works without problems in iOS and Android.

    I’m not sure, if the problem comes from the Popup-control or from XF.
    Do you know something about…?

    Thanks for a replay (so that I know, where to search further…)

  • SKallSKall USMember ✭✭✭✭

    Would you have a sample project to share?

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:
    Thanks a lot for taking the time :smile:
    I have sent you a PM with a download-link to a short-description and to the app...
    Please let me know, if you need more...

  • SKallSKall USMember ✭✭✭✭

    @FredyWenger this one smells a little like Forms WP implementation bug. This is the stack trace I get from your application:

    System.NullReferenceException occurred
      HResult=-2147467261
      Message=Object reference not set to an instance of an object.
      Source=Xamarin.Forms.Platform.WP8
      StackTrace:
           at Xamarin.Forms.Platform.WinPhone.ListViewRenderer.UpdateNativeWidget()
           at Xamarin.Forms.Platform.WinPhone.VisualElementRenderer`2.HandleTrackerUpdated(Object sender, EventArgs e)
           at Xamarin.Forms.Platform.WinPhone.VisualElementTracker.OnUpdated()
           at Xamarin.Forms.Platform.WinPhone.VisualElementTracker`2.UpdateNativeControl()
           at Xamarin.Forms.Platform.WinPhone.VisualElementTracker`2.set_Child(FrameworkElement value)
           at Xamarin.Forms.Platform.WinPhone.VisualElementRenderer`2.SetNativeControl(TNativeElement element)
           at Xamarin.Forms.Platform.WinPhone.ListViewRenderer.OnElementChanged(ElementChangedEventArgs`1 e)
           at Xamarin.Forms.Platform.WinPhone.VisualElementRenderer`2.SetElement(VisualElement element)
           at Xamarin.Forms.Platform.WinPhone.RendererFactory.GetRenderer(VisualElement view)
           at Xamarin.Forms.Platform.WinPhone.VisualElementPackager.HandleChildAdded(Object sender, ElementEventArgs e)
           at Xamarin.Forms.Platform.WinPhone.VisualElementPackager.Load()
           at Xamarin.Forms.Platform.WinPhone.VisualElementRenderer`2.SetElement(VisualElement element)
           at Xamarin.Forms.Platform.WinPhone.RendererFactory.GetRenderer(VisualElement view)
           at Xamarin.Forms.Platform.WinPhone.VisualElementPackager.HandleChildAdded(Object sender, ElementEventArgs e)
           at Xamarin.Forms.Element.OnChildAdded(Element child)
           at Xamarin.Forms.Layout.OnInternalAdded(View view)
           at Xamarin.Forms.Layout.InternalChildrenOnCollectionChanged(Object sender, NotifyCollectionChangedEventArgs e)
           at System.Collections.Specialized.NotifyCollectionChangedEventHandler.Invoke(Object sender, NotifyCollectionChangedEventArgs e)
           at System.Collections.ObjectModel.ObservableCollection`1.OnCollectionChanged(NotifyCollectionChangedEventArgs e)
           at System.Collections.ObjectModel.ObservableCollection`1.InsertItem(Int32 index, T item)
           at System.Collections.ObjectModel.Collection`1.Add(T item)
           at Xamarin.Forms.ObservableWrapper`2.Add(TRestrict item)
           at Xamarin.Forms.RelativeLayout.RelativeElementCollection.Add(View view, Constraint xConstraint, Constraint yConstraint, Constraint widthConstraint, Constraint heightConstraint)
           at XLabs.Forms.Controls.PopupLayout.ShowPopup(View popupView, Constraint xConstraint, Constraint yConstraint, Constraint widthConstraint, Constraint heightConstraint)
      InnerException: 
    
  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:
    Thanks for the investigation and your feedback.
    So I know, that you can't do anything and the problem is not the control :wink:
    So... let's hope, that the problem in the WP-Implementation will be solved soon...
    Thanks and have a nice week-end :smile:

  • SKallSKall USMember ✭✭✭✭

    @FredyWenger if you can create a simple example of the bug it would be good to file a bug report: https://bugzilla.xamarin.com/

  • BuhhSathBuhhSath USMember ✭✭

    Thanks @FredyWenger

  • SKallSKall USMember ✭✭✭✭

    @FredyWenger I changed the PopupLayout implementation to ContentView from RelativeLayout in the latest release. The reason was that the intent of the control wasn't clear (my fault) and I caught one of my co-workers putting the actual layout into the Children of the control instead of the Content. It would be good if you tested the latest version of the control for any problematic behaviour. I did my own tests but since it seems you are using it in quite a few different layouts it would be nice to get your feedback. If there are any problems I will have to figure out the best option to go forward.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:
    Thanks for your posting here.
    I will do so (test it) next week, as I'm in holiday now on the maledives, where I need the :sunglasses: (:smile:)

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:

    Just back from holiday today…
    To remember:
    The only problem I had, was that my app was not usable with the PopUp on WP (while it have worked fine on iOS and Android).

    Installed now the latest XLabs (2.0.5603) - I don't see a newer version (also not on NuGet).

    On iOS, I don't see any difference until now...
    Unfortunately also not on WP (app still crashes by second load of a PopUp).

    I changed the PopupLayout implementation to ContentView from RelativeLayout in the latest release. The reason was that the intent of the control wasn't clear (my fault) and I caught one of my co-workers putting the actual layout into the Children of the control instead of the Content.

    If I understand you correct, the PopUpLayout now should be based on ContentView not RelativeLayout..?
    This don't seems to be so in my App (still RelativeLayout) :confused:
    Do you have pushed the new version to NuGet or what are I missing?

    Details see screenshots in attached .pdf.
    Thanks for a reply (before I test further...).

  • SKallSKall USMember ✭✭✭✭

    Installed 2.0.5603 from NuGet to make sure I didn't miss anything. This is what I see in Object Browser so yes, it is a ContentView in the release. There is still a RelativeLayout underneath and the functionality should be identical minus the RelativeLayout features being public.

    public class PopupLayout : Xamarin.Forms.ContentView
        Member of XLabs.Forms.Controls
    
  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:
    Thanks for your replay.
    As I wrote, I have updated all packages to 2.0.5603 and nothing is missing...
    So... until now, I can't see any difference (before testing it on Android) and unfortunately am not able to use the PL in WP (I hoped that the crash in WP is solved with the change what is not the case) .
    I have sent you my app some time ago and you wrote:

    this one smells a little like Forms WP implementation bug

    I also have informed Jason about the problem - unfortunately without any answer...
    I'm still on XF 1.4.2.6355 (as I don't have seen any information's to newer releases that points to the problem).

    Any idea how to solve the WP-crash?

    Thanks

  • SKallSKall USMember ✭✭✭✭

    Did you create a bug report on Bugzilla? Unfortunately the Xamarin Forms bugs seem to sit there for a long time without fixes but at least it would be there.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    Not yet (I have filled various other bugs, most still have state "New").
    Tried to update to the latest XF-Version (pre-2) to see if the bug still exits...
    Now I'm not able to compile anymore (at least the WP-Project).

    Die Xamarin.Forms.Build.Tasks.XamlCTask-Aufgabe konnte nicht aus der M:\SW\VS_2013\Xamarin\MatrixGuide\packages\Xamarin.Forms.1.4.3.6358-pre2\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.Build.Tasks.dll-Assembly geladen werden. Stellen Sie sicher, dass die -Deklaration korrekt ist, die Assembly und alle zugehörigen Abhängigkeiten verfügbar sind und die Aufgabe eine öffentliche Klasse enthält, die Microsoft.Build.Framework.ITask implementiert. M:\SW\VS_2013\Xamarin\MatrixGuide\packages\Xamarin.Forms.1.4.3.6358-pre2\build\portable-win+net45+wp80+win81+wpa81+MonoAndroid10+MonoTouch10+Xamarin.iOS10\Xamarin.Forms.targets 56 3 MatrixGuide.WinPhone

    Just annoying... :disappointed:

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall (and all other readers of this thread):
    Update to the bug:
    I have searched Bugzilla for a similar bug, found one and add a comment.
    Today, the state was changed to "Major" and "In Progress"
    Link:
    https://bugzilla.xamarin.com/show_bug.cgi?id=29229

    So... let's hope that it is the same bug and that it will be solved in the next update :wink:

  • SpaceMonkeySpaceMonkey GBMember ✭✭✭
    edited May 2015

    @FredyWenger How do you make it not transparent? it always shows a transparent popup.

    Never mind, I simply set background color to Black for the layout in my popup.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    I set the page-content to isvisible = false (as long as the PopUp is showed) and the isvisible = true by close of the PopUp

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall:
    I actually use (various) PopUp's on my search-page (what works like a charm (except the WP-Bug mentioned above)).
    The search-page is very complex (StackLayout -> ScrollView -> StackLayout -> Labels, Buttons, PopUps).
    As XF don't have "real modal forms" (code don't stop, when a "modal" page is called), I had to implement the query of the data via messaging-center.
    I have strange (and rarely, not to comprehend) problems with that implementation (which I investigate just now and hope to find out and solve the problem).
    If I'm not able to solve the problem, a possible workaround can be, to put also the whole search-page on a PopUp and remove the messaging-center-code.

    The logic then would be:
    - User taps on a search-icon
    - the whole (complex) search-page (see above) is showed on a PopUp, that contains Buttons that call further PopUps

    Question:
    - Should this be possible or do you see some problems?

    Thanks for an answer.

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Skall (and all other readers of this thread):
    I have updated to 1.4.3-pre3 today:
    The problem with the crash on WP seems to be gone (my WP App don't crash anymore by select an item on a ListView on a PopUp the second time - so it seems this was a XF-bug) :smile:
    Unfortunately I therefore have found a new "killer-bug" to iOS (Phone) in Pre-3 (which is relatively similar to the "old" WP-bug).
    If the new bug is not solved (very) soon, I have to downgrade to Pre-2 again (as iOS is more important for me as WP).
    You can find the details in the Pre-3-thread: https://forums.xamarin.com/discussion/43674/xamarin-forms-1-4-3-pre3-released#latest

    @SKall #2:
    May I have an answer to my question above ("call a PopUp from a PopUp") please ?
    Thanks

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    Answer from Skall in another thread:

    I can't think of a restriction in the PopupLayout itself. Nesting them over and over would most likely end up in Android StackOverflow at some point (and in different points for different devices to make matters worse) but a few inheritances should be fine.

  • AndrewMobileAndrewMobile USMember ✭✭✭✭
    edited June 2015

    @FredyWenger do you have a place with all these documents you did ?
    maybe a github repository with PDF files and attached sample code (where necessary)?

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @AndreiNitescu:

    I have done, what I can to make the documentations "public":
    If you click my profile, you can see links to (almost all) of my documentations.

    I further have started a "community documentation thread" here:
    http://forums.xamarin.com/discussion/43458/the-community-documentation-thread#latest
    (the target is, that also others add their documentations)

    As the "original documentation thread" don't is pinned yet ("visible on first page(s) only when a new docu is added for a few hours), I further have posted a meta-thread here:
    http://forums.xamarin.com/discussion/43560/meta-thread-to-the-community-documentation-thread#latest
    The meta-thread contains a link to the real thread and is thought, to add comments what pops it up and make it "visible" for a few hours (what is important especially for new users).

    It's a pity, that - especially my starter-guide:
    http://forums.xamarin.com/discussion/36821/quickstart-guide-to-start-developing-with-xamarin-forms#latest

    • don't is seen by the new users, as it contains a lot of information's, that - all together - should help new users to save day's, use the forum correct from start and so on...(and also would relieve the forum)

    I don't use github, as my documentation's don't contain a lot of code.
    For larger documentations, I create .pdf's and store them on one of our own servers, as in history attached-documentation's has become deleted (for whatever reason).
    Some of them also have found the way to other sites (e.g. blogs) on the internet...
    I'm a bit disappointed about the echo, especially to the "community docu thread" and the meta-thread.
    Almost not postings / reactions in the meta-thread, only a few other users have added documentations to the docu thread (if enough documentations are added, I will ask Xamarin for pin the thread on the first page).
    So.. feel free to post a message o the meta-thread :wink:

  • AndrewMobileAndrewMobile USMember ✭✭✭✭
    edited June 2015

    no, nothing is better than GitHub :)
    on GitHub people can watch your projects (they get notified when stuff is updated) so much better
    also, they can place comments, give suggestions in the Issues section and you can mark them as complete, etc

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    This is correct, if you post projects / solutions (what is not my intention) ...
    My documentation's normally don't contain a full project (example).
    Does it really make sense to - e.g. - post my starter guide (.pdf) on GitHub? :smirk:

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    I've seen big projects on GitHub keeping documentation there.

  • SivamuralidharSivamuralidhar USMember ✭✭

    Thank you @FredyWenger

    It was good article :smile:

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @Sivamuralidhar:
    You're welcome :smile:

    B.t.w.:
    You can find more information's, if you click my profile (Avatar or name) and especially this link is maybe interesting (as it contains various useful information's):
    http://forums.xamarin.com/discussion/36821/quickstart-guide-to-start-developing-with-xamarin-forms#latest

    Cheers :sunglasses:

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @FredyWenger where is the last version of your Popup doc? Do exist some example codes?

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @AlessandroCaliaro: On the first page of this thread. I have no additional sample code, but the .pdf contains example-code.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Thanks I have seen, test and works. Only a question about the clickable stacklayout under the popup. You have set IsVisible =true because you have not been able to add a second layout with transparent / semitransparent property. Have you found a way to implement this ?

  • FredyWengerFredyWenger CHInsider ✭✭✭✭✭

    @AlessandroCaliaro:
    I'm at home now (no access to my project).
    Not sure, If I understand your question correct....
    I have in mind, that I have set the "main-stacklayout" to visible = false, when I show the popup and then set it to true again, when the I close the popup (so that only the popup is visible on the screen, when it is shown).
    Let me know, if this was not the question or if I should see im my code for you to be sure (but... next week :smirk)

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    yes @FredyWenger it's correct.
    on the pdf you have written:

    Another solution - maybe - can be to add an additional element to the PopUp, with the size of the whole page and transparent / semitransparent background...

    but you have not been able to do this. I am interested in this solution... Have you found a workaround ?

Sign In or Register to comment.