2016年

6月

03日

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();          
        }        
    }
}

 

目 次