Xamarin.Forms Kaydırıcı

  • Makale
  • Okumak için 9 dakika

Örneği İndir Örneği indirme

Bir dizi sürekli değerden seçim için Kaydırıcı kullanın.

Xamarin.FormsSlider , kullanıcı tarafından sürekli aralıktan bir değer seçmek için yönlendirilen double yatay bir çubuktır.

türüne Slider sahip üç özelliği double tanımlar:

Üç özelliğin de nesneler tarafından BindableProperty desteklendir. özelliği varsayılan bağlama moduna sahiptir ve bu da ValueBindingMode.TwoWayValue mimarisini kullanan bir uygulamada bağlama kaynağı olarak uygun olduğu anlamına gelir.

Uyarı

dahili olarak, Slider küçük Minimum olduğunu Maximum sağlar. veya MinimumMaximum daha küçük olmayacak şekilde Minimum ayarlanırsa Maximum bir özel durum ortaya çıkar. ve özelliklerini ayarlama hakkında daha fazla bilgi için aşağıdaki Önlemler bölümüne bakın.

Slider, ve arasında Value (kapsayıcı) olması için özelliğini MinimumMaximum iter. özelliği Minimum özelliğinden büyük bir değere Value ayarlanırsa, Slider özelliği olarak ValueMinimum ayarlar. Benzer şekilde, Maximum değerinden küçük bir değere Value ayarlanırsa Slider özelliğini olarak ValueMaximum ayarlar.

Slider , kullanıcı işlemesi yoluyla veya program özelliği doğrudan ayarladığı zaman değişiklikler ValueChangedValue olduğunda bir olay SliderValue tanımlar. Özelliği ValueChanged önceki paragrafta açıklandığı Value gibi bir olay da uygulanır.

Olayı eşlik alan nesnenin iki özelliği ValueChangedEventArgsValueChangeddouble vardır: Xamarin_Forms ValueChangedEventArgs _ValueChangedEventArgs_OldValue" data-linktype="absolute-path">OldValue and Xamarin_Forms ValueChanged _ValueChangedEventArgs_NewValue" data-linktype="absolute-path">. NewValue Olay etkinken değeri NewValue nesnesinin Value özelliğiyle Slider aynıdır.

Slider ayrıca, DragStartedDragCompleted sürükleme eyleminin başında ve sonundaki ve olaylarını tanımlar. Olaydan ValueChanged farklı olarak, DragStarted ve olayları yalnızca kullanıcı tarafından yapılan DragCompleted işlemeler aracılığıyla işten Slider çıktı. Olay DragStarted çalıştırılıyorsa türünde olan DragStartedCommandICommand , yürütülür. Benzer şekilde, DragCompleted olay çalıştırılıyorsa DragCompletedCommand türünde ICommand olan , yürütülür.

Uyarı

, veya ile kısıtlanmamış yatay düzen CenterStart seçeneklerini End kullanma. Slider Hem Android hem de UWP'de sıfır uzunluktaki bir çıta daraltılmış ve Slider iOS'ta çubuk çok kısadır. varsayılan ayarını HorizontalOptions kullanın ve bir Fill düzende yer alan genişliğini AutoSliderGrid kullanmaz.

, Slider görünümünü etkileyen çeşitli özellikleri de tanımlar:

Not

ve ThumbColorThumbImageSource özellikleri birbirini dışlar. Her iki özellik de ThumbImageSource ayarlanırsa, özellik öncelikli olur.

Temel Kaydırıcı kodu ve işaretleme

SliderDemos örneği işlevsel olarak aynı olan ancak farklı şekillerde uygulanan üç sayfayla başlar. İlk sayfada yalnızca C# kodu, ikincisinde kodda bir olay işleyicisi ile XAML kullanılır ve üçüncüsü XAML dosyasındaki veri bağlamayı kullanarak olay işleyicisini önleyebilirsiniz.

Kodda Kaydırıcı oluşturma

SliderDemos örneğindekiTemel Kaydırıcı Kodu sayfası, kodda ve iki nesne oluşturmak için gösterir:

public class BasicSliderCodePage : ContentPage
{
    public BasicSliderCodePage()
    {
        Label rotationLabel = new Label
        {
            Text = "ROTATING TEXT",
            FontSize = Device.GetNamedSize(NamedSize.Large, typeof(Label)),
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        Label displayLabel = new Label
        {
            Text = "(uninitialized)",
            HorizontalOptions = LayoutOptions.Center,
            VerticalOptions = LayoutOptions.CenterAndExpand
        };

        Slider slider = new Slider
        {
            Maximum = 360
        };
        slider.ValueChanged += (sender, args) =>
        {
            rotationLabel.Rotation = slider.Value;
            displayLabel.Text = String.Format("The Slider value is {0}", args.NewValue);
        };

        Title = "Basic Slider Code";
        Padding = new Thickness(10, 0);
        Content = new StackLayout
        {
            Children =
            {
                rotationLabel,
                slider,
                displayLabel
            }
        };
    }
}

Slider, Maximum 360 özelliğine sahip olacak şekilde başlatılır. işleyicisi, birincinin özelliğini ayarlamak için nesnesinin özelliğini kullanır ve ikinci nesnesinin özelliğini ayarlamak için olay bağımsız değişkenlerinin ValueChangedSliderValuesliderRotationLabelString.FormatNewValueText özelliğiyle yöntemini Label kullanır. Geçerli değerini elde etmek için bu iki yaklaşım Slider birbirinin yerine kullanılabilir.

iOS ve Android cihazlarda çalışan program şu şekildedir:

Temel Kaydırıcı Kodu

İkincisi, Label işlemesi yapılana kadar "(uninitialized)" metnini görüntüler ve bu da ilk olayın Slider neden ValueChanged olmasına neden olur. Görüntülenen ondalık basamak sayısının her platform için farklı olduğunu fark vardır. Bu farklılıklar, platform uygulamalarıyla ilgilidir ve platform uygulama farklılıkları bölümünde bu Slider makalenin Slider

XAML'de Kaydırıcı Oluşturma

Temel Kaydırıcı XAML sayfası işlevsel olarak Temel Kaydırıcı Kodu ile aynıdır ancak çoğunlukla XAML'de uygulanır:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SliderDemos.BasicSliderXamlPage"
             Title="Basic Slider XAML"
             Padding="10, 0">
    <StackLayout>
        <Label x:Name="rotatingLabel"
               Text="ROTATING TEXT"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Slider Maximum="360"
                ValueChanged="OnSliderValueChanged" />

        <Label x:Name="displayLabel"
               Text="(uninitialized)"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Arka arkasındaki kod dosyası olayın işleyicisini ValueChanged içerir:

public partial class BasicSliderXamlPage : ContentPage
{
    public BasicSliderXamlPage()
    {
        InitializeComponent();
    }

    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        double value = args.NewValue;
        rotatingLabel.Rotation = value;
        displayLabel.Text = String.Format("The Slider value is {0}", value);
    }
}

Olay işleyicisi, bağımsız değişkeni aracılığıyla Slider olayı işten alan 'i elde etmek de sender mümkündür. özelliği Value geçerli değeri içerir:

double value = ((Slider)sender).Value;

SliderXAML dosyasında nesneye özniteliğiyle bir ad x:Name verilmişse (örneğin, "kaydırıcı"), olay işleyicisi bu nesneye doğrudan başvurur:

double value = slider.Value;

Kaydırıcıyı veri bağlama

Temel Kaydırıcı Bağlamaları sayfası, Veri Bağlama kullanarak olay işleyicisini ortadan kaldıran neredeyse eşdeğer bir programın nasıl yazılacaklarını gösterir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SliderDemos.BasicSliderBindingsPage"
             Title="Basic Slider Bindings"
             Padding="10, 0">
    <StackLayout>
        <Label Text="ROTATING TEXT"
               Rotation="{Binding Source={x:Reference slider},
                                  Path=Value}"
               FontSize="Large"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />

        <Slider x:Name="slider"
                Maximum="360" />

        <Label x:Name="displayLabel"
               Text="{Binding Source={x:Reference slider},
                              Path=Value,
                              StringFormat='The Slider value is {0:F0}'}"
               HorizontalOptions="Center"
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Birincinin özelliği, belirtimli ikincinin özelliği RotationLabel gibi ValueSliderTextLabel özelliğinine StringFormat bağlıdır. Temel Kaydırıcı Bağlamaları sayfası, önceki iki sayfadan biraz farklı şekilde işlev gösterir: Sayfa ilk görüntülendiğinde, ikinci sayfa değerine sahip metin dizesini görüntüler. Bu, veri bağlama kullanmanın bir avantajıdır. Veri bağlama olmadan metin görüntülemek için, özel olarak sınıfının özelliğini başlatmanız veya sınıf oluşturucusdan olay işleyicisini çağırarak olayın başlatılmasının TextLabel benzetimini yapmak ValueChanged gerekir.

Önlem

Özelliğin değeri Minimum her zaman özelliğin değerinden küçük Maximum olması gerekir. Aşağıdaki kod parçacığı, bir özel Slider durum oluşturur:

// Throws an exception!
Slider slider = new Slider
{
    Minimum = 10,
    Maximum = 20
};

C# derleyicisi, bu iki özelliği sırayla ayaran kod üretir ve özellik 10 olarak ayarlanırsa, varsayılan MinimumMaximum değer olan 1'den büyüktür. Önce özelliğini ayarerek bu durumda özel durumdan Maximum kaçınabilirsiniz:

Slider slider = new Slider
{
    Maximum = 20,
    Minimum = 10
};

MaximumVarsayılan 0 değerinden büyük olduğundan 20 olarak ayar Minimum yapmak sorun değildir. ayar Minimum olduğunda, değer Maximum 20 değerinden küçük olur.

Aynı sorun XAML'de de mevcuttur. Özellikleri her zaman şundan büyük olacak Maximum şekilde Minimum ayarlayın:

<Slider Maximum="20"
        Minimum="10" ... />

ve değerlerini negatif sayılara, ancak yalnızca her zaman küçük olan MinimumMaximum bir sırayla MinimumMaximum ayarlayın:

<Slider Minimum="-20"
        Maximum="-10" ... />

özelliği Value her zaman değerine eşit veya daha büyük Minimum ve değerine eşit veya değerinden küçük veya Maximum eşittir. bu aralığın dışındaki bir değere ayarlanırsa, değer aralığın içinde yer alan bir değere zorunda olur Value ancak özel durum olmaz. Örneğin, bu kod bir özel durum oluşturur:

Slider slider = new Slider
{
    Value = 10
};

Bunun Value yerine, özelliği Maximum 1 değerine karşı kabartır.

Aşağıda yukarıda gösterilen bir kod parçacığı gösterilmiştir:

Slider slider = new Slider
{
    Maximum = 20,
    Minimum = 10
};

Minimum10 olarak ayarlanırsa, Value 10'a da ayarlanır.

Özelliğin varsayılan değeri 0 dışında bir değere zorlandı olduğu sırada bir olay işleyicisi ValueChangedValue eklenmişse, bir olay ValueChanged başlatıldı. XAML'nin kod parçacığı şu şekildedir:

<Slider ValueChanged="OnSliderValueChanged"
        Maximum="20"
        Minimum="10" />

Minimum10 olarak ayarlanırsa, Value 10 olarak da ayarlanır ve olay ValueChanged başlatıldı. Bu, sayfanın geri kalanı oluşturulmadan önce oluşabilir ve işleyici henüz oluşturulmamış olan sayfada diğer öğelere başvurur. İşleyiciye, sayfasındaki diğer ValueChanged öğelerin değerlerini kontrol etmek için bazı null kodlar eklemek iyi olabilir. Veya değerler başlatıldıktan ValueChanged sonra olay Slider işleyicisini de ayarlayın.

Platform uygulaması farklılıkları

Daha önce gösterilen ekran görüntüleri, değerini farklı Slider sayıda ondalık ayırıcıyla görüntüler. Bu, Android ve Slider UWP platformlarında uygulama ile ilgilidir.

Android uygulaması

Android uygulaması Slider Android'i temel almaktadır ve her zaman özelliğini SeekBarMax 1000 olarak ayarlar. Bu, Slider Android'de yalnızca 1.001 ayrık değer olduğu anlamına gelir. değerine 0 ve 5000 değerine sahip olacak şekilde ayarlanırsa, özelliğin değeri SliderMinimumMaximumSliderValue 0, 5, 10, 15 vb. olur.

UWP uygulaması

uygulamasının UWP Slider uygulaması, UWP denetimine Slider dayalıdır. StepFrequencyUWP'nin Slider özelliği ve özelliklerinin farkı Maximum 10'a bölünerek Minimum 1'den büyük değil olarak ayarlanır.

Örneğin, varsayılan 0 ile 1 aralığı için StepFrequency özelliği 0,1 olarak ayarlanır. yönetili olarak, özelliği SliderValue 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9 ve 1.0 ile sınırlıdır. (Bu, SliderDemos örneğinin son sayfasında açıktır.) ve özellikleri arasındaki fark 10 veya daha büyük olduğunda, 1 olarak ayarlanır ve MaximumMinimumStepFrequencyValue özelliğin tamsayı değerleri vardır.

StepSlider çözümü

StepSlider27. Bölümde daha StepSlider özel işleyicileri Mobile Apps oluşturma. StepSliderile Slider benzerdir, ancak ile arasındaki değer sayısını belirtmek için bir özellik StepsMinimumMaximum ekler.

Renk seçimi için kaydırıcılar

SliderDemos örneğinin son iki sayfası da renk seçimi için üç örnek kullanır. İlk sayfa, arka arkasındaki kod dosyasındaki tüm etkileşimleri işlerken, ikinci sayfada bir ViewModel ile veri bağlamanın nasıl kullanılası gösterir.

Arka kod dosyasındaki Kaydırıcıları İşleme

RGB Renk Kaydırıcıları sayfası renk görüntülemek için bir örneği, rengin kırmızı, yeşil ve mavi bileşenlerini seçmek için üç örnek ve bu renk değerlerini görüntülemek için üç öğe SliderLabel gösterir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="SliderDemos.RgbColorSlidersPage"
             Title="RGB Color Sliders">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Slider">
                <Setter Property="Maximum" Value="255" />
            </Style>

            <Style TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Margin="10">
        <BoxView x:Name="boxView"
                 Color="Black"
                 VerticalOptions="FillAndExpand" />

        <Slider x:Name="redSlider"
                ValueChanged="OnSliderValueChanged" />

        <Label x:Name="redLabel" />

        <Slider x:Name="greenSlider"
                ValueChanged="OnSliderValueChanged" />

        <Label x:Name="greenLabel" />

        <Slider x:Name="blueSlider"
                ValueChanged="OnSliderValueChanged" />

        <Label x:Name="blueLabel" />
    </StackLayout>
</ContentPage>

, Style üç öğeye Slider de 0 ile 255 arasında bir aralık verir. Öğeleri, Slider arka ValueChanged kod dosyasında uygulanan aynı işleyiciyi paylaşır:

public partial class RgbColorSlidersPage : ContentPage
{
    public RgbColorSlidersPage()
    {
        InitializeComponent();
    }

    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        if (sender == redSlider)
        {
            redLabel.Text = String.Format("Red = {0:X2}", (int)args.NewValue);
        }
        else if (sender == greenSlider)
        {
            greenLabel.Text = String.Format("Green = {0:X2}", (int)args.NewValue);
        }
        else if (sender == blueSlider)
        {
            blueLabel.Text = String.Format("Blue = {0:X2}", (int)args.NewValue);
        }

        boxView.Color = Color.FromRgb((int)redSlider.Value,
                                      (int)greenSlider.Value,
                                      (int)blueSlider.Value);
    }
}

İlk bölüm, örneklerden birinin özelliğini onaltılık olarak değerini belirten kısa bir metin TextLabelSlider dizesine ayarlar. Ardından RGB Slider bileşenlerinden bir değer oluşturmak için Color üç örneğine de erişilir:

RGB Renk Kaydırıcıları

Kaydırıcıyı ViewModel'e Bağlama

HSL Renk Kaydırıcıları sayfasında hue, doygunluk ve renk parlaklığı değerlerinden değer oluşturmak için kullanılan hesaplamaları gerçekleştirmek için ViewModel'in nasıl kullanacağız? Tüm ViewModel'ler gibi sınıfı da arabirimini uygulayan ve özelliklerden biri her HSLColorViewModel değişiklik olduğunda bir olay INotifyPropertyChangedPropertyChanged hazırlar:

public class HslColorViewModel : INotifyPropertyChanged
{
    Color color;

    public event PropertyChangedEventHandler PropertyChanged;

    public double Hue
    {
        set
        {
            if (color.Hue != value)
            {
                Color = Color.FromHsla(value, color.Saturation, color.Luminosity);
            }
        }
        get
        {
            return color.Hue;
        }
    }

    public double Saturation
    {
        set
        {
            if (color.Saturation != value)
            {
                Color = Color.FromHsla(color.Hue, value, color.Luminosity);
            }
        }
        get
        {
            return color.Saturation;
        }
    }

    public double Luminosity
    {
        set
        {
            if (color.Luminosity != value)
            {
                Color = Color.FromHsla(color.Hue, color.Saturation, value);
            }
        }
        get
        {
            return color.Luminosity;
        }
    }

    public Color Color
    {
        set
        {
            if (color != value)
            {
                color = value;
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Hue"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Saturation"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Luminosity"));
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs("Color"));
            }
        }
        get
        {
            return color;
        }
    }
}

ViewModels ve arabirimi INotifyPropertyChanged Veri Bağlama INotifyPropertyChanged

HslColorSlidersPage.xaml dosyası örneğini görüntüler ve bunu sayfanın özelliğine BindingContext ayarlar. Bu, XAML dosyasındaki tüm öğelerin ViewModel'daki özelliklere bağlaması için izin verir:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:SliderDemos"
             x:Class="SliderDemos.HslColorSlidersPage"
             Title="HSL Color Sliders">

    <ContentPage.BindingContext>
        <local:HslColorViewModel Color="Chocolate" />
    </ContentPage.BindingContext>

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style TargetType="Label">
                <Setter Property="HorizontalTextAlignment" Value="Center" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>

    <StackLayout Margin="10">
        <BoxView Color="{Binding Color}"
                 VerticalOptions="FillAndExpand" />

        <Slider Value="{Binding Hue}" />
        <Label Text="{Binding Hue, StringFormat='Hue = {0:F2}'}" />

        <Slider Value="{Binding Saturation}" />
        <Label Text="{Binding Saturation, StringFormat='Saturation = {0:F2}'}" />

        <Slider Value="{Binding Luminosity}" />
        <Label Text="{Binding Luminosity, StringFormat='Luminosity = {0:F2}'}" />
    </StackLayout>
</ContentPage>

Öğeler Slider işlendikça ve öğeleri BoxViewLabel ViewModel'den güncelleştirilir:

HSL Renk Kaydırıcıları

Biçimlendirme StringFormat uzantısının Binding bileşeni, iki ondalık basamak görüntülemek için "F2" biçimine ayarlanır. (Veri bağlamalarında dize biçimlendirme, Dize Biçimlendirme makalesinde ele alınmıştır.) Ancak, programın UWP sürümü 0, 0.1, 0.2, ... değerleriyle sınırlıdır 0,9 ve 1,0. Bu, yukarıda Platform uygulama farklılıkları bölümünde açıklandığı gibi UWP uygulamasının Slider doğrudan Slider