kamulog

xamarin.formsのネタなど

Xamarin.Formsで任意のViewにBorderを追加するEffect

Effects Xamarin.Forms

かなり今更なEffectですが、あると便利なのでAiForms.Effectsに追加しました。

リポジトリ

github.com

Nuget

www.nuget.org

Install-Package AiForms.Effects

nuget経由で使う場合はiOSのAppDelegate.csの
global::Xamarin.Forms.Forms.Init(); の後に
AiForms.Effects.iOS.Effects.Init();
の記述が必要です。

概要

任意のViewに対してBorderを追加します。
Width、Color、Radiusを設定できます。

パラメータ

  • On
    • EffectのOn・Off (trueでOn)
  • Width
    • Borderの幅（デフォルト 0）
  • Color
    • Borderの色（デフォルト transparent）
  • Radius
    • Borderの角丸（デフォルト 0）

Xamlの書き方例

<ContentPage 
    xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
    xmlns:ef="clr-namespace:AiForms.Effects;assembly=AiForms.Effects"
    x:Class="AiEffects.TestApp.Views.BorderPage">
    <StackLayout Margin="4" 
        ef:Border.Width="2" ef:Border.Radius="6" ef:Border.Color="Red">
        <Label Text="hoge" />
        <Label Text="fuga" />
    </StackLayout>
</ContentPage>

特殊な動きと制限事項

iOSのEntry、Picker,DatePicker,TimePickerはもともとの枠線が存在するのでWidthを0にするとその枠線を消せるようにしています。

AndroidのEntry、Picker,DatePicker,TimePickerは入力欄の下線がこのEffectを適用することで消えます。これはBorderを実現するためにBackgroundを入れ替えているためです。

AndroidのButtonはこのEffectを適用すると表示がおかしくなります。これもBackground入れ替えの副作用です。Buttonの枠線のカスタマイズにはToFlatButtonの方を使ってください。

AndroidのWebView,Frame,ScrollViewでは動作しません。

AndroidのListView,TableViewではborderから背景がはみ出てしまいます。

AddCommandのRippleとの併用は出来ないと思います。試してませんがどちらもBackground入れ替えを行うため、実行順によって正しく動作しなくなると思われます。

デモ

おわりに

基本的にLayoutに適用するのが良いと思います。 通常のコントロールに適用すると微妙な感じになることが多いです。