Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scroll editor in Xamarin Forms into view

Using Xamarin Forms, consider the Xaml below.

<StackLayout VerticalOptions="FillAndExpand">
   <Image x:Name="cameraImage" Source="camera.png" />
   <Label Text="Describe the image" />
   <Editor />
   <Button Text="Save" />
 </StackLayout>

This renders an image, an editor and a save button. The image is in 4x3 image ratio and covers about a third of the available screen height. The editor is rendered below.

The problem is that the keyboard covers the Editor in iOS. A standard iOS issue normally.

The question is: What is the Xamarin Forms way of handling this?

Thanks

// Johan

like image 887
Johan Karlsson Avatar asked Jun 22 '14 16:06

Johan Karlsson


People also ask

How to get auto scroll for editors and entries with Xamarin forms?

Especially the hard-coded keyboard height should be implemented more elegantly. And probably you should apply it on iOS only, not on Android. To get auto scroll for Editors and Entries with Xamarin.Forms, you usually just have to pack your View, in this case the StackLayout, into a ScrollView:

What is a ScrollView in Xamarin?

By default, a ScrollView scrolls vertically, which reveals more content: The equivalent C# code is: For more information about bindable layouts, see Bindable Layouts in Xamarin.Forms. A ScrollView can be a child layout to a different parent layout. A ScrollView will often be the child of a StackLayout.

Is there a way to edit text inside a ScrollView?

Android works fine. If you put a Editor inside a ScrollView and click on the first line of Text, the first line scrolls up somewhere out of the reach/view and you have to scroll back down to see the Text. Add following code to the main Page.

How do I add a ScrollView in xamformscroll?

Right click XamFormScroll (Portable) project, select Add >> NewItem and select CrossPlatform-> FormXamlPage -> Give a relevant name. Add ScrollView tag, 2 Labels and 20 Entry Controls in ScrollViewDemo.xaml.


1 Answers

To get auto scroll for Editors and Entries with Xamarin.Forms, you usually just have to pack your View, in this case the StackLayout, into a ScrollView:

<ScrollView>
    <StackLayout VerticalOptions="FillAndExpand">
        <Image x:Name="cameraImage" Source="camera.png" />
        <Label Text="Describe the image" />
        <Editor />
        <Button Text="Save" />
    </StackLayout>
</ScrollView>

That's how it's supposed to work, but as of today (June 2014) there's a bug preventing this to work fully with the Editor (it works well with Entries). The issue is known and is worked on.

[UPDATE 2014-11-20]The issue has been addressed, and will be available in the next -pre release of XF 1.3

like image 199
Stephane Delcroix Avatar answered Sep 25 '22 08:09

Stephane Delcroix