Can someone explain what these two properties do exactly?
IsHorizontalScrollChainingEnabled
IsHorizontalRailEnabled
I tried the first one with nested ScrollViewers, but can't find any difference in functionality. Is it enabled or disabled by default? What does it do exactly, there is no information about functionality in the docs or Google available as far as i can find.
Docs: True to enable horizontal scroll chaining from child to parent; otherwise, false.
The two properties HorizontalScrollBarVisibility (Visible/Collapsed) and HorizontalScrollMode(Enabled/Disabled) make sense to me, but in what case should i use IsHorizontalRailEnabled?
Docs: True to enable the horizontal scroll rail; otherwise, false. The default is true.
Scroll chaining
<ScrollViewer Background="Red" Height="600">
<ScrollViewer Background="Blue" Margin="50,150" Height="400" IsVerticalScrollChainingEnabled="False">
<Rectangle Height="500"/>
</ScrollViewer>
</ScrollViewer>
The outer ScrollViewer is 600px tall but its content is 700px tall.
The innter ScrollViewer is 400px tall but its content is 500px tall.
Both ScrollViewers can therefore scroll vertically to show that additional 100px of content that isn't visible.
Scroll chaining defines whether or not scrolling an inner ScrollViewer (via touch) will affect the scroll position of the outer ScrollViewer when the inner ScrollViewer is scrolled beyond the top or bottom extents.
Try scrolling the inner ScrollViewer via touch in this example. No matter what you do, you are only able to scroll the inner ScrollViewer and the outer ScrollViewer's scroll position isn't affected.
Rail
If you have a ScrollViewer with both horizontal and vertical scrolling enabled, then sometimes you want to define the touch scrolling behaviour such that motions which are "almost" in the horizontal or vertical direction are locked to the dominant axis. This is the standard behaviour when scrolling webpages on a mobile phone -- scrolling up and down the page will only scroll the page vertically and not horizontally (unless your touch motion is not "vertical enough", in which case the ScrollViewer will then pan the page instead of scrolling in only one direction).
Try it out in Edge on mobile. Zoom into a webpage and then scroll vertically, and keep scrolling without lifting your finger off the screen. See how you are only able to scroll vertically even if you move your finger horizontally (all within the same touch motion)? That's scroll rail in action.
In the above diagram, the center point is the starting point of a touch interaction within the ScrollViewer. You then move your finger (or pen, whatever) in a particular direction. If you moved your finger within a yellow region, then the ScrollViewer will "lock" the scrolling motion in either the horizontal or vertical direction. If you moved your finger into the blue region, then the ScrollViewer concludes that you weren't trying to scroll in the horizontal or vertical directions, and will pan the content in both directions as you continue to move your finger around. I hope that kind of makes sense?
Related
See the images below. One is at 78% zoom but the whole content is zoomed out but not stretching to its parent control despite having Horizontal and Vertical Alignment set to "stretch".
ScrollViewer is in a GridColumn and GridRow and the Grid is being loaded into a Frame which is a part of the NavigationView on the mainpage.
Desired effect is for the content to get smaller but fit to the width and height to show more columns in this case.
See the images below. One is at 78% zoom but the whole content is zoomed out but not stretching to its parent control despite having Horizontal and Vertical Alignment set to "stretch".
This behavior of ScrollViewer is by-deign, derive from the screenshot the DataGrid is a whole place. When we zoom in or out, The DataGrid will zoom overall. For the requirement, you could edit the DataGrid's MaxColumnWidth property when zoom.
it's the first time I'm seriously using autolayout so I'm sure I'm missing something obvious.
I have a very simple view embedded in a UINavigationController. There are three subviews: a UIWebView, a UIToolbar (which in turn contains three UIBarButtons) and a UIActivityIndicatorView. It's just a basic browser view, basically.
I managed to have everything appear as it should even on rotation, except for the toolbar: if the view is first loaded in vertical orientation, going landscape will not resize the toolbar from 44 to 32 points. Originally, before I wiped everything out, it did resize the toolbar BUT the built-in UIBarButtonItems appeared lower and cut off, as if the toolbar was still 44 points tall but pushed 16 points out of the screen.
If the view is first loaded horizonttaly, the bar is 32 points high but the built-in UIBarButtonItems appear still like that, and rotating to vertical will keep it at 32 points.
I honestly have no idea how to make this work as expected (ie. resize properly when rotated, with the buttons showing properly!), so if anyone could point me in the right direction -- pun intended -- I would be really grateful.
The activity indicator is right in the middle of the frame, with these constraints:
Align Center X to Superview
Align Center Y to Superview
The web view is set to use all available space from the top of the view (including the navbar) up to the top of the toolbar, and has these contraints:
Top Space to Superview
Bottom Space to Toolbar
Align Trailing to Toolbar
Bottom Space to Toolbar (it's actually listed twice)
Align Leading to Toolbar
The toolbar is a mess. It has:
Bottom space to Superview
Align Center X to Superview
Top Space to Web View
Align Trailing to Web View
Top Space to Web View (listed twice)
Leading Space to Superview
Align Leading to Web View
Bottom Space to Bottom Layout Guide
The problem is that by not adding any constraints at all, the web view is much bigger than it should be, and the toolbar doesn't even show.
I mostly set these constraints using the horizontal and vertical red bars (similar to springs and strouts) in the 'pin' popover for autolayout, but I'm starting to think that's not the most appropriate approach.
Note that I'm not trying to use autolayout within the toolbar, I read that it wouldn't work and I'm just using the built-in buttons plus a couple of labelled ones (those 'arrows' are really unicode characters, I may change them to prettier images at some point.)
Thank you in advance. :-)
So I created a bunch of PanoramaItems with Width of 600 and Orientation of Horizontal. When I swipe to the right direction the items align perfect on each item. When I swipe back to the left direction, it appears everything is aligned to the right side forcing me to swipe again to get my alignment correctly.
Is there a way to set the focus location of a panoranaItem each time someone changes their selection? Because it is odd to swipe once in one direction and swipe twice in the other.
If an insane client had asked for this functionality, I would have told him it was impossible.
Yet here I have your everyday UITableView inside a UIScrollView, setup in Interface Builder. The scroll view has vertical scrolling enabled, but not horizontal. So what the heck is THIS:
Note the bottom right -- that capsule is the visible scroll thumb in a horizontal orientation. If you scroll the table view up and down, that thumb moves left and right... INSIDE THE VERTICAL SCROLL TRACK. The width of the track is the complete representation of the height of the scroll view's contents; I scroll to the top of the table view, and the thumb moves to the left, so I can just see the right side of that capsule shape.
This has to be some kind of weird bug, right? Any ideas how to shake this loose?
Looks like I posted too soon. I deleted the table view in IB and re-created it. The problem went away. Must have been some glitch in Interface Builder.
I have a UIImageView that I've added a PinchGestureRecognizer to. Currently, the image is resized nicely when pinching, but I want to be able to resize the image without maintaining the aspect ratio. So if the user pinches horizontally, the image view's width would enlarge; if they pinch vertically, the height would enlarge and so forth.
Can anyone give me a hint on how I could do that please?
Write a custom gesture recognizer that requires two fingers to be on screen.
Once both fingers are on screen store their offset to the imageView's border in some UIEdgeInsets.
In touchesMoved, check if both fingers are onscreen: if so, calculate the new frame by applying the edgeInsets in the current touch position.
Header: click
Implementation: click
Works well and feels more natural than other implementations I've seen.
You would need to do the touch handling yourself as UIPinchGestureRecognizer only supports one scale which has no concept of being pinched horizontally or vertically.
You could create your own subclass of UIGestureRecognizer (see here for docs) which looked at the horizontal and vertical separation of the touch points to determine 2 different scales. It should be fairly straightforward to create I would have thought. Just look at the initial touch points and then when they move, calculate the difference in the current separation of the touches to the initial separation of the touches, in both the vertical and horizontal directions.