[Xamarin][CrossPlatform][Control] Stepper

Stepperコントロールは[+]と[-]のボタンが1つずつ付いているコントロールで、タップする毎に値を増減させることができます。

変更可能な値の範囲はMinimumプロパティとMaximumプロパティで設定します。

また、1回のタップによる値の増減値幅はIncrementプロパティで設定し、現在値の取得と設定はValueプロパティを使用します。

以下は、StepperとLabelボタンを1つずつ配置して、Stepperがタップされる毎に現在値を表示する例です。

最小値を-10、最大値を10に設定しています。

<StackLayout Margin="10,30,10,10"> 
  <Stepper x:Name="stepperRed"
    Minimum="-10" Maximum="10"
    Increment="1" Value="0" />

  <Label x:Name="label" Text="" />
</StackLayout>

Stepperは値が変化すると、ValueChangedイベントが発生します。

以下はValueChangedイベントが発生したときに、Labelに値を表示する例です。

public MainPage()
{
    InitializeComponent();

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

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

[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");
    };
}

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

 

 

 

[Visual Studio for Mac] 画面にコントロールを配置する

前回は新規でプロジェクトを作成したので、今回はコントロールを配置して実行をしてみたいと思います。

はじめに、ソリューションエクスプローラーでXAMLファイルをダブルクリックして開きます。プロジェクト名.xaml というファイルがメイン画面のファイルです。

ファイルを開くと、左側にはXAMLコードが、右側にはそのプレビュー画面が表示されます。XAMLコードを編集するとプレビュー画面に反映されるので、自分が記述したXAMLがどのような見え方をするのかを、確認しながらデザインをすることができます。

またプレビュー画面の上にあるDevicesでPhoneを選ぶと携帯用、Tabletを選択するとタブレット用のプレビュー画面になります。また、PlatformでiOSやAndroidデバイスに切り替えてプレビューをみることができるので、それぞれのプラットフォームでどのように見えるかを確認することができます。このあたりはXamarin Studioを使用していた方にとっては、操作方法は変わらないため違和感なく使用可能でしょう。

とりあえず、なにも変更せずにiOSアプリとして実行をしてみましょう。

IDEの上にある右向きの▲ボタンをクリックすると、シミュレータが起動して作成したアプリの動作を確認することができます。

このとき、プロジェクト名.iOSを選択して実行するとiOSのエミュレーターが、プロジェクト名.Androidを選択するとAndoroidのエミュレーターを起動することができます。

また、iOSでもAndroidでも、起動するエミュレーターは変更することができるので、様々なデバイスを想定して動作確認をすることができます。

iOSのエミュレーターを起動すると以下のようになります。

続いて、XAMLの編集方法を確認していきましょう。

メイン画面のXAMLファイルは以下のようになっています。

<?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:MyFirstApp" x:Class="MyFirstApp.MyFirstAppPage">
	<Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

初期のXAMLは<Label>が1つ配置されていて、テキストに「Welcolme to Xamarin Forms!」が表示されるようになっています。

本サイトでは、これまでにXamarin.Formsで使用可能なコントロールを紹介してきていますので、それらを参考にして画面をデザインしてください。

今回は、StackLayoutを配置して、LabelとButtonを以下のように配置してみます。

<?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:MyFirstApp" x:Class="MyFirstApp.MyFirstAppPage">
	<StackLayout Margin="10,30,10,10">
		<Label x:Name="lblText" Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
		<Button x:Name="button" Text="Click Me!" />
	</StackLayout>

</ContentPage>

XAMLを編集すると、リアルタイムでプレビュー画面が変更されていくことがわかります。

こうしてVisual Studio for Macを使用してみると、Xamarin Studioと同様であることがわかります。

WindowsのVisual StudioでもXamarin.Formsのプロジェクトを作成可能ですが、さくさく感があるのはMac版のVisual Studioです。

もし、Winodwsをターゲットにしないのであれば、Visual Studio for Macを使用して開発するのが良いかもしれません。

[Visual Studio for Mac] 新規プロジェクトを作成する

Visual Studio for Macが発表されて、だいぶ時間が経ちました。

しかし、まだ正規版ではないためまだ更新が行われることと思います。

Visual Studio for Macはなんぞやというと、今後 Xamarin Studioに取って代わる製品のことです。

残念ながら Windows アプリの開発はできないのですが、WinodwsユーザーでVisual Studioを使用していた方にとっては、MacにもVisual Studioがやってきたということでワクワクすること間違いナシの製品です。

今回、Preview版を入れてみたので、早速使ってみることとします。

まず、Visual Studio for Macを起動してみます。デザインは以下の通りです。

Visual Studioのアイコンイメージもあって格好良い外観です。

参考までに、現行のXamarin Studioは以下の通りです。これはこれで、格好が良いです。

再び Visual Studio for Macに戻って新規プロジェクトの作成をしてみます。

IDE上にある[New Project]ボタンをクリックするか、メニューの[ファイル]-[新しいソリューション]を選択すると、以下のように「新しいプロジェクト」のダイアログが表示されます。

※[ファイル]-[新しいソリューション]を選択するのに、ダイアログタイトルが「新しいプロジェクト」というのは違和感があります。

作成可能なアプリは、Xamarin.Forms, iOSアプリ、Androidアプリ、Mac用アプリなどがあります。

Windows版Visual Studioの場合、Xamarin Formsを使用すると、UWP、iOS, Androidアプリを作ることができますが、残念ながらMac版ではUWPアプリを作成することはできません。

今回はXamarin.Formsの「Forms App」を選択してみます。

App Nameには作成するアプリタイトルを、Organization Identifierには任意のユニークな名前(通常は、自身の持つURLを逆順で記述したもの)を入力します。

Target Platformはどのデバイス用アプリを作成するかを選択します。iOSとAndroidの両方をターゲットにする場合は、両方チェックします。

Shared Codeは今回はデフォルトのままとしました。

「Use Xaml for user interface files」は、画面デザインをXamlで行う場合にチェックをします。

入力が完了したら、右下の[次へ]ボタンをクリックします。続いて新しいプロジェクトの構成画面が表示されますが、ここではデフォルトのままで[作成]ボタンをクリックしました。

しばらくすると、IDEは以下のようになります。

右側にはソリューションエクスプローラーが、左側にはツールボックスが表示されます。

次回、XAMLを使用して、画面のデザインを行ってみたいと思います。

 

 

 

 

[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();
    };
}