Xamarin.FormsKeits Slider

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Verwenden Sie einen Schieberegler, um aus einem Bereich von kontinuierlichen Werten auszuwählen.Use a Slider for selecting from a range of continuous values.

Der Xamarin.Forms Slider ist ein horizontaler Balken, der vom Benutzer bearbeitet werden kann, um einen double Wert aus einem kontinuierlichen Bereich auszuwählen.The Xamarin.Forms Slider is a horizontal bar that can be manipulated by the user to select a double value from a continuous range.

SliderDefiniert drei Eigenschaften vom Typ double :The Slider defines three properties of type double:

  • Minimumder Mindestwert des Bereichs, der Standardwert ist 0 (null).Minimum is the minimum of the range, with a default value of 0.
  • Maximumder Höchstwert des Bereichs, der Standardwert ist 1.Maximum is the maximum of the range, with a default value of 1.
  • Valueder Wert des Schiebereglers, der zwischen und liegen kann Minimum Maximum . der Standardwert ist 0.Value is the slider's value, which can range between Minimum and Maximum and has a default value of 0.

Alle drei Eigenschaften werden von- BindableProperty Objekten unterstützt.All three properties are backed by BindableProperty objects. Die- Value Eigenschaft verfügt über einen Standard Bindungs Modus von BindingMode.TwoWay . Dies bedeutet, dass Sie als Bindungs Quelle in einer Anwendung geeignet ist, die die Model-View-ViewModel (MVVM)- Architektur verwendet.The Value property has a default binding mode of BindingMode.TwoWay, which means that it's suitable as a binding source in an application that uses the Model-View-ViewModel (MVVM) architecture.

Warnung

Intern Slider stellt sicher, dass Minimum kleiner als ist Maximum .Internally, the Slider ensures that Minimum is less than Maximum. Wenn Minimum oder Maximum jemals festgelegt sind, sodass Minimum nicht kleiner als ist Maximum , wird eine Ausnahme ausgelöst.If Minimum or Maximum are ever set so that Minimum is not less than Maximum, an exception is raised. Weitere Informationen zum Festlegen der-Eigenschaft und der-Eigenschaft finden Sie im Abschnitt " Vorsichtsmaßnahmen " Minimum Maximum .See the Precautions section below for more information on setting the Minimum and Maximum properties.

Der wandelt Slider die Value -Eigenschaft so um, dass Sie zwischen und (einschließlich) liegt Minimum Maximum .The Slider coerces the Value property so that it is between Minimum and Maximum, inclusive. Wenn die Minimum Eigenschaft auf einen Wert festgelegt ist, der größer als die- Value Eigenschaft ist, wird Slider die- Value Eigenschaft von auf festgelegt Minimum .If the Minimum property is set to a value greater than the Value property, the Slider sets the Value property to Minimum. Wenn Maximum auf einen Wert kleiner als festgelegt wird Value , dann wird Slider die- Value Eigenschaft auf festgelegt Maximum .Similarly, if Maximum is set to a value less than Value, then Slider sets the Value property to Maximum.

Sliderdefiniert ein- ValueChanged Ereignis, das ausgelöst wird Value , wenn die geändert werden, entweder über die Benutzer Bearbeitung von Slider oder, wenn das Programm die- Value Eigenschaft direkt festlegt.Slider defines a ValueChanged event that is fired when the Value changes, either through user manipulation of the Slider or when the program sets the Value property directly. Ein- ValueChanged Ereignis wird auch ausgelöst, wenn die- Value Eigenschaft wie im vorherigen Absatz beschrieben erzwungen wird.A ValueChanged event is also fired when the Value property is coerced as described in the previous paragraph.

Das ValueChangedEventArgs Objekt, das das ValueChanged Ereignis begleitet, verfügt über zwei Eigenschaften vom Typ double : OldValue und NewValue .The ValueChangedEventArgs object that accompanies the ValueChanged event has two properties, both of type double: OldValue and NewValue. Wenn das-Ereignis ausgelöst wird, ist der Wert von mit NewValue der- Value Eigenschaft des-Objekts identisch Slider .At the time the event is fired, the value of NewValue is the same as the Value property of the Slider object.

Sliderdefiniert auch DragStarted -und- DragCompleted Ereignisse, die am Anfang und Ende der Zieh Aktion ausgelöst werden.Slider also defines DragStarted and DragCompleted events, that are fired at the beginning and end of the drag action. Im Gegensatz zum ValueChanged -Ereignis DragStarted werden das-Ereignis und das-Ereignis DragCompleted nur durch die Benutzer Bearbeitung von ausgelöst Slider .Unlike the ValueChanged event, the DragStarted and DragCompleted events are only fired through user manipulation of the Slider. Wenn das-Ereignis ausgelöst wird DragStarted , DragStartedCommand wird der vom Typ ICommand ausgeführt.When the DragStarted event fires, the DragStartedCommand, of type ICommand, is executed. Ebenso wird, wenn das Ereignis ausgelöst wird DragCompleted , der DragCompletedCommand vom Typ ICommand ausgeführt.Similarly, when the DragCompleted event fires, the DragCompletedCommand, of type ICommand, is executed.

Warnung

Verwenden Sie keine eingeschränkten horizontalen Layoutoptionen von Center , Start oder End mit Slider .Do not use unconstrained horizontal layout options of Center, Start, or End with Slider. Bei Android und UWP reduziert sich der Slider auf einen Balken der Länge 0 (null), und bei IOS ist die Leiste sehr kurz.On both Android and the UWP, the Slider collapses to a bar of zero length, and on iOS, the bar is very short. Behalten Sie die Standard HorizontalOptions Einstellung Fill bei, und verwenden Sie Auto beim Einfügen Slider eines Layouts keine Breite von Grid .Keep the default HorizontalOptions setting of Fill, and don't use a width of Auto when putting Slider in a Grid layout.

Der Slider definiert auch mehrere Eigenschaften, die sich auf seine Darstellung auswirken:The Slider also defines several properties that affect its appearance:

Hinweis

Die ThumbColor ThumbImageSource Eigenschaften und schließen sich gegenseitig aus.The ThumbColor and ThumbImageSource properties are mutually exclusive. Wenn beide Eigenschaften festgelegt sind, hat die ThumbImageSource Eigenschaft Vorrang.If both properties are set, the ThumbImageSource property will take precedence.

Grundlegender Schieberegler-Code und MarkupBasic Slider code and markup

Das sliderdemos -Beispiel beginnt mit drei Seiten, die funktionell identisch sind, jedoch auf unterschiedliche Weise implementiert werden.The SliderDemos sample begins with three pages that are functionally identical, but are implemented in different ways. Die erste Seite verwendet nur c#-Code, der zweite verwendet XAML mit einem Ereignishandler im Code, und der dritte kann den Ereignishandler mithilfe der Datenbindung in der XAML-Datei vermeiden.The first page uses only C# code, the second uses XAML with an event handler in code, and the third is able to avoid the event handler by using data binding in the XAML file.

Erstellen eines Schiebereglers im CodeCreating a Slider in code

Die Codepage für den grundlegenden Schieberegler im sliderdemos -Beispiel zeigt, wie ein Slider -Objekt und zwei- Label Objekte im Code erstellt werden:The Basic Slider Code page in the SliderDemos sample shows show to create a Slider and two Label objects in code:

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

Die Slider wird mit der- Maximum Eigenschaft 360 initialisiert.The Slider is initialized to have a Maximum property of 360. Der- ValueChanged Handler des Slider Value -Objekts verwendet die-Eigenschaft des slider -Objekts, um die Rotation -Eigenschaft des ersten festzulegen, Label und verwendet die- String.Format Methode mit der- NewValue Eigenschaft der Ereignis Argumente, um die- Text Eigenschaft der zweiten festzulegen Label .The ValueChanged handler of the Slider uses the Value property of the slider object to set the Rotation property of the first Label and uses the String.Format method with the NewValue property of the event arguments to set the Text property of the second Label. Diese beiden Ansätze zum Abrufen des aktuellen Werts von Slider sind austauschbar.These two approaches to obtain the current value of the Slider are interchangeable.

Hier ist das Programm, das auf IOS-und Android-Geräten ausgeführt wird:Here's the program running on iOS and Android devices:

Standard Schieberegler-CodeBasic Slider Code

Die zweite Label zeigt den Text "(nicht initialisiert)" Slider an, bis der manipuliert wird, was bewirkt, dass das erste ValueChanged Ereignis ausgelöst wird.The second Label displays the text "(uninitialized)" until the Slider is manipulated, which causes the first ValueChanged event to be fired. Beachten Sie, dass die Anzahl der angezeigten Dezimalstellen für jede Plattform unterschiedlich ist.Notice that the number of decimal places that are displayed is different for each platform. Diese Unterschiede beziehen sich auf die Platt Form Implementierungen von Slider und werden weiter unten in diesem Artikel im Abschnitt Unterschiede bei der Platt Form Implementierungerläutert.These differences are related to the platform implementations of the Slider and are discussed later in this article in the section Platform implementation differences.

Erstellen eines Schiebereglers in XAMLCreating a Slider in XAML

Die grundlegende Schieberegler-XAML -Seite ist funktional identisch mit dem grundlegenden Schieberegler-Code , der jedoch größtenteils in XAML implementiert istThe Basic Slider XAML page is functionally the same as Basic Slider Code but implemented mostly in 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>

Die Code-Behind-Datei enthält den Handler für das- ValueChanged Ereignis:The code-behind file contains the handler for the ValueChanged event:

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

Der Ereignishandler kann auch den abrufen Slider , der das Ereignis durch das- sender Argument auslöst.It's also possible for the event handler to obtain the Slider that is firing the event through the sender argument. Die- Value Eigenschaft enthält den aktuellen Wert:The Value property contains the current value:

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

Wenn dem Slider Objekt ein Name in der XAML-Datei mit einem- x:Name Attribut (z. b. "Schieberegler") zugewiesen wurde, kann der Ereignishandler direkt auf dieses Objekt verweisen:If the Slider object were given a name in the XAML file with an x:Name attribute (for example, "slider"), then the event handler could reference that object directly:

double value = slider.Value;

Datenbindung für den SchiebereglerData binding the Slider

Die Seite " grundlegende Schieberegler-Bindungen " zeigt, wie Sie ein nahezu gleichwertiges Programm schreiben, das den Value Ereignishandler mithilfe der Datenbindungeliminiert:The Basic Slider Bindings page shows how to write a nearly equivalent program that eliminates the Value event handler by using Data Binding:

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

Die- Rotation Eigenschaft der ersten Label ist an die- Value Eigenschaft von gebunden Slider , wie die- Text Eigenschaft der zweiten Label mit einer- StringFormat Spezifikation.The Rotation property of the first Label is bound to the Value property of the Slider, as is the Text property of the second Label with a StringFormat specification. Die Seite mit den grundlegenden Schieberegler-Bindungen funktioniert etwas anders als die beiden vorherigen Seiten: Wenn die Seite zum ersten Mal angezeigt wird, zeigt die zweite Label die Text Zeichenfolge mit dem Wert an.The Basic Slider Bindings page functions a little differently from the two previous pages: When the page first appears, the second Label displays the text string with the value. Dies hat den Vorteil, dass die Datenbindung verwendet wird.This is a benefit of using data binding. Um Text ohne Datenbindung anzuzeigen, müssen Sie die- Text Eigenschaft des-Objekts explizit initialisieren Label oder ein Auslösen des-Ereignisses simulieren, ValueChanged indem Sie den-Ereignishandler aus dem-Klassenkonstruktor aufrufen.To display text without data binding, you'd need to specifically initialize the Text property of the Label or simulate a firing of the ValueChanged event by calling the event handler from the class constructor.

TreffenPrecautions

Der Wert der- Minimum Eigenschaft muss stets kleiner sein als der Wert der- Maximum Eigenschaft.The value of the Minimum property must always be less than the value of the Maximum property. Der folgende Code Ausschnitt bewirkt, dass Slider eine Ausnahme auslöst:The following code snippet causes the Slider to raise an exception:

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

Der c#-Compiler generiert Code, mit dem diese beiden Eigenschaften nacheinander festgelegt werden. wenn die- Minimum Eigenschaft auf 10 festgelegt ist, ist sie größer als der Standard Maximum Wert 1.The C# compiler generates code that sets these two properties in sequence, and when the Minimum property is set to 10, it is greater than the default Maximum value of 1. In diesem Fall können Sie die Ausnahme vermeiden, indem Sie Maximum zuerst die-Eigenschaft festlegen:You can avoid the exception in this case by setting the Maximum property first:

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

MaximumDie Einstellung auf 20 ist kein Problem, da Sie größer als der Standard Minimum Wert 0 ist.Setting Maximum to 20 is not a problem because it is greater than the default Minimum value of 0. Wenn Minimum festgelegt ist, ist der Wert kleiner als der Maximum Wert von 20.When Minimum is set, the value is less than the Maximum value of 20.

Das gleiche Problem ist in XAML aufgetreten.The same problem exists in XAML. Legen Sie die Eigenschaften in einer Reihenfolge fest, die sicherstellt, dass Maximum immer größer ist als Minimum :Set the properties in an order that ensures that Maximum is always greater than Minimum:

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

Sie können den Minimum -Wert und den- Maximum Wert auf negative Zahlen festlegen, aber nur in einer Reihenfolge, in der Minimum immer kleiner ist als Maximum :You can set the Minimum and Maximum values to negative numbers, but only in an order where Minimum is always less than Maximum:

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

Die Value -Eigenschaft ist immer größer oder gleich dem Minimum -Wert und kleiner als oder gleich Maximum .The Value property is always greater than or equal to the Minimum value and less than or equal to Maximum. Wenn Value auf einen Wert außerhalb dieses Bereichs festgelegt wird, wird der Wert in den Bereich umgewandelt, aber es wird keine Ausnahme ausgelöst.If Value is set to a value outside that range, the value will be coerced to lie within the range, but no exception is raised. Beispielsweise wird mit diesem Code keine Ausnahme ausgelöst:For example, this code will not raise an exception:

Slider slider = new Slider
{
    Value = 10
};

Stattdessen wird die- Value Eigenschaft in den Maximum Wert 1 umgewandelt.Instead, the Value property is coerced to the Maximum value of 1.

Hier sehen Sie einen oben gezeigten Code Ausschnitt:Here's a code snippet shown above:

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

Wenn Minimum auf 10 festgelegt ist, Value wird auch auf 10 festgelegt.When Minimum is set to 10, then Value is also set to 10.

Wenn ein- ValueChanged Ereignishandler zu dem Zeitpunkt angefügt wurde, an dem die- Value Eigenschaft in einen anderen als den Standardwert 0 (null) umgewandelt wird, wird ein- ValueChanged Ereignis ausgelöst.If a ValueChanged event handler has been attached at the time that the Value property is coerced to something other than its default value of 0, then a ValueChanged event is fired. Hier ist ein Code Ausschnitt von XAML:Here's a snippet of XAML:

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

Wenn Minimum auf 10 festgelegt ist, Value wird auch auf 10 festgelegt, und das- ValueChanged Ereignis wird ausgelöst.When Minimum is set to 10, Value is also set to 10, and the ValueChanged event is fired. Dies kann vorkommen, bevor der Rest der Seite erstellt wurde, und der Handler versucht möglicherweise, auf andere Elemente auf der Seite zu verweisen, die noch nicht erstellt wurden.This might occur before the rest of the page has been constructed, and the handler might attempt to reference other elements on the page that have not yet been created. Möglicherweise möchten Sie dem Handler Code hinzufügen ValueChanged , der null auf Werte anderer Elemente auf der Seite prüft.You might want to add some code to the ValueChanged handler that checks for null values of other elements on the page. Oder Sie können den ValueChanged Ereignishandler festlegen, nachdem die Slider Werte initialisiert wurden.Or, you can set the ValueChanged event handler after the Slider values have been initialized.

Platt Form Implementierungs UnterschiedePlatform implementation differences

In den zuvor gezeigten Screenshots wird der Wert von Slider mit einer unterschiedlichen Anzahl von Dezimalstellen angezeigt.The screenshots shown earlier display the value of the Slider with a different number of decimal points. Dies bezieht sich auf Slider die Implementierung von auf Android-und UWP-Plattformen.This relates to how the Slider is implemented on the Android and UWP platforms.

Die Android-ImplementierungThe Android implementation

Die Android-Implementierung von Slider basiert auf Android SeekBar und legt die- Max Eigenschaft immer auf 1000 fest.The Android implementation of Slider is based on the Android SeekBar and always sets the Max property to 1000. Dies bedeutet, dass unter Slider Android nur 1.001 diskrete Werte aufweist.This means that the Slider on Android has only 1,001 discrete values. Wenn Sie das Slider -Objekt auf den Minimum Wert 0 und den Maximum Wert 5000 festgelegt haben, Slider hat die- Value Eigenschaft den Wert 0, 5, 10, 15 usw., wenn der manipuliert wird.If you set the Slider to have a Minimum of 0 and a Maximum of 5000, then as the Slider is manipulated, the Value property has values of 0, 5, 10, 15, and so forth.

Die UWP-ImplementierungThe UWP implementation

Die UWP-Implementierung von Slider basiert auf dem UWP- Slider Steuerelement.The UWP implementation of Slider is based on the UWP Slider control. Die StepFrequency -Eigenschaft der UWP Slider wird auf den Unterschied der Maximum Eigenschaften und Minimum dividiert durch 10, aber nicht größer als 1 festgelegt.The StepFrequency property of the UWP Slider is set to the difference of the Maximum and Minimum properties divided by 10, but not greater than 1.

Für den Standardbereich von 0 bis 1 wird die-Eigenschaft beispielsweise StepFrequency auf 0,1 festgelegt.For example, for the default range of 0 to 1, the StepFrequency property is set to 0.1. Da die- Slider Eigenschaft bearbeitet wird, ist die- Value Eigenschaft auf 0, 0,1, 0,2, 0,3, 0,4, 0,5, 0,6, 0,7, 0,8, 0,9 und 1,0 beschränkt.As the Slider is manipulated, the Value property is restricted to 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, and 1.0. (Dies ist auf der letzten Seite des sliderdemos -Beispiels ersichtlich.) Wenn der Unterschied zwischen der Maximum -Eigenschaft und der- Minimum Eigenschaft 10 oder größer ist, StepFrequency wird auf 1 festgelegt, und die-Eigenschaft weist ganzzahlige Value Werte auf.(This is evident in the last page in the SliderDemos sample.) When the difference between the Maximum and Minimum properties is 10 or greater, then StepFrequency is set to 1, and the Value property has integral values.

Die stepslider-LösungThe StepSlider solution

Eine ausführlichere Beschreibung StepSlider wird in Kapitel 27 erläutert. Benutzerdefinierte Renderer des Buchs, * Xamarin.Forms mit dem Mobile Apps erstellt *wird.A more versatile StepSlider is discussed in Chapter 27. Custom renderers of the book Creating Mobile Apps with Xamarin.Forms. Der StepSlider ähnelt, Slider fügt jedoch eine Steps Eigenschaft hinzu, um die Anzahl der Werte zwischen Minimum und anzugeben Maximum .The StepSlider is similar to Slider but adds a Steps property to specify the number of values between Minimum and Maximum.

Schieberegler für FarbauswahlSliders for color selection

Die letzten zwei Seiten im sliderdemos -Beispiel verwenden jeweils drei Slider Instanzen für die Farbauswahl.The final two pages in the SliderDemos sample both use three Slider instances for color selection. Die erste Seite verarbeitet alle Interaktionen in der Code Behind-Datei, während die zweite Seite zeigt, wie die Datenbindung mit einem ViewModel verwendet wird.The first page handles all the interactions in the code-behind file, while the second page shows how to use data binding with a ViewModel.

Behandeln von Schiebereglern in der Code-Behind-DateiHandling Sliders in the code-behind file

Die RGB-Farb Schieberegler -Seite instanziiert ein BoxView -Element, um eine Farbe, drei Slider -Instanzen zum Auswählen der roten, grünen und blauen Komponenten der Farbe und drei Label Elemente zum Anzeigen dieser Farbwerte anzuzeigen:The RGB Color Sliders page instantiates a BoxView to display a color, three Slider instances to select the red, green, and blue components of the color, and three Label elements for displaying those color values:

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

Ein-Wert Style gibt alle drei Slider Elemente mit einem Bereich von 0 bis 255 an.A Style gives all three Slider elements a range of 0 to 255. Die Slider Elemente verwenden denselben ValueChanged Handler, der in der Code-Behind-Datei implementiert ist:The Slider elements share the same ValueChanged handler, which is implemented in the code-behind file:

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

Im ersten Abschnitt wird die- Text Eigenschaft einer der- Label Instanzen auf eine kurze Text Zeichenfolge festgelegt, die den Wert von Slider in Hexadezimal angibt.The first section sets the Text property of one of the Label instances to a short text string indicating the value of the Slider in hexadecimal. Anschließend wird auf alle drei Slider Instanzen zugegriffen, um einen Color Wert aus den RGB-Komponenten zu erstellen:Then, all three Slider instances are accessed to create a Color value from the RGB components:

RGB-Farb SchiebereglerRGB Color Sliders

Binden des Schiebereglers an ein ViewModelBinding the Slider to a ViewModel

Die Seite HSL-Farb Schieberegler zeigt, wie ein ViewModel verwendet wird, um die Berechnungen auszuführen, mit denen ein Color Wert aus Farbton-, Sättigungs-und Helligkeits Werten erstellt wird.The HSL Color Sliders page shows how to use a ViewModel to perform the calculations used to create a Color value from hue, saturation, and luminosity values. Wie alle ViewModels implementiert die- HSLColorViewModel Klasse die INotifyPropertyChanged -Schnittstelle und löst ein- PropertyChanged Ereignis aus, wenn sich eine der Eigenschaften ändert:Like all ViewModels, the HSLColorViewModel class implements the INotifyPropertyChanged interface, and fires a PropertyChanged event whenever one of the properties changes:

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 und die- INotifyPropertyChanged Schnittstelle werden im Artikel Datenbindungerläutert.ViewModels and the INotifyPropertyChanged interface are discussed in the article Data Binding.

Die Datei hslcolorsliderspage. XAML instanziiert HslColorViewModel und legt Sie auf die-Eigenschaft der Seite fest BindingContext .The HslColorSlidersPage.xaml file instantiates the HslColorViewModel and sets it to the page's BindingContext property. Dadurch können alle Elemente in der XAML-Datei an Eigenschaften im ViewModel gebunden werden:This allows all the elements in the XAML file to bind to properties in the 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>

Wenn die Slider Elemente manipuliert werden, BoxView werden das-Element und das- Label Element aus ViewModel aktualisiert:As the Slider elements are manipulated, the BoxView and Label elements are updated from the ViewModel:

HSL-Farb SchiebereglerHSL Color Sliders

Die StringFormat Komponente der Binding Markup Erweiterung wird für das Format "F2" festgelegt, um zwei Dezimalstellen anzuzeigen.The StringFormat component of the Binding markup extension is set for a format of "F2" to display two decimal places. (Die Zeichen folgen Formatierung in Daten Bindungen wird im Artikel Zeichen folgen Formatierungerläutert.) Die UWP-Version des Programms ist jedoch auf die Werte 0, 0,1, 0,2,... 0,9 und 1,0.(String formatting in data bindings is discussed in the article String Formatting.) However, the UWP version of the program is limited to values of 0, 0.1, 0.2, ... 0.9, and 1.0. Dies ist ein direktes Ergebnis der Implementierung der UWP, Slider wie oben im Abschnitt Unterschiede bei der Platt Form Implementierungbeschrieben.This is a direct result of the implementation of the UWP Slider as described above in the section Platform implementation differences.