[Xamarin][CrossPlatform][Control] Switch

Switchコントロールは、文字通りスイッチを表現するためのコントロールです。

使用方法は簡単です。

スイッチの状態を変更するにはIsToggledプロパティを使用し、スイッチをONにするにはTrueを、スイッチをOFFにするにはFalseを設定します。

以下は、SwitchとLabelコントロールを1つずつ配置し、スイッチの状態をLabelに表示する例です。

<StackLayout>
  
  <Switch x:Name="mySwitch" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"
			IsToggled="true" />
  
  <Label x:Name="lblStatus" FontSize="Large"
			HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"
			Text="スイッチ ON" />

</StackLayout>

Switchの状態が変更されるとToggledイベントが発生します。このイベントを利用して、スイッチの状態を確認してLabelに表示するコード例を以下に示します。

public MainPage()
{
    InitializeComponent();

    mySwitch.Toggled += (sender, e) =>
    {
        lblStatus.Text = "スイッチ " + (mySwitch.IsToggled ? "ON" : "OFF");
    };
}

実行例は以下の通りです。

 

 

 

[Xamarin][CrossPlatform][Control] Slider

Sliderを使用すると、つまみを操作して値を変化させるバーを使用することができます。

Sliderの可変範囲の最小値はMinimumで、最大値はMaximumで設定します。現在値に取得と設定はValueプロパティを使用します。

以下は可変範囲を0~100とし、現在値を50に設定したSliderを表示する例です。

<StackLayout Margin="10,30,10,10">
  <Slider x:Name="slider"
    Minimum="0" Maximum="100" Value="50" />
</StackLayout>

つまみで現在を変化させた場合はValueChangedイベントが発生します。

以下に、現在値の値をLabelに表示する例を示します。

public MainPage()
{
    InitializeComponent();

    slider.ValueChanged += (sender, e) =>
    {
        lblValue.Text = slider.Value.ToString();
    };
}

 

 

[Xamarin][CrossPlatform][Control] SearchBar

SerchBarコントロールを使用すると、検索窓を設置することができます。ただし、検索のロジックについては自分で作成する必要があります。

はじめに画面にSearchBarを設置しましょう。

SearchBarにプレースホルダーを設定したい場合はPlaceHolderプロパティを使用します。またCancelボタンの色はCancelButtonColorで設定をします。

<StackLayout Margin="10,30,10,10" >
  <SearchBar x:Name="searchBar"
    Placeholder="検索するテキストを入力して下さい"
    CancelButtonColor="Fuchsia" />
  <Label Text="検索結果:" FontSize="Small" FontAttributes="Bold"/>
  <Label x:Name="lblResult" />
</StackLayout>

次に検索時のイベントについてみていきましょう。検索ボタンが押されるとSearchButtonPressedイベントが発生します。検索のロジックはこの中に記述します。以下の例では検索ボタンが押されたときにLabelに「検索が完了しました」を表示します。

public MainPage()
{
    InitializeComponent();

    searchBar.SearchButtonPressed += (sender, e) => {
        // ここに検索ロジックを記述
        lblResult.Text = "検索が完了しました";
    };
}