How to write a custom ScrollView in xamarin? - xamarin

Am new to xamarin technology. I am more of a WPF developer. I wish to develope an application in xamarin that displays data in a table format. Am developing the application in cross platforms which should be running in xamarin.forms, xamarin.Android and xamarin.IOS. The problem am facing is to write a scrollViewer in common for all the platforms. Is there any workaround to write a custom scroll viewer(with both Horizontal and Vertical scrolling) that works in common for the three platforms? It would be helpful if I could be pointed to some blogs or links defining this.

If I understand your question well, your problem is that Xamarin.Forms.ScrollView can scroll only horizontally or vertically.
so you can make a scrollview inside another scroll view one is horizontal and the other is vertical.
Like that
ScrollView scrollView = new ScrollView{
Orientation=ScrollOrientation.Vertical,
Content = new ScrollView{
Orientation=ScrollOrientation.Horizontal,
Content = new StackLayout{
Children={new Label{Text="some text"}}
}
}
};

It seems, as you are searching for a Grid...?
Maybe you should have a look and the component store:
free Grid-control from DevExpress
Note: There also are some other Grid-components in the store (but not for free:-)

Related

Color of ScrollBar in ScrollView

I use Xamarin.Forms, ScrollView, I can change ScrollView.Background, but background color of scroll bar don't change. How I can do it ?
Can I make a universal shared style scrollbar for all platforms?
If you can not, can I make so that I could use ScrollView in Shared project Xamarin.forms but at the same time that it is displayed at
on different platforms with their own style?
Maybe it can be done without their own styles and somehow easier? I need only custom scrollbar color in ScrollView Xamarin.Forms.
I googled but found no examples of the using color of scrollbar Xamarin.forms.
if it is not very easy to do, I would like to use an example code.
The Xamarin.Forms ScrollView control translates to a native scroll control on each platform. What you need to do, is create a custom Effect that gives you access to those underlying controls. From there you can customize the appearance of the scrollbar.
On Android, you need to work with android.widget.ScrollView. You should define a custom drawable for the scrollbar in your resources folder and programmatically change the scrollbar to that inside your effect. There are quite a few answers on StackOverflow that show you how to do it, for example here and here.
On iOS, the native control is UIScrollView from UIKit and the scrollbars are predefined images so you'll probably need to replace the image each time the control updates. Take a look here for a good starting point.
In the end, you'll have something like this in your XAML:
<ScrollView>
<ScrollView.Effects>
<local:ScrollBarColorEffect ScrollBarColor="Green" />
</ScrollView.Effects>
...

Magnification of items during scrolling in Xamarin.Forms

We need to implement a horizontal scroll control in Xamarin.Forms, that would not just allow scrolling through items via swipe, but would magnify elements in the row as they approach a center of the scroll control. The design of the layout desired is this:
Thus far I wasn't able to find any control for Xamarin or Xamarin.Forms that implements such behaviour.
Please either provide a hint on how to approach the implementation of such functionality via extending the UIScrollView, or point to a control or example that related to the requirement. Thank you.
You can use the CarouselView, but it's still in the preview. So, the best way to implement it at the moment is to use the CustomRenderers

What is this mobile navigation pattern called?

What is this mobile navigation pattern called? I need to replicate it but I dont even know how its called.
I need to replicate it in the mobile version of a responsive website. I believe its used in many native apps, its a "carousel" style navigation, where you slide the nav sideways in orther to access the other options.
Mobile subnav
I believe this particular pattern is called Horizontal Overflow. You can find an example of it under Brad Frost's Responsive Navigation Patterns (along with a ton of other great patterns) here:
https://bradfrost.github.io/this-is-responsive/patterns.html#navigation
In Android/Material Design that's a Tab.
https://www.google.com/design/spec/components/tabs.html#
There is no identical native control on iOS, the closest thing is a Segmented Control placed at the top of a view.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/Controls.html#//apple_ref/doc/uid/TP40006556-CH15-SW27
Their usage varies on the two platforms. On Android tabs navigate among a number of views, where on iOS top aligned Segmented Controls often provide a filtering function on a single view.
iOS has Tabs too, but they're properly positioned at the bottom of the screen.

Xamarin set content view width to root view

I'm using Xamarin Auto Layouts with Storyboard on Visual Studio 2015.
I have a root view, Scroll View and Content View.
I want the application to only scroll on the y-axis but scale on the x-axis.
I want to do something like this.
Adding a view to a scroll view that will stretch to fill available width
Which is setting the width of the content view to the root view.
But using Xamarin this does not seem possible.
So in this example, if I run the application, I have to scroll to the right to see the right most label. I want all three labels to show up on the iPhone, by scaling down on the x-axis.
I have also tried using the "I" handle on the content view in storyboard UI Designer of Xamarin VS, but it doesn't identify the root view.
If it's not possible using storyboard, I will settle with code.
I have tried this.
public override void ViewDidLoad()
{
ContentView.Frame = new CoreGraphics.CGRect(ContentView.Frame.X, ContentView.Frame.Y, View.Frame.Width, ContentView.Frame.Height);
//ScrollView.TranslatesAutoresizingMaskIntoConstraints = false;
base.ViewDidLoad();
// Perform any additional setup after loading the view, typically from a nib.
}
But it doesn't do anything to help me.
How can I scale the UI down on the X-axis while on top of a scroll view using Xamarin.ios?

Xamarin Forms Content Page: Change flow direction to Right to Left?

how can I change the flow direction of a Xamarin Forms Content Page from Left to Right to Right to Left? something like Windows Phone Flow Direction property?
#Hodor thanks, there is no support for such a thing (at least at this time). a workaround for this when using list views is to create multiple list item templates with LTR/RTL directions and use them accordin g to the current UI culture.
Another workaround for other controls is to implement a renderer for each control type and change its HorizontalOptions or XAlignment according to the UI culture.
it's 2017 and Xamarin forms does not support RTL yet..
It might be worth mentioning that the Grial UI Kit product has just added RTL support.
More details here
Try latest In latest Xamarin forms 3.0.0
If you’re making apps that support right-to-left languages, we have great news for you: Xamarin.Forms 3.0 makes it easier than ever to flip layouts to match language direction!
When supporting languages such as Arabic and Hebrew that flow right-to-left, you may now tap into the very easy to use FlowDirection property on any VisualElement instead of using platform-specifics or effects as you may have used previously. Because you already know the direction the device prefers by accessing Device.FlowDirection, updating your UI could be as easy as adding this to the head of your page in XAML:
FlowDirection="{x:Static Device.FlowDirection}"
For more information about updating your applications to support right-to-left layouts:
Right-To-Left Localization in Xamarin.Forms Blog
You mean the navigation flow?
Usually left => right means adding a page on the navigation stack and right => left means removing it.
You can extend a navigation controller on the "native" C# code and make custom animations. There are many ways to do that. Here's an example in MonoTouch
public partial class ScreenController : UINavigationController
{
private Page currentPage = null;
private void setCurrentPage(Page p)
{
currentPage = p;
//Using present View Controller: will set the current page to root.
PresentViewController(new UINavigationController(currentPage.CreateViewController())
{
ModalTransitionStyle = UIModalTransitionStyle.FlipHorizontal,
}, true, null);
//Using custom animation
PushControllerWithTransition(this, currentPage.CreateViewController(), UIViewAnimationOptions.TransitionFlipFromLeft);
}
public static void PushControllerWithTransition(this UINavigationController target, UIViewController controllerToPush,
UIViewAnimationOptions transition)
{
UIView.Transition(target.View, 0.75d, transition, delegate()
{
target.PushViewController(controllerToPush, false);
}, null);
}
}

Resources