Xamarin.Forms Jezdec

Článek
12/02/2021
10 min ke čtení

Posuvník slouží k výběru z rozsahu souvislých hodnot.

je vodorovný pruh, se který může uživatel manipulovat Xamarin.FormsSlider a vybrat hodnotu ze double souvislého rozsahu.

Definuje Slider tři vlastnosti typu double :

_Slider_Minimum" data-linktype="absolute-path">je minimální rozsah s výchozí hodnotou Minimum 0.
Xamarin_Forms _Slider_Maximum" data-linktype="absolute-path">je maximální hodnota rozsahu s výchozí hodnotou Maximum 1.
Xamarin_Forms _Slider_Value" data-linktype="absolute-path">je hodnota posuvníku, která může být v rozsahu mezi a a má výchozí ValueMinimumMaximum hodnotu 0.

Všechny tři vlastnosti jsou zálohovány BindableProperty objekty. Vlastnost má výchozí režim vazby , což znamená, že je vhodná jako zdroj vazby v aplikaci, která používá architekturu ValueBindingMode.TwoWayValue

Upozornění

Interně Slider zajišťuje, že je Minimum menší než Maximum . Pokud Minimum nebo jsou někdy Maximum nastaveny tak, Minimum aby nebyl menší než , je Maximum vyvolána výjimka. Další informace o nastavení vlastností a najdete v části Precautions níže.

Objekt Slider vyžádá vlastnost tak, aby byla Value mezi a MinimumMaximum (včetně). Pokud je Minimum vlastnost nastavená na hodnotu větší než vlastnost , nastaví vlastnost Value na SliderValueMinimum . Podobně, pokud Maximum je nastavena na hodnotu menší než Value , nastaví vlastnost na SliderValueMaximum .

Slider definuje ValueChanged událost, která se aktivuje při změnách, a to buď prostřednictvím manipulace s objektem , nebo když Value program nastaví vlastnost SliderValue přímo. Událost ValueChanged se také aktivoval, když je vlastnost Value vyžádána, jak je popsáno v předchozím odstavci.

Objekt, který doprovází událost, má dvě vlastnosti typu ValueChangedEventArgsValueChanged : Xamarin_Forms doubleValueChangedEventArgs _ValueChangedEventArgs_OldValue" data-linktype="absolute-path">a Xamarin_Forms OldValueValueChanged _ValueChangedEventArgs_NewValue" data-linktype="absolute-path">NewValue . V době, kdy je událost aktivována, je hodnota stejná NewValue jako Value vlastnost objektu Slider .

Slider také definuje události a , které se aktivují na začátku a konci akce DragStartedDragCompleted přetažení. Na rozdíl ValueChanged od události jsou události a DragStartedDragCompleted aktivovány pouze manipulací uživatele Slider s objektem . Když DragStarted se událost spustí, DragStartedCommand spustí se , typu ICommand . Podobně se při DragCompleted spuštění události provede , typu DragCompletedCommandICommand .

Upozornění

Nepoužívejte možnosti horizontálního rozložení bez omezení Center pro , nebo s StartEndSlider . V Androidu i UPW se sbalí na pruh nulové délky a v Slider iOSu je panel velmi krátký. Při vložení rozložení používejte výchozí nastavení a nepoužívejte HorizontalOptionsFillAutoSlider šířku Grid .

Také Slider definuje několik vlastností, které mají vliv na jeho vzhled:

MinimumTrackColor je barva pruhu na levé straně palce.
MaximumTrackColor je barva pruhu na pravé straně palce.
ThumbColor je barva palce.
ThumbImageSource je obrázek, který se má použít pro kryptografický otisk typu ImageSource .

Poznámka

Vlastnosti ThumbColorThumbImageSource a se vzájemně vylučují. Pokud jsou nastaveny obě vlastnosti, ThumbImageSource bude mít přednost vlastnost .

Základní kód posuvníku a značky

Ukázka SliderDemos začíná třemi stránkami, které jsou funkčně identické, ale implementují se různými způsoby. První stránka používá pouze kód jazyka C#, druhá používá XAML s obslužnou rutinou události v kódu a třetí je schopna se vyhnout obslužné rutině události pomocí datové vazby v souboru XAML.

Vytvoření posuvníku v kódu

Stránka Základní kód posuvníku v ukázce SliderDemos ukazuje, jak vytvořit objekt a dva objekty v kódu:

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
            }
        };
    }
}

Inicializuje Slider se tak, aby měl Maximum vlastnost 360. Obslužná rutina objektu používá vlastnost objektu k nastavení vlastnosti prvního objektu a používá metodu s vlastností ValueChangedSliderValuesliderRotationLabelString.FormatNewValue argumentů TextLabel události k nastavení vlastnosti druhého objektu . Tyto dva přístupy k získání aktuální hodnoty jsou Slider zaměnitelné.

Tady je program spuštěný na zařízeních s iOSem a Androidem:

Druhý příkaz Label zobrazí text "(uninitialized)", dokud se s objektem nemanipuluje, což způsobí, že se Slider první událost ValueChanged aktivovala. Všimněte si, že počet desetinných míst, která se zobrazí, se pro každou platformu liší. Tyto rozdíly souvisejí s implementacemi platformy a jsou popsány dále v tomto článku v části SliderSlider

Vytvoření posuvníku v jazyce XAML

Stránka Xaml základního posuvníku je funkčně stejná jako základní posuvník kódu, ale je implementovaná hlavně v XAML:

<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>

Soubor kódu na pozadí obsahuje obslužnou rutinu ValueChanged události:

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);
    }
}

Obslužná rutina události může také získat , Slider která událost spouštěná prostřednictvím sender argumentu . Vlastnost Value obsahuje aktuální hodnotu:

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

Pokud byl objektu v souboru XAML přiřazen název s atributem Slider (například "posuvník"), obslužná rutina události by mohla odkazovat x:Name přímo na tento objekt:

double value = slider.Value;

Datová vazba posuvníku

Stránka Základní posuvníkové vazby ukazuje, jak napsat téměř ekvivalentní program, který eliminuje obslužnou rutinu události pomocí datové vazby:

<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>

Vlastnost Rotation prvního objektu je svázaná s vlastností objektu , stejně jako vlastnost druhého objektu se LabelValueSliderTextLabelStringFormat specifikací. Stránka Základní posuvníkové vazby funguje trochu jinak než dvě předchozí stránky: Když se stránka poprvé zobrazí, druhá zobrazí textový řetězec s hodnotou . To je výhoda používání datových vazeb. Pokud chcete zobrazit text bez datové vazby, muset jste konkrétně inicializovat vlastnost nebo simulovat aktivaci události voláním obslužné rutiny události z TextLabelValueChanged konstruktoru třídy.

Opatření

Hodnota vlastnosti Minimum musí být vždy menší než hodnota Maximum vlastnosti. Následující fragment kódu způsobí výjimku Slider :

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

Kompilátor jazyka C# generuje kód, který tyto dvě vlastnosti nastavuje postupně, a pokud je vlastnost nastavená na 10, je větší než výchozí hodnota MinimumMaximum 1. Této výjimce se můžete vyhnout tak, že nejprve Maximum nastavíte vlastnost :

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

Nastavení Maximum na hodnotu 20 není problém, protože je větší než výchozí Minimum hodnota 0. Při Minimum nastavení je hodnota menší než hodnota Maximum 20.

Stejný problém existuje i v jazyce XAML. Nastavte vlastnosti v pořadí, které zajišťuje, že Maximum je vždy větší než Minimum :

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

Hodnoty a můžete nastavit Minimum na záporná čísla, ale pouze v pořadí, ve kterém Maximum je vždy menší než MinimumMaximum :

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

Vlastnost Value je vždy větší než nebo rovna hodnotě a menší než nebo Minimum rovna Maximum . Pokud je hodnota nastavená na hodnotu mimo tento rozsah, hodnota se vyžádá, aby leží v rozsahu, ale není Value vyvolána žádná výjimka. Tento kód například nevydá výjimku:

Slider slider = new Slider
{
    Value = 10
};

Místo toho Value je vlastnost přiřaována k Maximum hodnotě 1.

Tady je výše uvedený fragment kódu:

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

Pokud Minimum je nastavená na 10, Value je nastavená také na 10.

Pokud byla obslužná rutina události připojena v době, kdy je vlastnost přiřazena k jiné než výchozí hodnotě ValueChangedValue 0, je ValueChanged aktivována událost. Tady je fragment kódu XAML:

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

Pokud Minimum je nastavená na hodnotu 10, je také nastavená Value na hodnotu 10 a událost je ValueChanged aktivována. K tomu může dojít před vytvořením zbytku stránky a obslužná rutina se může pokusit odkazovat na jiné prvky na stránce, které ještě nebyly vytvořeny. Do obslužné rutiny můžete přidat kód, který ValueChanged kontroluje hodnoty jiných prvků na null stránce. Nebo můžete nastavit obslužnou ValueChanged rutinu události po Slider inicializaci hodnot.

Rozdíly v implementaci platformy

Na dříve zobrazených snímcích obrazovky se zobrazuje hodnota Slider s jiným počtem desetinných míst. To souvisí s tím, jak se na platformách Android a Slider UPW implementuje .

Implementace Androidu

Implementace androidu Slider je založená na Androidu a vždy nastaví vlastnost na SeekBarMax 1000. To znamená, že Slider v Androidu má pouze 1 001 diskrétních hodnot. Pokud nastavíte na hodnotu 0 a hodnotu 5 000, pak při manipulaci s objektem má vlastnost hodnoty SliderMinimumMaximumSliderValue 0, 5, 10, 15 atd.

Implementace UPW

Implementace upw je Slider založená na ovládacím prvku Slider UPW. Vlastnost UPW je nastavena na rozdíl vlastností a StepFrequencySliderMaximumMinimum děleno 10, ale ne větší než 1.

Například pro výchozí rozsah 0 až 1 je StepFrequency vlastnost nastavena na 0,1. Při manipulaci s objektem je vlastnost omezena na SliderValue 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9 a 1.0. (To je vidět na poslední stránce v ukázce SliderDemos.) Pokud je rozdíl mezi Maximum vlastnostmi a Minimum větší než 10 nebo vyšší, pak StepFrequency je nastaven na hodnotu 1 a Value vlastnost má celočíselné hodnoty.

Řešení StepSlider

Všestrannější StepSlider je popsána v StepSlider pro knihu vytvářející Mobile Apps . StepSliderJe podobná, Slider ale přidá Steps vlastnost k určení počtu hodnot mezi Minimum a Maximum .

Posuvníky pro výběr barvy

Poslední dvě stránky v ukázce SliderDemos používají pro výběr barvy tři instance. První stránka zpracovává všechny interakce v souboru s kódem na pozadí, zatímco druhá stránka ukazuje, jak použít datovou vazbu s ViewModel.

Zpracování jezdců v souboru kódu na pozadí

Stránka posuvníky barev RGB vytvoří instanci a zobrazí barvu, tři Slider instance pro výběr červené, zelené a modré komponenty barvy a tři Label prvky pro zobrazení těchto hodnot barev:

<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>

A Style poskytne všem třem Slider prvkům rozsah od 0 do 255. SliderPrvky sdílejí stejnou ValueChanged obslužnou rutinu, která je implementována v souboru kódu na pozadí:

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);
    }
}

První oddíl nastaví Text vlastnost jedné z Label instancí na krátký textový řetězec, který označuje hodnotu Slider v šestnáctkové soustavě. Pak všechny tři Slider instance budou k dispozici pro vytvoření Color hodnoty z komponent RGB:

RGB Color Sliders Posuvníky –

Svázání posuvníku s ViewModel

Stránka posuvníky barev HSL ukazuje, jak použít ViewModel k provedení výpočtů používaných k vytvoření hodnoty z hodnot odstínu, sytosti a světelnosti. Stejně jako všechny ViewModels HSLColorViewModel Třída implementuje INotifyPropertyChanged rozhraní a PropertyChanged událost vyvolá vždy, když se změní jedna z vlastností:

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 a INotifyPropertyChanged rozhraní jsou popsány v článku INotifyPropertyChanged.

Soubor HslColorSlidersPage. XAML vytvoří instanci a nastaví jej na BindingContext vlastnost stránky. To umožňuje všem prvkům v souboru XAML navazovat vazby na vlastnosti v ViewModel:

<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>

Při Slider manipulaci s prvky BoxViewLabel jsou elementy a aktualizovány z ViewModel:

StringFormatKomponenta Binding rozšíření značek je nastavena pro formát "F2", chcete-li zobrazit dvě desetinná místa. (Formátování řetězců v datových vazbách je popsáno v článku formátování řetězce.) Verze tohoto programu pro UWP je ale omezená na hodnoty 0, 0,1, 0,2,... 0,9 a 1,0. Jedná se o přímý výsledek implementace UWP Slider , jak je popsáno výše v části Slider.