Quantcast
Channel: かずきのBlog@hatena
Viewing all articles
Browse latest Browse all 1387

Xamarin.FormsでLabelに下線を引きたい

$
0
0

デフォルトで引けないんですね。知らなかった。

Effectを使おう

ということでカスタムレンダラー案件かなと思ったらEffectでいけるっぽいです。

Android

Androidに以下のようなクラスを追加します。

using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ResolutionGroupName("Sample")]
[assembly: ExportEffect(typeof(PrismUnityApp13.Droid.UnderlineEffect), "UnderlineEffect")]
namespace PrismUnityApp13.Droid
{
    publicclass UnderlineEffect : PlatformEffect
    {


        protectedoverridevoid OnAttached()
        {
            var textView = this.Control as TextView;
            if (textView == null) { return; }

            textView.PaintFlags = textView.PaintFlags | Android.Graphics.PaintFlags.UnderlineText;
        }

        protectedoverridevoid OnDetached()
        {
        }
    }
}

iOS

iOSは動作確認取れる環境はないのですが、UILabelに対して以下のようにすると下線が引けるっぽい?

using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

[assembly: ResolutionGroupName("Sample")]
[assembly: ExportEffect(typeof(PrismUnityApp13.iOS.UnderlineEffect), "UnderlineEffect")]
namespace PrismUnityApp13.iOS
{
    publicclass UnderlineEffect : PlatformEffect
    {
        protectedoverridevoid OnAttached()
        {
            var label = this.Control as UILabel;
            if (label == null) { return; }

            var text = label.Text;
            label.AttributedText = new NSAttributedString(
                text,
                underlineStyle: NSUnderlineStyle.Single);
        }

        protectedoverridevoid OnDetached()
        {
        }
    }
}

PCL

そして、PCLでEffectを作ります。

using Xamarin.Forms;

namespace PrismUnityApp13
{
    publicclass UnderlineEffect : RoutingEffect
    {
        public UnderlineEffect() : base("Sample.UnderlineEffect")
        {
        }
    }
}

XAML

そして、XAMLでLabelにEffectを追加します。

<Label Text="{Binding Title}"><Label.Effects><local:UnderlineEffect /></Label.Effects></Label>

実行

Androidしか実行環境持ってないのでiOS試せてないのですが、Androidでは以下のように下線が引かれました。

f:id:okazuki:20161205233948p:plain

まとめ

Effect初めて触ってみたけど簡単お手軽な感じですね。いいかも。


Viewing all articles
Browse latest Browse all 1387

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>