投稿日:

[Xamarin.Forms] Sliderを使用するには？

はじめに

Sliderはつまみをスライドさせて、数値入力をするためのコントロールです。

今回は、このSliderについて説明します。

主要なプロパティ

Sliderにおける主要なプロパティには以下のものがあります。

プロパティ 説明
Value 現在値
Minimum 選択可能な最小値
Maximum 選択可能な最大値

XamlによるSliderの設定

以下はXamlにおけるSliderの使用例です。この例ではMinimumに-100、Maximumに100、Valueに10を設定しています。

よって可動範囲は-100〜100までの間となり、起動時の値は10を示します。

<?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:sliderSample01" 
    x:Class="sliderSample01.MainPage">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        
       <Slider Value="10" Minimum="-100" Maximum="100" WidthRequest="300" />
    
    </StackLayout>
</ContentPage>

コードビハインドでの実装例

コードビハインドでは以下のように実装します。

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

            this.slider.Minimum = -100;
            this.slider.Maximum = 100;
            this.slider.Value = 10;
        }
    }
}

実行例

実行をすると、以下のように12:34:56が選択された状態で表示されます。

 

投稿日:

[Xamarin.Forms] TimePickerで選択された時刻を取得するには

はじめに

今回は、TimePickerで選択された時刻を取得する方法について説明します。

コード例

画面にはTimePikcer, Button, Labelを1つずつ配置し、Buttonがタップされたときに、現在選択されている時刻を取得してLabelに表示するものとします。

画面のデザインはXamlで行い以下のようにします。

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

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

            button.Clicked += (sender, e) =>
            {
                this.label.Text = timePicker.Time.ToString();
            };
        }
    }
}

続いてコードビハインドにButtonがタップされた時の処理を作成します。

選択された時刻はTimeプロパティで参照できますが、TimeSpan型ですのでstring型に変換してLabelに表示しています。

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

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

            button.Clicked += (sender, e) =>
            {
                this.label.Text = timePicker.Time.ToString();
            };
        }
    }
}

実行例

 

投稿日:

[Xamarin.Forms] TimePickerに任意の時刻を表示するには

はじめに

TimePicker は時刻の表示や選択をするためのコントロールです。

任意の時刻を表示するには Timeプロパティを使用します。

Xamlによる時刻の表示

以下はXamlにおけるTimeプロパティの使用例です。この例では、12:34:56を表示します。

<?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:timePickerSample01" 
    x:Class="timePickerSample01.MainPage">
    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <!-- Place new controls here -->
        <TimePicker Time="12:34:56" />
    </StackLayout>
</ContentPage>

コードビハインドでの実装例

コードビハインドでは以下のように実装します。

既定の書式は「HH:mm」ですので、秒まで表示したい場合は Formatプロパティに「HH:mm:ss」を指定します。

また、時刻はTimeSpan型ですので、18行目のようにして表示したい時刻を作成します。ここでは12:34:56を作成しています。

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

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

            TimeSpan ts = new TimeSpan(12, 34, 56);

            this.timePicker.Format = "HH:mm:ss";
            this.timePicker.Time = ts;
        }
    }
}

実行例

実行をすると、以下のように12:34:56が選択された状態で表示されます。