Xamarin.forms Labelで複数行かつ「...」を表示させる方法ありますか？

Question

こんにちは。
Xamarin.formsのLabelコントールについて質問です。

Labelで表示するテキストを複数行表示させるためには、
LabelのLineBreakModeプロパティにLineBreakMode.WordWrapをセットしたら実現できます。

しかし、LineBreakMode.WordWrapでは複数行表示ができても
以降もテキストが続くことを示す「...」を表示することができません。

「...」を表示させるためには、LineBreakModeプロパティにLineBreakMode.TailTruncationをセットする必要があります。

複数行かつ「...」を表示させる方法はありますか？

対象部分のコードは以下のとおりです。

AbsoluteLayout layout = new AbsoluteLayout
{
 HeightRequest = 25
};

Label label = new Label
{
 Text = "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト",
 FontSize = 12,
 VerticalTextAlignment = TextAlignment.Center,
 LineBreakMode = LineBreakMode.WordWrap
};

AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.All);
AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 0.5, 1));
layout(label);

よろしくお願いします。

Answer 1

Effectsを使用することで可能です。

各プラットフォームのプロジェクトにEffectsのファイルを作成し、PCL側コントロールのプロパティに作成したEffectsを登録します。

• PCL

using Xamarin.Forms;

namespace LineBreakSample
{
    public class SamplePage : ContentPage
    {
        public SamplePage()
        {
            AbsoluteLayout layout = new AbsoluteLayout
            {
                HeightRequest = 25
            };

            Label label = new Label
            {
                Text = "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト",
                FontSize = 12,
                VerticalTextAlignment = TextAlignment.Center,
            };
            label.Effects.Add(Effect.Resolve("LineBreakSample.LineBreakLabelEffect"));

            AbsoluteLayout.SetLayoutFlags(label, AbsoluteLayoutFlags.All);
            AbsoluteLayout.SetLayoutBounds(label, new Rectangle(0.5, 0.5, 0.5, 1));
            layout.Children.Add(label);

            Content = layout;
        }
    }
}

• Android

using Android.Widget;
using LineBreakSample.Droid.Effects;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ResolutionGroupName("LineBreakSample")]
[assembly: ExportEffect(typeof(LineBreakLabelEffect), "LineBreakLabelEffect")]
namespace LineBreakSample.Droid.Effects
{
    public class LineBreakLabelEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            Control.LayoutChange += (s, args) =>
            {
                var label = Control as TextView;

                if (label == null) { return; }

                label.Ellipsize = Android.Text.TextUtils.TruncateAt.End;
                label.SetMaxLines(2);
            };
        }

        protected override void OnDetached()
        {
        }
    }
}

• iOS

using LineBreakSample.iOS.Effects;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ResolutionGroupName("LineBreakSample")]
[assembly: ExportEffect(typeof(LineBreakLabelEffect), "LineBreakLabelEffect")]
namespace LineBreakSample.iOS.Effects
{
    public class LineBreakLabelEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var label = Control as UILabel;

            if (label == null) { return; }
            label.LineBreakMode = UILineBreakMode.TailTruncation;
            label.Lines = 2;
        }

        protected override void OnDetached()
        {
        }
    }
}

• UWP

using LineBreakSample.UWP.Effects;
using Xamarin.Forms;
using Xamarin.Forms.Platform.UWP;

[assembly: ResolutionGroupName("LineBreakSample")]
[assembly: ExportEffect(typeof(LineBreakLabelEffect), "LineBreakLabelEffect")]
namespace LineBreakSample.UWP.Effects
{
    public class LineBreakLabelEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            var label = Control as Windows.UI.Xaml.Controls.TextBlock;

            if (label == null) { return; }

            label.TextWrapping = Windows.UI.Xaml.TextWrapping.Wrap;
            label.TextTrimming = Windows.UI.Xaml.TextTrimming.WordEllipsis;
        }

        protected override void OnDetached()
        {
        }
    }
}

Comments

[_shunsuke_kawai]

https://github.com/shunsuke-kawai/LineBreakSample
にサンプルをあげておきました。

[gucchi28]

親切に回答いただきありがとうございます。
各プラットフォームに記述する必要があるんですね。
後ほど、トライしてみます。
ありがとうございました。