[Xamarin][CrossPlatform][Control] Button

今回はButtonコントロールの使用方法について見ていきます。

Buttonコントロールの表面に表示するテキストはTextプロパティで、テキストの色はTextColorプロパティで設定をします。

また、枠線の色はBorderColorで、四隅の角はBorderRadiusに値を指定して丸くすることができます。枠線の幅はBorderWidthプロパティで指定します。

<StackLayout Padding="10,30,10,10">
   <Button x:Name="button"
           Text="Clicke Me!" 
           TextColor="Purple" 
           BorderColor="Green" 
           BorderRadius="5" 
           BorderWidth="3" 
           Grid.Row="0"/>
</StackLayout>

続いてClickイベントを見ていきましょう。

以下はMainPage.xamlのコンストラクタ内でClickイベントを作成する例です。

この例ではClickedイベントが発生したときにDisplayAlertアラートダイアログを表示します。DisplayAlertメソッドの第1引数にはタイトルを、第2引数にはメッセージを、第3引数にはキャンセルボタン(ダイアログを閉じるためのボタン)のテキストを指定します。

public MainPage()
{
    InitializeComponent();

    button.Clicked += (sender, e) => { 
        DisplayAlert("タイトル", "メッセージ", "キャンセル");
    };
}

以下に実行例を示します。

Buttonの使用例

DisplayAlertの使用例

 

[Xamarin][CrossPlatform][Control] BoxView

BoxViewは画面上に長方形を描画するためのコントロールです。

使用方法は簡単で、塗りつぶしの色をColorプロパティで、幅をWidthRequestsプロパティで、高さをHeigthRequestsプロパティで指定します。

以下にBoxViewの使用例を示します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:BoxViewSample"
             x:Class="BoxViewSample.MainPage">

  <BoxView Color="Blue" 
           WidthRequest="100" 
           HeightRequest="200"
           VerticalOptions="Center"
           HorizontalOptions="Center" />

</ContentPage>

BoxViewの例

[Xamarin][CrossPlatform][Control] ActivityIndicator

ActivityIndicatorを使用すると、アプリがビジー状態であることを示すことができます。

表示されるインジケーターはプラットフォーム毎に異なり、iOSとAndroidの場合はリング型で、UWPの場合はドットがよ横方向に流れるアニメーションが表示されます。

IsRunningプロパティにtrueを設定することでアニメーションが開始されます。IsVisibleプロパティ(bool型)を設定することで表示と非表示を切り替えることができます。普段は非表示にしておき、必要に応じて表示するようにするとよいでしょう。

以下にトグルスイッチがONの状態のときにActivityIndicatorを表示する例を示します。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ActivityIndicator"
             x:Class="ActivityIndicator.MainPage">

  <StackLayout Margin="10,30,10,10">
    <Switch x:Name="switchIndicator" IsToggled="False" />
    <ActivityIndicator x:Name="indicator" Color="Purple" IsRunning="False" IsVisible="false"/>
  </StackLayout>

</ContentPage>
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        switchIndicator.Toggled += (sender, e) =>
        {
            indicator.IsRunning = true;
            indicator.IsVisible = switchIndicator.IsToggled;
        };
    }
}

ActivityIndicatorの例

[Xamarin][CrossPlatform][Control] Frame

Frameコントロールを使用すると、任意のコントロールに枠線を付けることができます。

iOSアプリでは標準では枠線が付かないため、Frameコントロールを使用することで輪郭をハッキリさせることができます。

使用方法は簡単で、枠線を付けたいコントロールをFrameコントロールの内側に配置するだけです。

また、outlineColorプロパティで枠線の色を、HasShadowプロパティで影を付けることができます。

以下の例では、ButtonとLabelをFrameコントロールの内側に配置して枠線を付けています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FrameSample"
             x:Class="FrameSample.MainPage">

  <StackLayout Margin="10,30,10,10">
    <Frame OutlineColor="Purple" HasShadow="True">
      <Button Text="Click Me"/>
    </Frame>

    <Frame OutlineColor="Maroon" HasShadow="True">
      <Label Text="Hello Xamarin!" />
    </Frame>
  </StackLayout>

</ContentPage>

Frameの使用例

[Xamarin][CrossPlatform][Control] ScrollView

ScrollViewコントロールを使用すると、画面からはみ出してしまうようなデザインでも、スクロールして表示することができます。

はみ出してしまいそうなデザインは<ScrollView>から</ScrollView>の内側に配置します。

また、ScrollToAsyncというメソッドを使用すると、任意の位置へスクロールさせることができます。

ScrollToAsyncのメソッドには以下のようなオーバーロードがあります。

書式1
scrollView.ScrollToAsync(スクロールさせたい位置にあるコントロール, スクロール先のコントロールの位置, アニメーションをするかどうか);

書式2
scrollView.ScrollToAsync(横方向のスクロール位置, 縦方向のスクロール位置, アニメーションをするかどうか)

以下にScrollViewの使用例を示します。

この例では縦方向に「ラベル」「ボックス」「ラベル」「ボックス」「ラベル」を配置しています。上部には3つのボタンが配置してあり、これらのボタンを押すことでコード内で指定した位置へスクロールをします。

<StackLayout Margin="10,30,10,10">
  
  <StackLayout Orientation="Horizontal">
    <Button x:Name="btnMoveMid" Text="Middleへ移動 "/>
    <Button x:Name="btnMove400" Text="400の位置へ移動 " />
    <Button x:Name="btnMoveBottom" Text="Bottomへ移動 " />
  </StackLayout>
  
  <ScrollView x:Name="scrollView">
    <StackLayout>
      <Label Text="Top" />

      <BoxView HeightRequest="600" 
        BackgroundColor="Blue" />
      
      <Label x:Name="lblMiddle" Text="Middle" />
               
      <BoxView HeightRequest="600" 
        BackgroundColor="Blue" />
      
      <Label x:Name="lblBottom" Text="Bottom" />
    </StackLayout>
  </ScrollView>

</StackLayout>
public MainPage()
{
 InitializeComponent();

 // [Middleへ移動]ボタンタップ時の処理
 btnMoveMid.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(lblMiddle,
 ScrollToPosition.Start, true);
 };
 // [400の位置へ移動]ボタンタップ時の処理
 btnMove400.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(0, 400, true);
 };
 // [Bottomへ移動]ボタンタップ時の処理
 btnMoveBottom.Clicked += (sender, e) =>
 {
 scrollView.ScrollToAsync(lblBottom,
 ScrollToPosition.Start, true);
 };
}

ScrollView