コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
PickerにHorizontalTextAlignmentを実装する方法 | Xamarin.Forms
- 2017/06/12
- 00:58
今回はXamarinのPickerコントロールで表示されている文字列のHorizontalTextAlignmentを設定する方法をご紹介いたします。PickerまたはDatePickerまたはTimePicker等にはHorizontalTextAlignmentが存在しません。そこでカスタムレンダラーを作成し、カスタムプロパティによりHorizontalTextAlignmentを変更できる機能を追加することが可能です。DatePickerについては以前の記事でもご紹介しております。
iPhone7 iOS10
Android4
前提条件
・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
１．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;
}
}
}
}
２．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;
}
}
}
}
}
３．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;
}
}
}
}
}
４．使用方法
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からご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html
- 関連記事
-
- リンクボタン（ハイパーリンク）を作成する方法 | Xamarin.Forms
- ScrollViewの現在のPositionの中央にContentViewを配置する方法 | Xamarin.Forms
- PickerにHorizontalTextAlignmentを実装する方法 | Xamarin.Forms
- インジケータを画面中央に表示する方法 | Xamarin.Forms
- SQLiteでSystem.Linq.Enumerable関連のSIGSEGVエラーが発生する件 | Xamarin.Forms
