【Xamarin】【book】「Xamarin エキスパート養成読本」の学習記録(6) [特集3 - 第3章]

下記の「Xamarin エキスパート養成読本」を使った学習記録のページです。
Xamarinエキスパート養成読本 (Software Design plus)
 
本学習記録のトップはこちら
 

 

環境

「Xamarin エキスパート養成読本」は Visual Studio 2015 で記載されているため、私が使用した Visual Studio 2017 とは若干操作手順が異なる。

  • Windows 10
  • Visual Studio 2017

 

概要

部品コントロールの使用例
 

ビジー状態を表す ActivityIndicator の使用例

 

プロジェクト作成

f:id:dnkrnka:20181117203345p:plain
 

使用例

f:id:dnkrnka:20181117203250p:plain:w250 f:id:dnkrnka:20181117203315p:plain:w250

 

実装

変更したページは MainPage.xaml のみ。

MainPage.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:ActIndiSample"
             x:Class="ActIndiSample.MainPage">

  <ActivityIndicator IsRunning="true" Color="Lime"/>

</ContentPage>

 

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace ActIndiSample
{
  public partial class MainPage : ContentPage
  {
    public MainPage()
    {
      InitializeComponent();

      // ActivityIndicator の作成
      var activityIndicator = new ActivityIndicator
      {
        // リングの色を Lime にする
        Color = Color.Lime,
        // リングを表示する
        IsRunning = true,
        // ContentPage の中央に表示する
        VerticalOptions = LayoutOptions.CenterAndExpand
      };

      // 作成した ActivityIndicator の配置
      Content = activityIndicator;
    }
  }
}

 
 

矩形を描画する BoxView の使用例

 

プロジェクト作成

f:id:dnkrnka:20181117204625p:plain
 

使用例

f:id:dnkrnka:20181117204555p:plain:w250
 

実装

変更したページは MainPage.xaml のみ。

MainPage.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:BoxViewSample"
             x:Class="BoxViewSample.MainPage">

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

</ContentPage>

 
 

日付を選択する DatePicker の使用例

時刻の表示書式は MainPage.xaml で定義している。
MainPage.xaml.cs では現在時刻を取得するのみである。

 

使用例

起動時 時刻クリック時
f:id:dnkrnka:20181117210141p:plain:w250 f:id:dnkrnka:20181117210214p:plain:w250

 

実装

MainPage.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:DatePickerSample"
             x:Class="DatePickerSample.MainPage">

  <Grid>
    <DatePicker x:Name="dtpDate" Format="yyyy/MM/dd" />
  </Grid>

</ContentPage>

 

MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace DatePickerSample
{
  public partial class MainPage : ContentPage
  {
    public MainPage()
    {
      InitializeComponent();

      dtpDate.DateSelected += ( sender, e ) =>
      {
        string strDate = string.Empty;
        strDate = dtpDate.Date.ToString();
      };
    }
  }
}

 
 

複数行のテキストを入力する Editor の使用例

使用例

起動時 入力時
f:id:dnkrnka:20181117211748p:plain:w250 f:id:dnkrnka:20181117211704p:plain:w250

 

実装

変更したページは MainPage.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:TextInput"
             x:Class="TextInput.MainPage">

    <StackLayout Orientation="Vertical" Padding="10,30,10,10">
    <Editor x:Name="editor" HeightRequest="150" BackgroundColor="Aqua"/>
    <Label BindingContext="{x:Reference editor}" Text="{Binding Text}"/>
  </StackLayout>

</ContentPage>

 
 

単一行のテキストを入力する Entry の使用例

詳細は、こちらを参照。