はじめに
Xamarin.Formsでのスライダー操作方法についてまとめます。
スライダーは、ユーザーからの数値入力インターフェースのひとつで、スライダーの位置によって数値を設定する方法です。
ここでは、XAMLでスライダーを作成して、設定値をC#プログラムで受け取り、それを表示する方法について記載します。
XAML スライダーの作成
XAMLでのスライダーは、<Sliderから始まり、/>で終わるタグで作成します。
<Slider x:Name="slider1"
Minimum = "0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>x:Nameは、このスライダーオブジェクトの名前になります。この名前を使ってC#側のプログラムでスライダーの操作を行います。
Minimumは、スライダーの取りうる最小値の設定で、Maximumは、スライダーの取りうる最大値の設定です。ここでは、０から２５５までを設定しています。このプロパティ値は、double型なので、小数点数での設定も可能です。
MinimumTrackColor、MaximumTrackColorは、スライダーのトラック部分の色を設定します。それぞれ最小値側、最大値側を設定します。最小値側を青色にしてみるとスライダー設定位置から左側が青色になることがわかります。
ValueChangedは、スライダーの値が変更されたときに発生するイベントになります。ここでは、OnSliderValueChangedというイベント名を登録しています。
このイベント名をC＃プログラムに記述してイベントを実装することで、スライダーが動かされた時の動作を作成できます。
その他に、スライダーの色の設定もできます。
スライダー色の設定は、ThumbColorプロパティで行います。
ThumbColorをGoldに設定してみると、スライダーのマル部分がゴールド色に変わります。
ValueChangedイベント
ValueChangedは、スライダー値が変更されたときに発生するイベントになります。
<Slider ValueChanged="OnSliderValueChanged"/>ここでは、OnSliderValueChangedという名前を設定しているので、C#プログラムで次のような記述をして、イベント処理を行います。
void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
{
if (sender == slider1)
{
Item.Pmeter[0] = (Int16)slider1.Value;
Item.Star[0] = (Int16)(Item.Pmeter[0] * 10 / 255);
slider1Label.Text = String.Format("{0:D}", Item.Star[0]*10);
boxView1.Color = Color.FromRgb((int)slider1.Value, 0, 0);
}
else if (sender == slider2)
{
Item.Pmeter[1] = (Int16)slider2.Value;
Item.Star[1] = (Int16)(Item.Pmeter[1] * 10 / 255);
slider2Label.Text = String.Format("{0:D}", Item.Star[1] * 10);
boxView2.Color = Color.FromRgb((int)slider2.Value, 0, 0);
}
else if (sender == slider3)
{
Item.Pmeter[2] = (Int16)slider3.Value;
Item.Star[2] = (Int16)(Item.Pmeter[2] * 10 / 255);
slider3Label.Text = String.Format("{0:D}", Item.Star[2] * 10);
boxView3.Color = Color.FromRgb((int)slider3.Value, 0, 0);
}
else if (sender == slider4)
{
Item.Pmeter[3] = (Int16)slider4.Value;
Item.Star[3] = (Int16)(Item.Pmeter[3] * 10 / 255);
slider4Label.Text = String.Format("{0:D}", Item.Star[3] * 10);
boxView4.Color = Color.FromRgb((int)slider4.Value, 0, 0);
}
else if (sender == slider5)
{
Item.Pmeter[4] = (Int16)slider5.Value;
Item.Star[4] = (Int16)(Item.Pmeter[4] * 10 / 255);
slider5Label.Text = String.Format("{0:D}", Item.Star[4] * 10);
boxView5.Color = Color.FromRgb((int)slider5.Value, 0, 0);
}
else if (sender == slider6)
{
Item.Pmeter[5] = (Int16)slider6.Value;
Item.Star[5] = (Int16)(Item.Pmeter[5] * 10 / 255);
slider6Label.Text = String.Format("{0:D}", Item.Star[5] * 10);
boxView6.Color = Color.FromRgb((int)slider6.Value, 0, 0);
}
else if (sender == slider7)
{
Item.Pmeter[6] = (Int16)slider7.Value;
Item.Star[6] = (Int16)(Item.Pmeter[6] * 10 / 255);
slider7Label.Text = String.Format("{0:D}", Item.Star[6] * 10);
boxView7.Color = Color.FromRgb((int)slider7.Value, 0, 0);
}
else if (sender == slider8)
{
Item.Pmeter[7] = (Int16)slider8.Value;
Item.Star[7] = (Int16)(Item.Pmeter[7] * 10 / 255);
slider8Label.Text = String.Format("{0:D}", Item.Star[7] * 10);
boxView8.Color = Color.FromRgb((int)slider8.Value, 0, 0);
}
else if (sender == slider9)
{
Item.Pmeter[8] = (Int16)slider9.Value;
Item.Star[8] = (Int16)(Item.Pmeter[8] * 10 / 255);
slider9Label.Text = String.Format("{0:D}", Item.Star[8] * 10);
boxView9.Color = Color.FromRgb((int)slider9.Value, 0, 0);
}
else if (sender == slider10)
{
Item.Pmeter[9] = (Int16)slider10.Value;
Item.Star[9] = (Int16)(Item.Pmeter[9] * 10 / 255);
slider10Label.Text = String.Format("{0:D}", Item.Star[9] * 10);
boxView10.Color = Color.FromRgb((int)slider10.Value, 0, 0);
}
else
{
//処理なし
}
}
この例では、１０個のスライダーがすべて同じイベント名で登録されています。
同一イベントで、登録した場合、どのスライダーからの呼び出しかは、イベント処理メソッドの第一引数で判断します。
第一引数には、XAMLファイル側で記述したスライダーのx:Nameの値が入ります。この名前を条件判断することで、どのスライダーの変更があったかがわかります。
スライダー値は、Valueプロパティに記憶されています。
例えば、slider1の値は、slider1.Valueに入っているとなります。
この例では、各スライダー値を０~１０の値に変換して、ラベル表示し、boxViewを使って値を色に変換しています。
XAMLのスライダーの記述は、次のようにしています。
<Label Text="ポジティブメーター" FontSize="Medium" />
<ScrollView>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
<RowDefinition Height="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="0.8*" />
<ColumnDefinition Width="0.8*" />
<ColumnDefinition Width="3.5*" />
</Grid.ColumnDefinitions>
<!-- スライダー1 -->
<Label Grid.Row="0" Grid.Column="0"
Text="楽しい"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="0" Grid.Column="1"
x:Name="boxView1"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="0" Grid.Column="2"
x:Name="slider1Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="0" Grid.Column="3"
x:Name="slider1"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー2 -->
<Label Grid.Row="1" Grid.Column="0"
Text="おいしい"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="1" Grid.Column="1"
x:Name="boxView2"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="1" Grid.Column="2"
x:Name="slider2Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="1" Grid.Column="3"
x:Name="slider2"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー3 -->
<Label Grid.Row="2" Grid.Column="0"
Text="心地いい"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="2" Grid.Column="1"
x:Name="boxView3"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="2" Grid.Column="2"
x:Name="slider3Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="2" Grid.Column="3"
x:Name="slider3"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー4 -->
<Label Grid.Row="3" Grid.Column="0"
Text="達成感"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="3" Grid.Column="1"
x:Name="boxView4"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="3" Grid.Column="2"
x:Name="slider4Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="3" Grid.Column="3"
x:Name="slider4"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー5 -->
<Label Grid.Row="4" Grid.Column="0"
Text="満足感"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="4" Grid.Column="1"
x:Name="boxView5"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="4" Grid.Column="2"
x:Name="slider5Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="4" Grid.Column="3"
x:Name="slider5"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー6 -->
<Label Grid.Row="5" Grid.Column="0"
Text="ハッピー"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="5" Grid.Column="1"
x:Name="boxView6"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="5" Grid.Column="2"
x:Name="slider6Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="5" Grid.Column="3"
x:Name="slider6"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー7 -->
<Label Grid.Row="6" Grid.Column="0"
Text="ラッキー"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="6" Grid.Column="1"
x:Name="boxView7"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="6" Grid.Column="2"
x:Name="slider7Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="6" Grid.Column="3"
x:Name="slider7"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー8 -->
<Label Grid.Row="7" Grid.Column="0"
Text="きれい"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="7" Grid.Column="1"
x:Name="boxView8"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="7" Grid.Column="2"
x:Name="slider8Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="7" Grid.Column="3"
x:Name="slider8"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー9 -->
<Label Grid.Row="8" Grid.Column="0"
Text="うまくいった"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="8" Grid.Column="1"
x:Name="boxView9"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="8" Grid.Column="2"
x:Name="slider9Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="8" Grid.Column="3"
x:Name="slider9"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
<!-- スライダー10 -->
<Label Grid.Row="9" Grid.Column="0"
Text="気づいた"
VerticalOptions="Center"
FontSize="Medium"/>
<BoxView Grid.Row="9" Grid.Column="1"
x:Name="boxView10"
VerticalOptions="Center"
Color="Black"/>
<Label Grid.Row="9" Grid.Column="2"
x:Name="slider10Label"
Text="00"
VerticalOptions="Center"
FontSize="Medium"/>
<Slider Grid.Row="9" Grid.Column="3"
x:Name="slider10"
VerticalOptions="Center"
Minimum="0"
Maximum="255"
MinimumTrackColor="DimGray"
MaximumTrackColor="DimGray"
ValueChanged="OnSliderValueChanged"/>
</Grid>
</ScrollView>このプログラムに対して、実際に動作させてみるとこのようになります。
スライダーに合わせてスライダー左の数値が１０刻みで変わります。
それと同時に数値横のボックスの色が０で黒色、１００で赤色と数値に応じて徐々に変化していきます。
まとめ
ここでは、スライダーを使って入力数値をC#プログラムで受け取り、その値を表示する方法についてみてきました。
XAMLでValueChangedイベントを登録して、C#プログラムでそのイベント処理を記述することにより、スライダーの値を使った動作ができました。
複数のスライダーでもイベントを一本化して、発生したイベント内でどのスライダーからのものかを判断することができるので、イベント処理のメソッド数を削減することができます。
コメント