2016年

6月

03日

Xamarin.Froms  Editor

複数行にわたるテキスト入力用のコントロールです。 iOSでは、「UITextView」、Androidでは、「EditText」、Windows Phone 及び WinRTで「TextBox」にマッピングされます。

メモとして詳細な設定を記述しています。
Text = "テキスト",
TextColor = Color.Blue,
BackgroundColor = Color.Silver,
 FontSize = 30,
// Read Only 読み取りのみ
//IsEnabled = false,
// 幅設定
//WidthRequest = 0,
// 高さ設定
HeightRequest = 160,
VerticalOptions = LayoutOptions.FillAndExpand, // 縦 画面全体に表示する
HorizontalOptions = LayoutOptions.FillAndExpand // 横 画面全体に表示する

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

Android Windows Phone エミレーター表示

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

Editor01

HomePage.cs 追加

HomePage.cs の書き換え

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

using Xamarin.Forms;

namespace Editor01
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {

            // iOSだけ、上部に余白をとる
            Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);

            // バックグランドカラー
            BackgroundColor = Color.Gray;

            // Editor を生成する
            var editor01 = new Editor
            {
                Text = "テキスト1",
                TextColor = Color.Blue,
                BackgroundColor = Color.Silver,
                FontSize = 30,
                // Read Only 読み取りのみ
                //IsEnabled = false,
                // 幅設定
                //WidthRequest = 0,
                // 高さ設定
                HeightRequest = 160,
                //VerticalOptions = LayoutOptions.FillAndExpand, // 縦 画面全体に表示する
                //HorizontalOptions = LayoutOptions.FillAndExpand // 横 画面全体に表示する
            };

            // Editor を生成する
            var editor02 = new Editor
            {                
                Text = "テキスト2",
                // Read Only 読み取りのみの場合には、TextColor、BackgroundColorは無効になる
                //TextColor = Color.Red,
                //BackgroundColor = Color.Blue,
                FontSize = 30,
                // Read Only 読み取りのみ
                IsEnabled = false,
                // 幅設定
                //WidthRequest = 0,
                // 高さ設定
                HeightRequest = 320,
                //VerticalOptions = LayoutOptions.FillAndExpand, // 縦 画面全体に表示する
                //HorizontalOptions = LayoutOptions.FillAndExpand // 横 画面全体に表示する
            };

            // Editorのみをコンテンツとして配置する
            //Content = editor;

            // StackLayout 縦並び方向 頭 初期値
            Content = new StackLayout
            {
                // スペース
                Spacing = 40,
                Children =
                {
                    editor01,
                    editor02
                }
            };
        }
    }
}

App.cs の書き換え

App.cs

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

using Xamarin.Forms;

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

 

目 次