記事一覧

PickerにHorizontalTextAlignmentを実装する方法 | Xamarin.Forms


今回はXamarinのPickerコントロールで表示されている文字列のHorizontalTextAlignmentを設定する方法をご紹介いたします。PickerまたはDatePickerまたはTimePicker等にはHorizontalTextAlignmentが存在しません。そこでカスタムレンダラーを作成し、カスタムプロパティによりHorizontalTextAlignmentを変更できる機能を追加することが可能です。DatePickerについては以前の記事でもご紹介しております。


iPhone7 iOS10
xamarin_picker_textalignment_01.png
Android4
xamarin_picker_textalignment_02.png




前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.4.0.34 (NuGet Xamarin.Forms 2.3.4.247)
・macOS Sierra 10.12.4 / Xcode8.3.1 / Xamarin.iOS 10.8.0.1



1.PCLの記述方法

ベースとなるPickerコントロールを作成し、HorizontalTextAlignmentプロパティを実装します。

BasePicker.cs
using Xamarin.Forms;
namespace AppName.Controls
{
    public class BasePicker : Picker
    {
        public BasePicker() : base()
        {
        }
        TextAlignment _textAlignment = TextAlignment.Start;  //初期値
        //CustomRendererで取得できるように
        public TextAlignment HorizontalTextAlignment
        {
            get
            {
                return _textAlignment;
            }
            set
            {
                _textAlignment = value;
            }
        }
    }
}



2.iOSのカスタムレンダラー

iOSプロジェクト内にカスタムレンダラーを作成します。

CustomPickerRenderer.cs
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using AppName.Controls;
[assembly: ExportRenderer(typeof(BasePicker), typeof(CustomPickerRenderer))]
namespace AppName.iOS.Renderer
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                TextAlignment align = ((BasePicker)Element).HorizontalTextAlignment;
                switch (align)
                {
                    case TextAlignment.Center:
                        Control.TextAlignment = UITextAlignment.Center;
                        break;
                    case TextAlignment.Start:
                        Control.TextAlignment = UITextAlignment.Left;
                        break;
                    case TextAlignment.End:
                        Control.TextAlignment = UITextAlignment.Right;
                        break;
                }               
            }
        }
    }
}



3.Androidのカスタムレンダラー

Androidプロジェクト内にカスタムレンダラーを作成します。

CustomPickerRenderer.cs
using Android.Views;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms;
using AppName.Controls;
[assembly: ExportRenderer(typeof(BasePicker), typeof(CustomPickerRenderer))]
namespace AppName.Droid.Renderer
{
    public class CustomPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Xamarin.Forms.TextAlignment align = ((CFPicker)Element).HorizontalTextAlignment;
               
                switch (align)
                {
                    case Xamarin.Forms.TextAlignment.Center:
                        Control.Gravity = GravityFlags.CenterHorizontal;
                        break;
                    case Xamarin.Forms.TextAlignment.Start:
                        Control.Gravity = GravityFlags.Left;
                        break;
                    case Xamarin.Forms.TextAlignment.End:
                        Control.Gravity = GravityFlags.Right;
                        break;
                }
            }
        }
    }
}



4.使用方法

XAMLページに新たに作成したBasePickerコントロールとHorizontalTextAlignmentプロパティを設定するだけでとても簡単です。

TestPage.xaml
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:base="clr-namespace:AppName.Controls;assembly=AppName" >
    <base:BasePicker x:Name="pickerControlName" Title="TestPicker" SelectedIndexChanged="OnPickerChanged" HorizontalTextAlignment="End" HorizontalOptions="EndAndExpand"/>

<ContentPage>




当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
http://itblogdsi.blog.fc2.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語・データベース】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
Oracle10g SQLServer2008R2 SQLAnywhere8/11/16
ActiveReport CrystalReport ReportNet(IBM)
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。