Xamarin forms scrollview and layoutTo not working - c#

I'm creating an app using Xamarin Studio on a Mac.
The problem I'm facing is that a scrollview only works in the place where it was originally placed at.
I mean, I've a layout that slides to the right and left based on user input (I've two menus, one on the right and the other on the left, you get it). However, if the user doesn't open any menu the scrollview scrolls correctly, if the user does slide, it doesn't work anymore!
Here's how I'm handling the layout sliding with Xamarin.Forms:
public void toggle(){
Rectangle oldBounds = (Parent as RelativeLayout).Bounds;
oldBounds.X = -oldBounds.Width/ 3 * (_toggled?0:1);
(Parent as RelativeLayout).LayoutTo (oldBounds, 600, (_toggled?Easing.CubicOut:Easing.SpringOut));
_toggled = !_toggled;
}
Any function I might need to call? For example, forceLayout or something similar? I've tried this one and it doesn't work either!
Thanks in advance!

It may be worth considering to use the Xamarin.Forms MasterDetailPage as this has slide-out functionality inbuilt and works well, although I've experienced mixed results using an emulator in v1.2.2x, but works well on a device.
So instead of inheriting from Content Page you could inherit from MasterDetailPage and things will be easier to implement, rather than attempting to write your own.
The only downside to the current MasterDetailPage implementation in Xamarin.Forms is that the slide-out only happens from the left-hand side. This is unfortunately fixed. You couldn't even specify the fly-out to occur from the right side and also there is no support for dual slide-out areas, from the left and right sides (tested on version 1.2.3x). Chances are they will introduce possibly the slide-out direction and possibly dual-slide out areas in a later release but you would need to contact Xamarin on this as to whether its possible and the timeframe for such a feature.
In your current implementation there appears to be something getting in the way of the ScrollView that is preventing it from doing its normal action, and its not obvious what this is due to how your doing things on your page.
There are implementations of dual-sliders on Android, but I haven't looked for iOS, let alone WindowsPhone.
If you do manage to find them, you could perhaps write a custom renderer to use existing implementations to ease trying to re-create one yourself?

i managed to solve this! Check the github repository I created with an example. I included a comment on top of DetailView.cs explaining how I did it (hacky way of course! ;) ).
Basically I lay them side by side in a layout that fills all main page and than I use LayoutTo to change that layout Width so that the side menus are hidden.
Than, when you show them aka slide them in, they'll work as expected!
So, thats it, Xamarin.Forms dual panel sliding without any custom rendering!
Thanks for your help!

Related

How to add options which appears on swipe gesture in List View in Windows 10

I am new to Windows 10 and I just came across Windows 10 new Outlook App which has swipe features but my requirement of swipe is different. I want to add 3-3 options on left and right side of ListView. I also came across below Nuget package from Github but it doesn't help much
SwipeListView
What I want to achieve is below
Please can someone suggest a good and easy way to add swipe actions in ListView.
As far as I know there is no library ready made for your need.
You can achieve the effect using custom ListViewItem. You will need a trick along the way to get the ListView accept TranslateX manipulation: Set ManipulationMode of the ItemsPresenter inside ListView template to TranslateX, System.
The rest is quite easy: you set manipulation mode of the custom ListViewItem to TranslateX, System, and handle ManipulationStarted, ManipulationDelta and ManipulationCompleted events. You also need to put UI underlay of the custom ListViewItem.
I can not give complete code sample given the big scope of your question. But you can take a loot at Comet to get the basic ideal of how to handle things.
There's no library that does exactly this, as far as I know. There are a few things that get close, however, and you could probably modify them for your needs. I'd recommend taking a look at this one. All you should need to do is slightly modify the template control, then set the control as the content of the ListViewItem.
However, it should be noted that having to tap the command pretty much defeats the purpose of being able to swipe the item; it would actually be faster for the user if you just used a button on the item which launches a CommandPopup. (Unless, of course, you do something really interesting and completely impractical and would launch whichever command they stop swiping on.)
After some research, I got a Nuget Package which meets my requirements
LLMListView
It has some very useful options as the following
Swipe Left/Right with one action
Swipe Left/Right with one action with animation
Swipe Right with fixed and multiple actions
Some extras
Pull to refresh
Pull with a button
Load More
Load More in Group view
Here is the screenshot
LLMListView Demo

windows phone skipping frames in navigation

I have an app where you could go through in views like;
play -> normal or custom -> select map -> summary -> start
I would like to make a shortcut option from play to summary, but I also want navigation back to select map page with the back button functionality.
So the normal workflow p->noc->sm->summary but I want to implement p->sm with the noc<-sm<-summary back functionality too (with the windows phone back button).
I saw how can I delete items from the backstack, but google not helped me how can I navigate through a couple of windows without showing that to the user.
Am I need to override the back button or there is a "better" way to do that?
It's a WP8 project.
Edit:
I didnt need the exact codesnippet for this just a design concept in this patform. (just for the is it duplicated guy)
My normal or custom and select map page should be randomized when I do the shortcut, both of these pages has a "button" which can randomize those settings, I just want a swipe->press->swipe->press->swipe actions shortened to a button press without loosing the 'post modification after randomized' feature.
After I read your comments I think I will handle the back button all of the mentioned views so the backstack will not be getting inconsistent at any state. If I understand well I can tell it in every page what is the "backed" page.
You can't inject pages into the backstack. You can override the back button and do a forward navigation with the animations you would normally do when going backward (and then remove the page you just came from off the stack), but honestly, this all gets complicated and for good reason. One of the few hard truths of Windows Phone design is that you shouldn't mess with the backstack.
Instead, I would rethink your flow. It seems like your second page is a setting of some sort (Normal or Custom). If that is changeable, maybe make a button that can float a modal popup on top of the page and move things around according to the new decision.
Looking again at your flow, it seems like several of the pages may be settings. Can you combine those into one page, maybe on a pivot or panorama? That way making changes is just a swipe away.
Regardless, while it is possible to do what you are looking to achieve, I would look long and hard at whether it is actually the best experience for your users.

WPF layout changes (Fill, Full, Snapped)

I am working on a Win8 app destined for the Windows Store. Hurdles I am trying to overcome is how to deal with the different ways an app can be displayed.
Currently, my main pages is a LayoutAwarePage so it has logic to handle different visual states. However, my question is more how to make my page render differently depending on its state.
I thought, initially, that you basically created a layout for each state that the application supports. But it seems like the VisualStateManager portion of the XAML is just an area where you make piecemeal modifications to the design (hide an element, change an alignment).
I am working with a grid that has many columns and rows to organize my controls and it looks great in fullscreen. However, this doesn't work at all in the snapped state, as most of my controls become hidden off screen. I could certainly add a ScrollViewer control, but this is basically a hack and a usability nightmare for a user.
Thanks for any insight!
It might be that your app doesn't lend itself to snapped view. You are allowed to simply display a message / image that states this. Alternatively, consider just showing the columns that are most important.
The standard MS way seems to be to replace horizontal oriented controls with vertical ones - maybe a listview or something would look better. You'll probably find your code easier to read if you have one control for snapped and another for full screen.
Not exactly related to your question, but Blend works very well with XAML to allow you to manipulate the grid or show the relevant control.
Here is a very good guide from Jerry Nixon.
http://blog.jerrynixon.com/2012/12/walkthrough-implementing-snapview-in.html

WPF - Resizing chromeless windows using attached behaviors,..Any suggestions?

Who fancies a challenge?
I'm currently working on the ControlTemplate for a chromeless Window which will be a part of a reusable theme assembly. I want the behaviors for moving, closing, minimizing and restoring to be implicit so I've written attached behaviors for this functionality which I've then included in the template.
Now,..I've come to resizing and I've come to a junction. For better or worse I'm handling the mouse move in the behavior and finding whether the cursor is inside the resizing 'zones'. I'm far enough to change the cursor appropriately but now I've gotten to actually resizing the window there are three options I've come across.
I could hand-ball the affair and adjust the Left & Top and Width & Height as needed. This is the simplest option and is easily achievable using attached behaviors but it seems like moderately heavy lifting and I understand that WPF will continue to render as the window is adjusted causing flickering,..which sucks.
The second option is to get a message hook and listen for WM_NCHITTEST and the like but the solutions I've found so far involve me sub-classing Window and I don't want to force consumers of the theme to use any controls that aren't framework provided.
The last option is to somehow draw a rectangle on the screen showing the are the Window will take up as the mouse is dragged and then resize on MouseUp,..which seems doable but it's not something I've done before so some pointers on that would be cool.
So,..what should I do? The Win32 route seems like my best option so far but I'd rather not if someone has a 'purer' solution that works. I'm happy to get suggestions with option 3 and anything right up to .Net 4 in case some dynamic magic might be possible.
Thanks in advance.

How can I create a button with an embedded close button

I am trying to create a panel which will have a set of "buttons" on it.
These buttons should have the following behaviour:
Appear similar to a tag (with
rounded edges)
Contain a red
cross to remove the filter/tag from
the panel, similar to the way internet
explorer tabs have an embedded cross to close the individual tab.
allow the user to click
on the tag and respond like a normal
button (as long as the click is not
in the red cross)
Number 1 is no problem, this is just appearance, however, regarding numbers 2 and 3, I am not sure if there is already code out there do to something similar...and I dont really want to reinvent the wheel if I can avoid it!
My question is: Does anyone know if there is something out there in infragistics which will do this simply, or will I need to write this myself by subclassing winform buttons?
Thanks in advance!
Is this new development or maintenance of an existing project?
If it is maintenance, you have a somewhat tougher time ahead. You'll implement a UserControl, probably segmented into two buttons. Use docking to get the behavior as correct as possible. The far right button would contain your cross image; the left (which would need to auto-expand as you resize the control) would contain your primary button behavior. Play with the visual styles until you get them right (EG, removing borders, etc).
If this is new development, and you haven't gotten too far into it, you might consider using Windows Presentation Framework (WPF) instead of WinForms. It will be easier to build the control and get it to look exactly how you want it. WPF includes an extremely powerful control compositing system which allows you to layer multiple controls on top of each other and have them work exactly as you'd expect, and it carries the added advantage of allowing full visual control out-of-the-box.
Either way, this is more work than dropping in an external component ... I've used Infragistics for years, and I can't think of anything they have which is comparable. The closest, but only if you're building an MDI application and these controls are for window navigation, is the Tabbed MDI window management tools -- and there, only the tabs (which replace window title bars) have this behavior.
I don't think that infragistics can do something like this. The UltraButton control can't.
Implementing a own control wouldn't be that hard.
your probably going to have to make a costume control for this type of work.

Categories