So I have made an app and set the layout so it appears ok in portrait mode. For the snapped view I created a ListView that contains different instances of the same objects. This ListView is initially collapsed and then when it changes to snapped the listview becomes visible and the portrait mode objects become collapsed.
This works fine, but as they are two different sets of objects it messes up the user experience. If they enter text into the boxes in portrait mode and then switch to snapped view all of their text will have gone (as they put it in the now collapsed text box).
The question is is it possible to just change the position / size of the elements so that they are the same objects just in a different place, depending on if we're in snapped mode or not?
Hope this is clear. Thanks.
Yes, in fact, that functionality is built-in to the LayoutAwarePage class, which is the type of Page you get when you add a Basic Page (vs. Blank Page) to your project. If you started with the Grid or Split App template, the provided pages likewise extend LayoutAwarePage.
These pages have some boilerplate XAML that leverages the VisualStateManager and defines states for the various application layouts. What you can do is design your layout for the full landscape mode and then use the Device window to record changes to your layout (placement, colors, etc.) for Snapped, Filled, and Portrait.
For instance, here's a simple UI in landscape mode:
Then by switching Visual state to Snapped and turning on Enable State Recording, I made changes to the layout:
At runtime, the app looks like the following in each of the two states. No code needed - it's all being handled by LayoutAwarePage switching between VisualStates as the orientation of the app changes.
Related
I'm trying to replicate Instagram's zoom feature on their list of videos on iOs using xamarin.forms.
I have a xamarin.forms ListView (actually a modified FlowListView) and I've been successful for the most part except for the fact that when I'm zooming, the zoomed view (an AVPlayerViewController) zooms fine but cannot extend beyond the size of the cell that contains it so it gets clipped. The effect is achieved by a simple UIPinchGestureRecognizer and UIPanGestureRecognizer and applying the appropriate Transform/Scale using CGAffineTransform.
You can see the problem here
From what I understand, the clipsToBounds property is what keeps views confined to their parent's frame so I tried:
setting clipsToBounds to false (even though that's supposed to be the default value) in the renderer and recursively to all the views' .Parent properties.
setting it to false in the default ViewCell renderer.
setting Xamarin's IsClippedToBounds to false at the xaml level.
Instagram also seems to blur the background of the zoomed video (as it is being zoomed) which would indicate that they've somehow moved the video view out of the cell and into some other temporary fullscreen view.
So I'm looking for some general guidance; is my understanding of clipsToBounds wrong? What is keeping the view from being drawn outside of its UITableViewCell? Should I approach this from a different angle? I'm at my wits' end, thanks in advance.
I have implemented a MasterDetailPage with Xamarin Forms. Currently on Windows tablet only.
I see that there is the ToolbarItems that we can add ToolbarItems to. But this disappears and only displays as a popup type slidey piece. What I would like is for the toolbar or stack panel to display at the bottom of the MasterDetailPage all the time.
So the MasterDetailPage.Master(Red) stays put as well as the Toolbar/Other Component(Green)
When you select an item in the red it would load the MasterDetailPage.Detail(Blue) as usual.
The important thing is getting the Green Toolbar/other component to display at the bottom all the time.
Is this possible or do I just need to scrap the MasterDetails and use Stackpanels/grid?
I could get the green bar across the blue but really want it across red and blue sections as in the image provided.
Seeing as using a master page was appropriate for the dashboard view. I chose to add a StackLayout(User Control) at the bottom of the master view and also the Master Details pages.
It was a bit more duplication but only one line if using a user control.
This gave the illusion that the bar ran across the bottom, when in actual fact it was 2 bars one for the master and one on each of the detail pages.
I am developing an application on the UWP primarily targeted to W10 mobile users, however I believe this issue will also be valid if attempted on a touchscreen W10 device.
I am using a ListView to lay out a set of buttons (ListViewItems, technically) which have text and an icon. They are in my SplitView and are used similar to how you see in the Windows default apps such as Groove Music and News, as pictured:
It works perfectly as I'd hoped, except that if the user pulls up or down on the ListView with their finger it will 'squash' the list up or down - a useful animation for lists of emails, for example, but something undesirable on the UI of my program.
Is there a way of disabling this behaviour? If not, is there an alternative control that could suit my needs, or should I use a custom control?
Set the ScrollViewer.VerticalScrollMode to Auto or Disabled on your ListView:
<ListView
x:Name="ListView"
ScrollViewer.VerticalScrollMode="Auto"
</ListView>
The default value is Enabled which will always "squash" the top and bottom. When set to Auto, then if there is no need to scroll (less elements than the viewport can fill), the "squash" effect will be disabled. And if you set the value to Disabled, then the scrolling will be disabled no matter how many elements need to be displayed.
For the official documentation see here.
I have a layout that contains some controls in a red panel and right panel, both contain a listview with some items, so are scrollable by themselves, as seen on the top part of the picture.
I'd like to change the layout on narrow screen (when user resizes my app), because both panels in the same orientation will not fit. I'd like to know what is a good way to achieve this.
So far I've tried to create a grid that initially contains both red and blue panels, and when the window size changes, I "animate" property Grid.Column from 1 to 0 and Grid.Row from 0 to 1 on the blue panel. However, while this does indeed place the blue panel under the red one, I don't know how would I make the entire layout scrollable, because part of the blue layout will now be offscreen.
I think that maybe I could achieve my plan by having both panels in a StackPanel and just changing its orientation, but I'm unsure how to evenly split the StackPanel for its children in the wide layout (and the scrolling problem is still here).
Or should I just prepare two separate layouts and switch between them by using VisualStateManager?
"Just prepare two separate layouts and switch between them by using VisualStateManager"
Basically create layouts for all supported window sizes and put them all in the page with Visibility="Collapsed". Then handle the SizeChanged event and use VSM to switch to the state appropriate for the new size. You can easily define and view the different visual states in Blend. If you don't plan on ever using Blend - you can skip VSM and simply set Visibility of each layout panel manually in the event handler.
There are some other options like dynamically re-configuring the different orientations and ScrollViewer modes or even implementing your own layout panels, but I wouldn't try to optimize prematurely and in most cases the VSM route works well.
I understand that the Semantic Zoom control is basically implemented in XAML this way:
<SemanticZoom>
<SemanticZoom.ZoomedOutView>
<!-- Put the GridView for the zoomed out view here. -->
</SemanticZoom.ZoomedOutView>
<SemanticZoom.ZoomedInView>
<!-- Put the GridView for the zoomed in view here. -->
</SemanticZoom.ZoomedInView>
</SemanticZoom>
What I'm confused about is, assuming I have a "start" or "main" page with six Gridviews on it, each of which will display individually when "zoomed in" to see their details, do I need a single Semantic Zoom to handle the entire collection of GridViews, or do I need a Semantic Zoom control for each GridView?
And if I only need one Semantic Zoom control to handle all of these (the Zoomed Out View will, indeed, be the same for all of them, by definition), how do I make the Zoomed In/detail view specific to the GridView selected?
IOW, if I have six GridViews with information for:
Green Bay Packers
Milwaukee Bucks
Baltimore Orioles
Rory Gallagher
Mark Twain
Abraham Lincoln
...how do I see to it that when the Zoomed In/detail view is activated, and the user "pinched out" on the "Mark Twain" grid, that the Mark Twain-specific page is displayed?
I believe you just need one Semantic Zoom control. But instead of having six different gridviews, can't you just have one bound to a grouped collection? And then your GridView can use an ItemTemplateSelector to display your different data types.
See here for itemtemplateselector: http://blogs.u2u.be/diederik/post/2012/05/22/Using-Dynamic-XAML-in-Windows-8-Metro.aspx
I can provide some code if needed.
And regarding making sure the correct GridView is selected, the semantic zoom control handles that for you.
Semantic zoom works best with a GridView bound to a grouped collection source. The zoomed in and zoomed out views only support a GridView or ListView as their child element, so if you have 6 groups, you can achieve that with a single grid view.
In terms of the zoomed out view, the same type of control can be used to represent the groups. This view can be customised to show the information that you need - e.g. The number of books in a section or maybe an overview of the section.
Handling the transition from the zoomed out view to zoomed in is easy enough, if a little convoluted in terms of setting up the binding (IIRC you need to specify the zoomed out binding in code) but moving in the other direction is not guaranteed to behave as you want it to. If the zoomed out view is only one screen wide, for example, then it doesn't make sense to try to scroll to the previously selected group.
I am not in front of my dev machine right now so I'm afraid I can't put a sample together for you, but there are lots of examples online.