fc2ブログ

記事一覧

スライダーコントロールで整数の数値を入力する方法 | Xamarin.Forms


今回はXamarin.Formsで左右にスライドすることにより数値入力ができるコントロールについてご紹介いたします。
ただし、初期設定のままだと、小数点が表示され、かなり使い勝手が微妙でしたが、派生クラスを作成することにより、整数値を表示できるようになりました。


iOS10
xamarin_slider_01.png
Android7.0
xamarin_slider_02.png








前提条件
・Windows10 Pro 64Bit
・Visual Studio 2015 Community Update3
・Xamarin 4.7.9.45 (NuGet Xamarin.Forms 2.4.0.282)
・macOS Sierra 10.12.6 / Xcode 9 / Xamarin.iOS 11.0.0.0



1.PCLの記述

PCLプロジェクト内に整数値のみで入力ができるようになる派生スライダークラスを作成します。

BaseSlider.cs
using Xamarin.Forms;
namespace AppName.Controls
{
    [System.Diagnostics.DebuggerStepThrough()]
    public class BaseSlider : Slider
{
#region "コンストラクタ"

public BaseSlider() : base()
{
this.Initialize();
}
public BaseSlider(double min, double max, double val) : base(min, max, val)
{
this.Initialize();
}

/// <summary>
/// 共通初期化処理
/// </summary>
private void Initialize()
{
//画面の横幅いっぱいの場合に左右にスペースがあった方が操作がしやすい
//(※囲まれるStackLayoutに左右のスペースが10設定されている上で)
this.Margin = new Thickness(10, 5, 10, 5);

//値変更イベント
this.ValueChanged += (sender, e) =>
{
//整数値に切り捨てた値を保持する
_value = (int)this.Value;
//整数値が変更されたときのみ反映する
if ((int)e.NewValue != (int)e.OldValue)
{
base.Value = _value;
}
};
}
#endregion

#region "プロパティ"

private int _value = 0;

/// <summary>
/// 整数の値を取得する
/// </summary>
public int IntValue
{
get
{
return _value;
}
}
#endregion
}
}




2.使用方法

コントロールに対する設定はXAMLまたはC#で記述します。
最大値はMaximumプロパティに、最小値はMinimumプロパティに設定します。Valueも設定できますが、初期値とお考えください。

XAMLでは以下のように記述します。

TestPage.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:base="clr-namespace:AppName.Controls;assembly=AppName"
             x:Class="AppName.Views.TestPage">
  <ContentPage.Content>
<StackLayout VerticalOptions="FillAndExpand"
Orientation="Vertical">
<StackLayout.Padding>
<OnPlatform x:TypeArguments="Thickness"
iOS="10, 10, 10, 0"
Android="10, 10, 10, 0"
WinPhone="10, 10, 10, 0" />
</StackLayout.Padding>
    <Label x:Name="lblPrice" Text="" HorizontalOptions="End" />
<base:BaseSlider x:Name="sldPrice"
Value="0"
Maximum="9999"
Minimum="0"
HorizontalOptions="FillAndExpand" />
</StackLayout>
  </ContentPage.Content>
</ContentPage>


スライドさせた値を取得するにはValueChangedイベントを設定します。

TestPage.xaml.cs
using AppName.Controls;
using Xamarin.Forms;
namespace AppName.Views
{
public TestPage()
{
    this.sldPrice.ValueChanged += (sender, e) =>
{
this.lblPrice.Text = this.sldPrice.IntValue.ToString() + "円";
};
}
}






最後までお読みいただきありがとうございます。
当ブログの内容をまとめた Xamarin逆引きメニュー は以下のURLからご覧になれます。
https://itblog.dynaspo.com/blog-entry-81.html


関連記事

コメント

コメントの投稿

※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。

 入力されていないコメントには返信しませんのであらかじめご了承くださいませ。

※ニックネームでも良いので必ずご入力ください。

    

※必ずご入力ください。

    
    

※必ずご入力ください。

※技術的な質問には環境やエラーについて正確かつ詳細にお教えください。

・正確なエラーの内容

・Windowsのバージョン番号

・Visual Studioのバージョン

・機器の型番

・アプリやソフトのバージョン

    

カテゴリ別記事一覧

広告

プロフィール

石河 純


著者名 :石河 純
自己紹介:素人上がりのIT技術者。趣味は卓球・車・ボウリング

IT関連の知識はざっくりとこんな感じです。
【OS関連】
WindowsServer: 2012/2008R2/2003/2000/NT4
Windows: 10/8/7/XP/2000/me/NT4/98
Linux: CentOS RedHatLinux9
Mac: macOS Catalina 10.15 / Mojave 10.14 / High Sierra 10.13 / Sierra 10.12 / OSX Lion 10.7.5 / OSX Snow Leopard 10.6.8
【言語】
VB.net ASP.NET C#.net Java VBA
Xamarin.Forms
【データベース】
Oracle 10g/9i
SQLServer 2016/2008R2/2005/2000
SQLAnywhere 16/11/8
【BI/レポートツール】
Cognos ReportNet (IBM)
Microsoft PowerBI
ActiveReport (GrapeCity)
CrystalReport
【OCX関連】
GrapeCity InputMan SPREAD MultiRow GridView
【ネットワーク関連】
CCNP シスコ技術者認定
Cisco Catalyst シリーズ
Yamaha RTXシリーズ
FireWall関連
【WEB関連】
SEO SEM CSS jQuery IIS6/7 apache2

休みの日は卓球をやっています。
現在、卓球用品通販ショップは休業中です。