コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
Xamarinでラインを配置する方法 | Xamarin.Forms
- 2016/11/04
- 18:05
Xamarin.Forms の Xaml にてライン（線）のコントロールオブジェクトを配置する方法をご紹介します。
尚、Xamarin.Formsにはラインコントロールがありませんので、 BoxView で代用します。
表示結果
Android5
iOS10
※ラインの色は Color.Gray で表示してあります。
前提条件
・Windows10
・Visual Studio 2015 Community Update3
・Xamarin 4.2.0.719 (NuGet Xamarin.Forms 2.3.2.127)
・macOS Sierra 10.12.1 / Xcode8.1 / Xamarin.iOS 10.2.0.4
１．Xaml にて BoxView を配置する。
Xaml<BoxView x:Name="line1" />
２．C# にてプロパティを設定する。
C# ページのコンストラクタに記述します。public SamplePage() : ContentPage
{
InitializeComponent();
line1.HeightRequest = 1;
line1.WidthRequest = 100;
switch (Device.OS)
{
case TargetPlatform.iOS:
line1.BackgroundColor = Color.Black;
break;
case TargetPlatform.Android:
line1.BackgroundColor = Color.White;
break;
default:
line1.BackgroundColor = Color.White;
break;
}
}
上記は水平ラインです。垂直ラインの場合は、HeightRequest と WidthRequest の値を入れ替えます。
以上でLineコントロールのようなオブジェクトを配置可能ですが、もっと簡単にできる方法が以下の方法となります。
３．派生クラスを作成する方法
または、次のようにBoxViewを継承したコントロールを作成して、プロパティ等を予め設定してしまう方法の方が簡単ですね。BaseLine.cs
using Xamarin.Forms;
namespace AppName.Controls
{
[System.Diagnostics.DebuggerStepThrough()]
public class BaseLine : BoxView
{
public BaseLine() : base()
{
this.HeightRequest = 1;
this.WidthRequest = 100;
this.BackgroundColor = Color.Gray;
this.Margin = new Thickness(0, 10, 0, 10);
}
public Color LineColor {
get { return this.BackgroundColor; }
set { this.BackgroundColor = value; }
}
}
}
使用方法は１行のみで簡単です。
TestPage.xaml
<ContentPage xmlns:base="clr-namespace:AppName.Controls;assembly=AppName">
<base:BaseLine x:Name="line1" />
</ContentPage>
VB.NET で行っていた代替方法と同様ですね。
Lineオブジェクトぐらい標準で提供してもらいたいものです。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html
- 関連記事
