Xamarin Forms スライダー操作

xamarin

はじめに

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は、スライダーの取りうる最大値の設定です。ここでは、0から255までを設定しています。このプロパティ値は、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
            {
                //処理なし
            }
        }
 

この例では、10個のスライダーがすべて同じイベント名で登録されています。

同一イベントで、登録した場合、どのスライダーからの呼び出しかは、イベント処理メソッドの第一引数で判断します。

第一引数には、XAMLファイル側で記述したスライダーのx:Nameの値が入ります。この名前を条件判断することで、どのスライダーの変更があったかがわかります。

スライダー値は、Valueプロパティに記憶されています。

例えば、slider1の値は、slider1.Valueに入っているとなります。

この例では、各スライダー値を0~10の値に変換して、ラベル表示し、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>

このプログラムに対して、実際に動作させてみるとこのようになります。

スライダーに合わせてスライダー左の数値が10刻みで変わります。

それと同時に数値横のボックスの色が0で黒色、100で赤色と数値に応じて徐々に変化していきます。

まとめ

ここでは、スライダーを使って入力数値をC#プログラムで受け取り、その値を表示する方法についてみてきました。

XAMLでValueChangedイベントを登録して、C#プログラムでそのイベント処理を記述することにより、スライダーの値を使った動作ができました。

複数のスライダーでもイベントを一本化して、発生したイベント内でどのスライダーからのものかを判断することができるので、イベント処理のメソッド数を削減することができます。

コメント

タイトルとURLをコピーしました