03日 6月 2016

Xamarin.Froms EditorScrollView テキストスクロール

複数行にわたるテキスト入力用のコントロールでスクロール機能を付加しています。

コントロールを画面いっぱいに表示する場合、iOS（iOS7以降）では、上部のステータス表示領域に重なるため、下記のサンプルでは、iOSのみパディング20をとっています。

Android Windows Phone エミレーター表示

ファイル --> 新規作成 --> プロジェクト(P)... --> Cross-Platform --> Xamarin-Forms で作成

EditorScrollView01

HomePage.cs 追加

HomePage.cs の書き換え

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;

namespace EditorScrollView01
{
public partial class HomePage : ContentPage
{
public HomePage()
{
// iOSだけ、上部に余白をとる
Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

// ラベル
Label header = new Label
{
BackgroundColor = Color.White,
TextColor = Color.Blue,
Text = "テキストスクロール",
Font = Font.SystemFontOfSize(30, FontAttributes.Bold),
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Start
};

// Editor
var editor = new Editor
{
Text = "1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n

11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n

21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n

31\r\n32\r\n33\r\n34\r\n35\r\n",
TextColor = Color.White,
// Read Only 読み取りのみ
//IsEnabled = false,
BackgroundColor = Color.Blue,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.FillAndExpand
};

// Build the page.
Content = new StackLayout
{
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Children =
{
//ヘッダーラベル
header,
// スクロールビュー
new ScrollView
{
BackgroundColor = Color.White,
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = ScrollOrientation.Vertical,
Content = editor
}
}
};
}
}
}

App.cs の書き換え

App.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Xamarin.Forms;

namespace EditorScrollView01
{
public class App : Application
{
public App()
{
// The root page of your application
MainPage = new HomePage();
}
}
}