Xamarin.Forms: Visual State-Manager Visual State Manager

Beispiel herunterladen Das Beispiel herunterladenDownload Sample Download the sample

Verwenden Sie den Visual State Manager, um Änderungen an XAML-Elementen auf der Grundlage von visuellen Zuständen vorzunehmen, die aus Code festgelegt wurdenUse the Visual State Manager to make changes to XAML elements based on visual states set from code.

Der Visual State Manager (VSM) stellt eine strukturierte Möglichkeit dar, visuelle Änderungen an der Benutzeroberfläche aus dem Code vorzunehmen.The Visual State Manager (VSM) provides a structured way to make visual changes to the user interface from code. In den meisten Fällen wird die Benutzeroberfläche der Anwendung in XAML definiert, und dieses XAML enthält Markup, das beschreibt, wie sich der visuelle Zustands-Manager auf die visuellen Elemente der Benutzeroberfläche auswirkt.In most cases, the user interface of the application is defined in XAML, and this XAML includes markup describing how the Visual State Manager affects the visuals of the user interface.

Das VSM führt das Konzept der _visuellen Zustände_ein.The VSM introduces the concept of visual states. Eine Ansicht, wie z. b., Xamarin.Forms Button kann je nach dem zugrunde liegenden Zustand — , ob Sie deaktiviert oder gedrückt ist oder den Eingabefokus besitzt, verschiedene visuelle Darstellungen aufweisen.A Xamarin.Forms view such as a Button can have several different visual appearances depending on its underlying state — whether it's disabled, or pressed, or has input focus. Dies sind die Zustände der Schaltfläche.These are the button's states.

Visuelle Zustände werden in _visuellen Zustands Gruppen_gesammelt.Visual states are collected in visual state groups. Alle visuellen Zustände innerhalb einer visuellen Zustands Gruppe schließen sich gegenseitig aus.All the visual states within a visual state group are mutually exclusive. Visuelle Zustände und visuelle Zustands Gruppen werden durch einfache Text Zeichenfolgen identifiziert.Both visual states and visual state groups are identified by simple text strings.

Der Xamarin.Forms Visual State Manager definiert eine visuelle Zustands Gruppe mit dem Namen "CommonStates" mit den folgenden visuellen Zuständen:The Xamarin.Forms Visual State Manager defines one visual state group named "CommonStates" with the following visual states:

  • "Normal""Normal"
  • Deaktiviert"Disabled"
  • Gestellt"Focused"
  • Gewählte"Selected"

Diese visuelle Zustands Gruppe wird für alle Klassen unterstützt, die von abgeleitet VisualElement werden. Dies ist die Basisklasse für View und Page .This visual state group is supported for all classes that derive from VisualElement, which is the base class for View and Page.

Sie können auch eigene visuelle Zustands Gruppen und visuelle Zustände definieren, wie in diesem Artikel veranschaulicht wird.You can also define your own visual state groups and visual states, as this article will demonstrate.

Hinweis

Xamarin.FormsEntwickler, die mit Triggern vertraut sind, wissen, dass Trigger auch Änderungen an visuellen Elementen in der Benutzeroberfläche basierend auf Änderungen in den Eigenschaften einer Ansicht oder dem Auslösen von Ereignissen vornehmen können. developers familiar with triggers are aware that triggers can also make changes to visuals in the user interface based on changes in a view's properties or the firing of events. Die Verwendung von Triggern für verschiedene Kombinationen dieser Änderungen kann jedoch etwas verwirrend werden.However, using triggers to deal with various combinations of these changes can become quite confusing. In der Vergangenheit wurde der Visual State Manager in Windows XAML-basierten Umgebungen eingeführt, um die Verwirrung zu verringern, die sich aus Kombinationen von visuellen Zuständen ergibt.Historically, the Visual State Manager was introduced in Windows XAML-based environments to alleviate the confusion resulting from combinations of visual states. Beim VSM schließen sich die visuellen Zustände innerhalb einer visuellen Zustands Gruppe immer gegenseitig aus.With the VSM, the visual states within a visual state group are always mutually exclusive. Zu jedem Zeitpunkt ist nur ein Status in jeder Gruppe der aktuelle Zustand.At any time, only one state in each group is the current state.

Allgemeine ZuständeCommon states

Der Visual State Manager ermöglicht das Einschließen von Markup in die XAML-Datei, die die visuelle Darstellung einer Ansicht ändern kann, wenn die Ansicht Normal oder deaktiviert ist oder den Eingabefokus besitzt.The Visual State Manager allows you to include markup in your XAML file that can change the visual appearance of a view if the view is normal, or disabled, or has the input focus. Diese werden als _allgemeine Zustände_bezeichnet.These are known as the common states.

Angenommen, Sie haben eine Entry Ansicht auf der Seite, und Sie möchten, dass die visuelle Darstellung von auf Entry folgende Weise geändert wird:For example, suppose you have an Entry view on your page, and you want the visual appearance of the Entry to change in the following ways:

  • Der Entry sollte einen rosa Hintergrund haben, wenn Entry deaktiviert ist.The Entry should have a pink background when the Entry is disabled.
  • Der Entry sollte in der Regel über einen Kalk Hintergrund verfügen.The Entry should have a lime background normally.
  • Der Wert Entry sollte auf eine doppelte Größe erweitert werden, wenn er den Eingabefokus besitzt.The Entry should expand to twice its normal height when it has input focus.

Sie können das VSM-Markup an eine einzelne Ansicht anfügen, oder Sie können es in einem Stil definieren, wenn es für mehrere Ansichten gilt.You can attach the VSM markup to an individual view, or you can define it in a style if it applies to multiple views. In den nächsten beiden Abschnitten werden diese Vorgehensweisen beschrieben.The next two sections describe these approaches.

VSM-Markup für eine AnsichtVSM markup on a view

Um das VSM-Markup an eine Ansicht anzufügen, müssen Sie Entry zunächst die Entry in Start-und Endtags aufteilen:To attach VSM markup to an Entry view, first separate the Entry into start and end tags:

<Entry FontSize="18">

</Entry>

Ihm wird eine explizite Schriftgröße zugewiesen, da einer der Zustände die- FontSize Eigenschaft verwendet, um die Größe des Texts in der zu verdoppeln Entry .It's given an explicit font size because one of the states will use the FontSize property to double the size of the text in the Entry.

Fügen Sie als nächstes VisualStateManager.VisualStateGroups Tags zwischen diesen Tags ein:Next, insert VisualStateManager.VisualStateGroups tags between those tags:

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>

    </VisualStateManager.VisualStateGroups>
</Entry>

VisualStateGroupsist eine angefügte bindbare Eigenschaft, die von der-Klasse definiert wird VisualStateManager .VisualStateGroups is an attached bindable property defined by the VisualStateManager class. (Weitere Informationen zu Eigenschaften angehängter Bindungen finden Sie im Artikel angefügte Eigenschaften.) Auf diese Weise wird die- VisualStateGroups Eigenschaft an das-Objekt angefügt Entry .(For more information on attached bindable properties, see the article Attached properties.) This is how the VisualStateGroups property is attached to the Entry object.

Die- VisualStateGroups Eigenschaft ist vom Typ VisualStateGroupList , bei dem es sich um eine Auflistung von-Objekten handelt VisualStateGroup .The VisualStateGroups property is of type VisualStateGroupList, which is a collection of VisualStateGroup objects. VisualStateManager.VisualStateGroupsFügen Sie innerhalb der Tags ein Tagpaar VisualStateGroup für jede Gruppe von visuellen Zuständen ein, die Sie einschließen möchten:Within the VisualStateManager.VisualStateGroups tags, insert a pair of VisualStateGroup tags for each group of visual states you wish to include:

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">

        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Entry>

Beachten Sie, dass das- VisualStateGroup Tag über ein Attribut verfügt, x:Name das den Namen der Gruppe angibt.Notice that the VisualStateGroup tag has an x:Name attribute indicating the name of the group. Die- VisualStateGroup Klasse definiert eine Name Eigenschaft, die Sie stattdessen verwenden können:The VisualStateGroup class defines a Name property that you can use instead:

<VisualStateGroup Name="CommonStates">

Sie können entweder x:Name oder, Name aber nicht beides im selben Element verwenden.You can use either x:Name or Name but not both in the same element.

Die- VisualStateGroup Klasse definiert eine Eigenschaft States mit dem Namen, die eine Auflistung von- VisualState Objekten ist.The VisualStateGroup class defines a property named States, which is a collection of VisualState objects. Statesist die Content-Eigenschaft von, VisualStateGroups sodass Sie die VisualState Tags direkt zwischen den VisualStateGroup Tags einschließen können.States is the content property of VisualStateGroups so you can include the VisualState tags directly between the VisualStateGroup tags. (Inhalts Eigenschaften werden im Artikel grundlegende XAML-Syntaxerläutert.)(Content properties are discussed in the article Essential XAML Syntax.)

Der nächste Schritt besteht darin, ein Tagpaar für jeden visuellen Zustand in dieser Gruppe einzuschließen.The next step is to include a pair of tags for every visual state in that group. Diese können auch mithilfe von oder identifiziert werden x:Name Name :These also can be identified using x:Name or Name:

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">

            </VisualState>

            <VisualState x:Name="Focused">

            </VisualState>

            <VisualState x:Name="Disabled">

            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Entry>

VisualStatedefiniert eine Eigenschaft Setters mit dem Namen, die eine Auflistung von- Setter Objekten ist.VisualState defines a property named Setters, which is a collection of Setter objects. Dabei handelt es sich um dieselben Setter Objekte, die Sie in einem- Style Objekt verwenden.These are the same Setter objects that you use in a Style object.

Settersist nicht die Content-Eigenschaft von. VisualState daher ist es erforderlich, Eigenschaften Element Tags für die-Eigenschaft einzuschließen Setters :Setters is not the content property of VisualState, so it is necessary to include property element tags for the Setters property:

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>

                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Focused">
                <VisualState.Setters>

                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Disabled">
                <VisualState.Setters>

                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Entry>

Sie können jetzt ein oder mehrere Setter Objekte zwischen jedem Tagpaar einfügen Setters .You can now insert one or more Setter objects between each pair of Setters tags. Dies sind die Setter Objekte, die die zuvor beschriebenen visuellen Zustände definieren:These are the Setter objects that define the visual states described earlier:

<Entry FontSize="18">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Lime" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Focused">
                <VisualState.Setters>
                    <Setter Property="FontSize" Value="36" />
                </VisualState.Setters>
            </VisualState>

            <VisualState x:Name="Disabled">
                <VisualState.Setters>
                    <Setter Property="BackgroundColor" Value="Pink" />
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Entry>

Jedes Setter Tag gibt den Wert einer bestimmten Eigenschaft an, wenn dieser Zustand aktuell ist.Each Setter tag indicates the value of a particular property when that state is current. Jede Eigenschaft, auf die von einem- Setter Objekt verwiesen wird, muss durch eine bindbare Eigenschaft unterstützt werden.Any property referenced by a Setter object must be backed by a bindable property.

Ein ähnliches Markup ist die Grundlage für die VSM auf der Ansichts Seite im vsmdemos -Beispielprogramm.Markup similar to this is the basis of the VSM on View page in the VsmDemos sample program. Die Seite enthält drei Entry Ansichten, aber nur für den zweiten ist das VSM-Markup angefügt:The page includes three Entry views, but only the second one has the VSM markup attached to it:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:VsmDemos"
             x:Class="VsmDemos.MainPage"
             Title="VSM Demos">

    <StackLayout>
        <StackLayout.Resources>
            <Style TargetType="Entry">
                <Setter Property="Margin" Value="20, 0" />
                <Setter Property="FontSize" Value="18" />
            </Style>

            <Style TargetType="Label">
                <Setter Property="Margin" Value="20, 30, 20, 0" />
                <Setter Property="FontSize" Value="Large" />
            </Style>
        </StackLayout.Resources>

        <Label Text="Normal Entry:" />
        <Entry />
        <Label Text="Entry with VSM: " />
        <Entry>
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Lime" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Focused">
                        <VisualState.Setters>
                            <Setter Property="FontSize" Value="36" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState x:Name="Disabled">
                        <VisualState.Setters>
                            <Setter Property="BackgroundColor" Value="Pink" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <Entry.Triggers>
                <DataTrigger TargetType="Entry"
                             Binding="{Binding Source={x:Reference entry3},
                                               Path=Text.Length}"
                             Value="0">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Entry.Triggers>
        </Entry>
        <Label Text="Entry to enable 2nd Entry:" />
        <Entry x:Name="entry3"
               Text=""
               Placeholder="Type something to enable 2nd Entry" />
    </StackLayout>
</ContentPage>

Beachten Sie, dass der zweite Entry auch über einen DataTrigger als Teil der-Auflistung verfügt Trigger .Notice that the second Entry also has a DataTrigger as part of its Trigger collection. Dadurch wird das Entry deaktiviert, bis etwas in das dritte eingegeben wird Entry .This causes the Entry to be disabled until something is typed into the third Entry. Hier ist die Seite beim Start, die unter IOS, Android und der universelle Windows-Plattform (UWP) ausgeführt wird:Here's the page at startup running on iOS, Android, and the Universal Windows Platform (UWP):

VSM in Ansicht: deaktiviertVSM on View: Disabled

Der aktuelle visuelle Zustand ist "deaktiviert", sodass der Hintergrund der zweiten Entry auf den IOS-und Android-Bildschirmen Rosa ist.The current visual state is "Disabled" so the background of the second Entry is pink on the iOS and Android screens. Die UWP-Implementierung von Entry lässt das Festlegen der Hintergrundfarbe nicht zu, wenn Entry deaktiviert ist.The UWP implementation of Entry does not allow setting the background color when the Entry is disabled.

Wenn Sie Text in das dritte eingeben Entry , wechselt der zweite Entry in den "normalen" Zustand, und der Hintergrund ist jetzt "Kalk":When you enter some text into the third Entry, the second Entry switches into the "Normal" state, and the background is now lime:

VSM in Ansicht: normalVSM on View: Normal

Wenn Sie die zweite berühren Entry , erhält Sie den Eingabefokus.When you touch the second Entry, it gets the input focus. Es wechselt in den Zustand "fokussiert" und wird um die doppelte Höhe erweitert:It switches to the "Focused" state and expands to twice its height:

VSM in Ansicht: FokusVSM on View: Focused

Beachten Sie, dass der den Entry Kalk Hintergrund nicht beibehält, wenn er den Eingabefokus erhält.Notice that the Entry does not retain the lime background when it gets the input focus. Wenn der Visual State-Manager zwischen den visuellen Zuständen wechselt, werden die Eigenschaften, die vom vorherigen Zustand festgelegt wurden, nicht festgelegt.As the Visual State Manager switches between the visual states, the properties set by the previous state are unset. Beachten Sie, dass sich die visuellen Zustände gegenseitig ausschließen.Keep in mind that the visual states are mutually exclusive. Der Status "Normal" bedeutet nicht nur, dass die Entry aktiviert ist.The "Normal" state does not mean solely that the Entry is enabled. Dies bedeutet, dass der Entry aktiviert ist und keinen Eingabefokus hat.It means that the Entry is enabled and does not have input focus.

Wenn das-Element Entry einen Kalk-Hintergrund im Zustand "fokussiert" aufweisen soll, fügen Sie einen weiteren Setter zu diesem visuellen Zustand hinzu:If you want the Entry to have a lime background in the "Focused" state, add another Setter to that visual state:

<VisualState x:Name="Focused">
    <VisualState.Setters>
        <Setter Property="FontSize" Value="36" />
        <Setter Property="BackgroundColor" Value="Lime" />
    </VisualState.Setters>
</VisualState>

Damit diese Setter Objekte ordnungsgemäß funktionieren, muss ein- VisualStateGroup VisualState Objekt für alle Zustände in dieser Gruppe enthalten sein.In order for these Setter objects to work properly, a VisualStateGroup must contain VisualState objects for all the states in that group. Wenn es einen visuellen Zustand gibt, der keine Objekte enthält Setter , schließen Sie ihn trotzdem als leeres Tag ein:If there is a visual state that does not have any Setter objects, include it anyway as an empty tag:

<VisualState x:Name="Normal" />

Visual State-Manager-Markup in einem StilVisual State Manager markup in a style

Häufig ist es erforderlich, dass Sie das gleiche Visual State Manager-Markup für zwei oder mehr Ansichten verwenden.It's often necessary to share the same Visual State Manager markup among two or more views. In diesem Fall möchten Sie das Markup in eine Style Definition einfügen.In this case, you'll want to put the markup in a Style definition.

Im folgenden finden Sie die vorhandenen impliziten Style für die Entry Elemente auf der Seite VSM auf der Ansichts Seite:Here's the existing implicit Style for the Entry elements in the VSM On View page:

<Style TargetType="Entry">
    <Setter Property="Margin" Value="20, 0" />
    <Setter Property="FontSize" Value="18" />
</Style>

SetterTags für die VisualStateManager.VisualStateGroups angefügte bindbare Eigenschaft hinzufügen:Add Setter tags for the VisualStateManager.VisualStateGroups attached bindable property:

<Style TargetType="Entry">
    <Setter Property="Margin" Value="20, 0" />
    <Setter Property="FontSize" Value="18" />
    <Setter Property="VisualStateManager.VisualStateGroups">

    </Setter>
</Style>

Die Content-Eigenschaft für Setter ist Value , sodass der Wert der Value Eigenschaft direkt innerhalb dieser Tags angegeben werden kann.The content property for Setter is Value, so the value of the Value property can be specified directly within those tags. Diese Eigenschaft hat den folgenden Typ VisualStateGroupList :That property is of type VisualStateGroupList:

<Style TargetType="Entry">
    <Setter Property="Margin" Value="20, 0" />
    <Setter Property="FontSize" Value="18" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>

        </VisualStateGroupList>
    </Setter>
</Style>

Innerhalb dieser Tags können Sie eines der folgenden VisualStateGroup Objekte einschließen:Within those tags you can include one of more VisualStateGroup objects:

<Style TargetType="Entry">
    <Setter Property="Margin" Value="20, 0" />
    <Setter Property="FontSize" Value="18" />
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">

            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
</Style>

Der Rest des VSM-Markups ist das gleiche wie zuvor.The remainder of the VSM markup is the same as before.

Dies ist das VSM auf der Seite "Style", das das komplette VSM-Markup anzeigt:Here's the VSM in Style page showing the complete VSM markup:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="VsmDemos.VsmInStylePage"
             Title="VSM in Style">
    <StackLayout>
        <StackLayout.Resources>
            <Style TargetType="Entry">
                <Setter Property="Margin" Value="20, 0" />
                <Setter Property="FontSize" Value="18" />
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Lime" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Focused">
                                <VisualState.Setters>
                                    <Setter Property="FontSize" Value="36" />
                                    <Setter Property="BackgroundColor" Value="Lime" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Disabled">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="Pink" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

            <Style TargetType="Label">
                <Setter Property="Margin" Value="20, 30, 20, 0" />
                <Setter Property="FontSize" Value="Large" />
            </Style>
        </StackLayout.Resources>

        <Label Text="Normal Entry:" />
        <Entry />
        <Label Text="Entry with VSM: " />
        <Entry>
            <Entry.Triggers>
                <DataTrigger TargetType="Entry"
                             Binding="{Binding Source={x:Reference entry3},
                                               Path=Text.Length}"
                             Value="0">
                    <Setter Property="IsEnabled" Value="False" />
                </DataTrigger>
            </Entry.Triggers>
        </Entry>
        <Label Text="Entry to enable 2nd Entry:" />
        <Entry x:Name="entry3"
               Text=""
               Placeholder="Type something to enable 2nd Entry" />
    </StackLayout>
</ContentPage>

Nun reagieren alle Entry Ansichten auf dieser Seite auf die gleiche Weise wie Ihre visuellen Zustände.Now all the Entry views on this page respond the same way to their visual states. Beachten Sie auch, dass der "fokussierte" Zustand jetzt eine Sekunde enthält Setter , die jeweils Entry einen Kalk Hintergrund enthält, wenn Sie den Eingabefokus besitzt:Notice also that the "Focused" state now includes a second Setter that gives each Entry a lime background also when it has input focus:

VSM im StilVSM in Style

Visuelle Zustände inXamarin.FormsVisual states in Xamarin.Forms

In der folgenden Tabelle sind die visuellen Zustände aufgeführt, die in definiert sind Xamarin.Forms :The following table lists the visual states that are defined in Xamarin.Forms:

KlasseClass ZuständeStates Weitere InformationenMore Information
Button Pressed Visuelle Schaltflächen für FlächenButton visual states
CheckBox IsChecked Kontrollkästchen visuelle ZuständeCheckBox visual states
CarouselView DefaultItem, CurrentItem, PreviousItem, NextItemDefaultItem, CurrentItem, PreviousItem, NextItem Visuelle Zustände von carouselviewCarouselView visual states
ImageButton Pressed Visuelle Status von ImageButtonImageButton visual states
RadioButton IsChecked Visuelle Zustände von RadioButtonRadioButton visual states
Switch On, OffOn, Off Visuelle Zustände wechselnSwitch visual states
VisualElement Normal, Disabled, Focused, SelectedNormal, Disabled, Focused, Selected Allgemeine ZuständeCommon states

Auf jeden dieser Zustände kann über die visuelle Zustands Gruppe mit dem Namen zugegriffen werden CommonStates .Each of these states can be accessed through the visual state group named CommonStates.

Außerdem implementiert den- CollectionView Selected Zustand.In addition, the CollectionView implements the Selected state. Weitere Informationen finden Sie unter Ändern der Farbe des ausgewählten Elements.For more information, see Change selected item color.

Festlegen des Zustands für mehrere ElementeSet state on multiple elements

In den vorherigen Beispielen wurden visuelle Zustände an einzelne Elemente angefügt und verarbeitet.In the previous examples, visual states were attached to and operated on single elements. Es ist jedoch auch möglich, visuelle Zustände zu erstellen, die an ein einzelnes Element angefügt sind, aber Eigenschaften für andere Elemente innerhalb desselben Bereichs festlegen.However, it's also possible to create visual states that are attached to a single element, but that set properties on other elements within the same scope. Dadurch wird vermieden, dass visuelle Zustände für jedes Element wiederholt werden müssen, auf dem die Zustände arbeiten.This avoids having to repeat visual states on each element the states operate on.

Der- Setter Typ verfügt über eine- TargetName Eigenschaft vom Typ string , die das Ziel Element darstellt, das Setter für einen visuellen Zustand bearbeitet wird.The Setter type has a TargetName property, of type string, that represents the target element that the Setter for a visual state will manipulate. Wenn die- TargetName Eigenschaft definiert ist, Setter legt den Property des in definierten Elements TargetName auf fest Value :When the TargetName property is defined, the Setter sets the Property of the element defined in TargetName to Value:

<Setter TargetName="label"
        Property="Label.TextColor"
        Value="Red" />

In diesem Beispiel Label label wird die-Eigenschaft eines mit dem Namen TextColor auf festgelegt Red .In this example, a Label named label will have its TextColor property set to Red. Wenn Sie die- TargetName Eigenschaft festlegen, müssen Sie den vollständigen Pfad zur-Eigenschaft in angeben Property .When setting the TargetName property you must specify the full path to the property in Property. Daher wird zum Festlegen der- TextColor Eigenschaft für ein-Objekt Label Property als angegeben Label.TextColor .Therefore, to set the TextColor property on a Label, Property is specified as Label.TextColor.

Hinweis

Jede Eigenschaft, auf die von einem- Setter Objekt verwiesen wird, muss durch eine bindbare Eigenschaft unterstützt werden.Any property referenced by a Setter object must be backed by a bindable property.

Die Seite VSM mit Setter TargetName im vsmdemos -Beispiel zeigt, wie der Status für mehrere Elemente aus einer einzelnen visuellen Zustands Gruppe festgelegt wird.The VSM with Setter TargetName page in the VsmDemos sample shows how to set state on multiple elements, from a single visual state group. Die XAML-Datei besteht aus einer, die StackLayout ein Label -Element, ein Entry -Element und ein-Element enthält Button :The XAML file consists of a StackLayout containing a Label element, an Entry, and a Button:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="VsmDemos.VsmSetterTargetNamePage"
             Title="VSM with Setter TargetName">
    <StackLayout Margin="10">
        <Label Text="What is the capital of France?" />
        <Entry x:Name="entry"
               Placeholder="Enter answer" />
        <Button Text="Reveal answer">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal" />
                    <VisualState x:Name="Pressed">
                        <VisualState.Setters>
                            <Setter Property="Scale"
                                    Value="0.8" />
                            <Setter TargetName="entry"
                                    Property="Entry.Text"
                                    Value="Paris" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        </Button>
    </StackLayout>
</ContentPage>

Das VSM-Markup ist an das angefügt StackLayout .VSM markup is attached to the StackLayout. Es gibt zwei gegenseitig ausschließende Zustände mit dem Namen "Normal" und "gedrückt", wobei jeder Zustand VisualState Tags enthält.There are two mutually-exclusive states, named "Normal" and "Pressed", with each state containing VisualState tags.

Der Status "Normal" ist aktiv, wenn das Button nicht gedrückt wird und eine Antwort auf die Frage eingegeben werden kann:The "Normal" state is active when the Button isn't pressed, and a response to the question can be entered:

VSM Setter TargetName: normaler StatusVSM Setter TargetName: Normal State

Der Zustand "gedrückt" wird aktiv, wenn Button gedrückt wird:The "Pressed" state becomes active when the Button is pressed:

VSM Setter TargetName: gedrückter ZustandVSM Setter TargetName: Pressed State

Das "gedrückt" VisualState gibt an, dass die- Button Eigenschaft beim Drücken Scale von auf den Standardwert von 1 bis 0,8 geändert wird.The "Pressed" VisualState specifies that when the Button is pressed, its Scale property will be changed from the default value of 1 to 0.8. Außerdem wird die- Entry Eigenschaft des namens entry Text auf Paris festgelegt.In addition, the Entry named entry will have its Text property set to Paris. Das Ergebnis ist daher, dass bei Button gedrückter-Taste ein etwas kleiner wird, und das Entry zeigt Paris an.Therefore, the result is that when the Button is pressed it's rescaled to be slightly smaller, and the Entry displays Paris. Wenn der Button freigegeben wird, wird er auf den Standardwert 1 umgestellt, und der Entry zeigt alle zuvor eingegebenen Text an.Then, when the Button is released it's rescaled to its default value of 1 ,and the Entry displays any previously entered text.

Wichtig

Eigenschafts Pfade werden derzeit nicht in-Elementen unterstützt Setter , die die- TargetName Eigenschaft angeben.Property paths are currently unsupported in Setter elements that specify the TargetName property.

Definieren Ihrer eigenen visuellen ZuständeDefine your own visual states

Jede Klasse, die von abgeleitet wird, VisualElement unterstützt die allgemeinen Zustände "Normal", "fokussiert" und "deaktiviert".Every class that derives from VisualElement supports the common states "Normal", "Focused", and "Disabled". Außerdem CollectionView unterstützt die-Klasse den Status "ausgewählt".In addition, the CollectionView class supports the "Selected" state. Intern erkennt die VisualElement -Klasse, wann Sie aktiviert oder deaktiviert wird, oder konzentriert bzw. ohne Fokus ist, und ruft die statische [ VisualStateManager.GoToState ] (Xref:) auf Xamarin.Forms . VisualStateManager. godestate ( Xamarin.Forms . Visualelement, System. String))-Methode:Internally, the VisualElement class detects when it's becoming enabled or disabled, or focused or unfocused, and calls the static VisualStateManager.GoToState method:

VisualStateManager.GoToState(this, "Focused");

Dies ist der einzige Code des visuellen Zustands-Managers, den Sie in der- VisualElement Klasse finden.This is the only Visual State Manager code that you'll find in the VisualElement class. Da GoToState für jedes-Objekt basierend auf jeder Klasse aufgerufen wird, die von abgeleitet wird VisualElement , können Sie den visuellen Zustands-Manager mit jedem-Objekt verwenden, VisualElement um auf diese Änderungen zu reagieren.Because GoToState is called for every object based on every class that derives from VisualElement, you can use the Visual State Manager with any VisualElement object to respond to these changes.

Interessanterweise wird in auf den Namen der visuellen Zustands Gruppe "CommonStates" nicht explizit verwiesen VisualElement .Interestingly, the name of the visual state group "CommonStates" is not explicitly referenced in VisualElement. Der Gruppenname ist nicht Teil der API für den Visual State Manager.The group name is not part of the API for the Visual State Manager. Innerhalb eines der beiden bisher gezeigten Beispiel Programme können Sie den Namen der Gruppe von "CommonStates" in beliebige andere ändern, und das Programm funktioniert weiterhin.Within one of the two sample program shown so far, you can change the name of the group from "CommonStates" to anything else, and the program will still work. Der Gruppenname ist lediglich eine allgemeine Beschreibung der Zustände in dieser Gruppe.The group name is merely a general description of the states in that group. Es ist implizit zu verstehen, dass die visuellen Zustände in jeder Gruppe sich gegenseitig ausschließen: ein einziger Status und immer nur ein Status ist aktuell.It is implicitly understood that the visual states in any group are mutually exclusive: One state and only one state is current at any time.

Wenn Sie Ihre eigenen visuellen Zustände implementieren möchten, müssen Sie den VisualStateManager.GoToState Code aus dem Code abrufen.If you want to implement your own visual states, you'll need to call VisualStateManager.GoToState from code. In den meisten Fällen wird dieser Befehl aus der Code Behind-Datei Ihrer Page-Klasse aufgerufen.Most often you'll make this call from the code-behind file of your page class.

Die Seite VSM -Überprüfung im vsmdemos -Beispiel zeigt, wie Sie den visuellen Zustands-Manager in Verbindung mit der Eingabevalidierung verwenden.The VSM Validation page in the VsmDemos sample shows how to use the Visual State Manager in connection with input validation. Die XAML-Datei besteht aus einer StackLayout , die zwei Label Elemente enthält Entry :, und Button .The XAML file consists of a StackLayout containing two Label elements, an Entry, and a Button:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="VsmDemos.VsmValidationPage"
             Title="VSM Validation">
    <StackLayout x:Name="stackLayout"
                 Padding="10, 10">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="ValidityStates">
                    <VisualState Name="Valid">
                        <VisualState.Setters>
                            <Setter TargetName="helpLabel"
                                    Property="Label.TextColor"
                                    Value="Transparent" />
                            <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Lime" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Invalid">
                        <VisualState.Setters>
                            <Setter TargetName="entry"
                                    Property="Entry.BackgroundColor"
                                    Value="Pink" />
                            <Setter TargetName="submitButton"
                                    Property="Button.IsEnabled"
                                    Value="False" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
        <Label Text="Enter a U.S. phone number:"
               FontSize="Large" />
        <Entry x:Name="entry"
               Placeholder="555-555-5555"
               FontSize="Large"
               Margin="30, 0, 0, 0"
               TextChanged="OnTextChanged" />
        <Label x:Name="helpLabel"
               Text="Phone number must be of the form 555-555-5555, and not begin with a 0 or 1" />
        <Button x:Name="submitButton"
                Text="Submit"
                FontSize="Large"
                Margin="0, 20"
                VerticalOptions="Center"
                HorizontalOptions="Center" />
    </StackLayout>
</ContentPage>

VSM-Markup ist an den StackLayout (mit dem Namen) angefügt stackLayout .VSM markup is attached to the StackLayout (named stackLayout). Es gibt zwei gegenseitig ausschließende Zustände mit dem Namen "valid" und "invalid", wobei jeder Zustand VisualState Tags enthält.There are two mutually-exclusive states, named "Valid" and "Invalid", with each state containing VisualState tags.

Wenn das Entry keine gültige Telefonnummer enthält, ist der aktuelle Zustand "ungültig", und das Entry hat einen rosa Hintergrund, das zweite Label ist sichtbar, und das Button ist deaktiviert:If the Entry does not contain a valid phone number, then the current state is "Invalid", and so the Entry has a pink background, the second Label is visible, and the Button is disabled:

VSM-Überprüfung: Ungültiger StatusVSM Validation: Invalid State

Wenn eine gültige Telefonnummer eingegeben wird, wird der aktuelle Status "gültig".When a valid phone number is entered, then the current state becomes "Valid". Der Entry erhält einen Kalk Hintergrund, der zweite Label verschwindet, und der Button ist nun aktiviert:The Entry gets a lime background, the second Label disappears, and the Button is now enabled:

VSM-Überprüfung: gültiger StatusVSM Validation: Valid State

Die Code-Behind-Datei ist für die Behandlung des- TextChanged Ereignisses aus der verantwortlich Entry .The code-behind file is responsible for handling the TextChanged event from the Entry. Der Handler verwendet einen regulären Ausdruck, um zu bestimmen, ob die Eingabe Zeichenfolge gültig ist.The handler uses a regular expression to determine if the input string is valid or not. Die-Methode in der Code Behind-Datei mit dem Namen GoToState Ruft die statische- VisualStateManager.GoToState Methode für auf stackLayout :The method in the code-behind file named GoToState calls the static VisualStateManager.GoToState method for stackLayout:

public partial class VsmValidationPage : ContentPage
{
    public VsmValidationPage()
    {
        InitializeComponent();

        GoToState(false);
    }

    void OnTextChanged(object sender, TextChangedEventArgs args)
    {
        bool isValid = Regex.IsMatch(args.NewTextValue, @"^[2-9]\d{2}-\d{3}-\d{4}$");
        GoToState(isValid);
    }

    void GoToState(bool isValid)
    {
        string visualState = isValid ? "Valid" : "Invalid";
        VisualStateManager.GoToState(stackLayout, visualState);
    }
}

Beachten Sie auch, dass die- GoToState Methode vom-Konstruktor aufgerufen wird, um den Status zu initialisieren.Notice also that the GoToState method is called from the constructor to initialize the state. Es sollte immer ein aktueller Zustand vorhanden sein.There should always be a current state. Im Code gibt es jedoch keinen Verweis auf den Namen der visuellen Zustands Gruppe, obwohl in XAML als "ValidationStates" aus Gründen der Übersichtlichkeit darauf verwiesen wird.But nowhere in the code is there any reference to the name of the visual state group, although it's referenced in the XAML as "ValidationStates" for purposes of clarity.

Beachten Sie, dass die Code Behind-Datei nur das Objekt auf der Seite berücksichtigen muss, das die visuellen Zustände definiert, und VisualStateManager.GoToState für dieses Objekt aufzurufen.Notice that the code-behind file only needs to take account of the object on the page that defines the visual states, and to call VisualStateManager.GoToState for this object. Dies liegt daran, dass beide visuellen Zustände mehrere Objekte auf der Seite als Ziel haben.This is because both visual states target multiple objects on the page.

Vielleicht Fragen Sie sich: Wenn die Code-Behind-Datei auf das Objekt auf der Seite verweisen muss, die die visuellen Zustände definiert, warum kann die Code-Behind-Datei nicht einfach direkt auf dieses und andere Objekte zugreifen?You might wonder: If the code-behind file must reference the object on the page that defines the visual states, why can't the code-behind file simply access this and other objects directly? Dies könnte sicherlich der Fall sein.It surely could. Der Vorteil der Verwendung des VSM besteht jedoch darin, dass Sie steuern können, wie visuelle Elemente vollständig in XAML auf einen anderen Zustand reagieren, wodurch der gesamte Benutzeroberflächen Entwurf an einem Ort beibehalten wird.However, the advantage of using the VSM is that you can control how visual elements react to different state entirely in XAML, which keeps all of the UI design in one location. Dadurch wird das Festlegen der visuellen Darstellung vermieden, indem direkt aus dem Code-Behind auf visuelle Elemente zugegriffen wird.This avoids setting visual appearance by accessing visual elements directly from the code-behind.

Trigger für visuellen ZustandVisual state triggers

Visuelle Zustände unterstützen Zustands Trigger, bei denen es sich um eine spezialisierte Gruppe von Triggern handelt, die die Bedingungen definieren, unter denen eine VisualState angewendet werden soll.Visual states support state triggers, which are a specialized group of triggers that define the conditions under which a VisualState should be applied.

Zustandstrigger werden der Sammlung StateTriggers eines VisualState hinzugefügt.State triggers are added to the StateTriggers collection of a VisualState. Diese Sammlung kann Trigger mit einem oder mehreren Zustandstriggern enthalten.This collection can contain a single state trigger, or multiple state triggers. Ein VisualState wird angewendet, wenn alle Zustandstrigger in der Sammlung aktiv sind.A VisualState will be applied when any state triggers in the collection are active.

Bei Verwendung von Zustandstriggern zur Steuerung visueller Zustände befolgt Xamarin.Forms die folgenden Prioritätsregeln, um zu bestimmen, welcher Trigger (und welches entsprechende VisualState-Element) aktiv ist:When using state triggers to control visual states, Xamarin.Forms uses the following precedence rules to determine which trigger (and corresponding VisualState) will be active:

  1. Alle von StateTriggerBase abgeleiteten Trigger.Any trigger that derives from StateTriggerBase.
  2. Ein AdaptiveTrigger, der aktiviert wird, da die Bedingung MinWindowWidth erfüllt ist.An AdaptiveTrigger activated due to the MinWindowWidth condition being met.
  3. Ein AdaptiveTrigger, der aktiviert wird, da die Bedingung MinWindowHeight erfüllt ist.An AdaptiveTrigger activated due to the MinWindowHeight condition being met.

Wenn mehrere Trigger gleichzeitig aktiv sind (z. B. zwei benutzerdefinierte Trigger), hat der erste im Markup deklarierte Trigger Vorrang.If multiple triggers are simultaneously active (for example, two custom triggers) then the first trigger declared in the markup takes precedence.

Weitere Informationen zu Zustandstriggern finden Sie unter Zustandstrigger.For more information about state triggers, see State triggers.

Verwenden des visuellen Zustands-Managers für adaptives LayoutUse the Visual State Manager for adaptive layout

Eine Xamarin.Forms auf einem Telefon ausgeführte Anwendung kann normalerweise in einem hoch-oder Querformat angezeigt werden, und ein Xamarin.Forms Programm, das auf dem Desktop ausgeführt wird, kann geändert werden, um viele verschiedene Größen und Seitenverhältnisse zu übernehmen.A Xamarin.Forms application running on a phone can usually be viewed in a portrait or landscape aspect ratio, and a Xamarin.Forms program running on the desktop can be resized to assume many different sizes and aspect ratios. Eine gut entworfene Anwendung zeigt ihren Inhalt möglicherweise für diese verschiedenen Seiten-oder Fenster Formfaktoren anders an.A well-designed application might display its content differently for these various page or window form factors.

Diese Technik wird manchmal als _Adaptives Layout_bezeichnet.This technique is sometimes known as adaptive layout. Da das adaptive Layout lediglich die visuellen Elemente eines Programms umfasst, ist es eine ideale Anwendung des visuellen Zustands-Managers.Because adaptive layout solely involves a program's visuals, it is an ideal application of the Visual State Manager.

Ein einfaches Beispiel ist eine Anwendung, die eine kleine Auflistung von Schaltflächen anzeigt, die sich auf den Inhalt der Anwendung auswirken.A simple example is an application that displays a small collection of buttons that affect the application's content. Im Hochformat können diese Schaltflächen in einer horizontalen Zeile oben auf der Seite angezeigt werden:In portrait mode, these buttons might be displayed in a horizontal row on the top of the page:

Adaptive VSM-Layout: HochformatVSM Adaptive Layout: Portrait

Im Querformat kann das Array von Schaltflächen auf eine Seite verschoben und in einer Spalte angezeigt werden:In landscape mode, the array of buttons might be moved to one side, and displayed in a column:

Adaptive VSM-Layout: QuerformatVSM Adaptive Layout: Landscape

Von oben nach unten wird das Programm auf den universelle Windows-Plattform, Android und IOS ausgeführt.From top to bottom, the program is running on the Universal Windows Platform, Android, and iOS.

Die Seite für das VSM Adaptive Layout im vsmdemos -Beispiel definiert eine Gruppe mit dem Namen "orientationstates" mit zwei visuellen Zuständen namens "Hochformat" und "Querformat".The VSM Adaptive Layout page in the VsmDemos sample defines a group named "OrientationStates" with two visual states named "Portrait" and "Landscape". (Ein komplexerer Ansatz kann auf verschiedenen Seiten-oder fensterbreiten basieren.)(A more complex approach might be based on several different page or window widths.)

VSM-Markup tritt an vier Stellen in der XAML-Datei auf.VSM markup occurs in four places in the XAML file. Der StackLayout benannte mainStack enthält sowohl das Menü als auch den Inhalt, bei dem es sich um ein Image Element handelt.The StackLayout named mainStack contains both the menu and the content, which is an Image element. Dies StackLayout sollte eine vertikale Ausrichtung im Hochformat und eine horizontale Ausrichtung im Querformat aufweisen:This StackLayout should have a vertical orientation in portrait mode and a horizontal orientation in landscape mode:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="VsmDemos.VsmAdaptiveLayoutPage"
             Title="VSM Adaptive Layout">

    <StackLayout x:Name="mainStack">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup Name="OrientationStates">
                <VisualState Name="Portrait">
                    <VisualState.Setters>
                        <Setter Property="Orientation" Value="Vertical" />
                    </VisualState.Setters>
                </VisualState>
                <VisualState Name="Landscape">
                    <VisualState.Setters>
                        <Setter Property="Orientation" Value="Horizontal" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <ScrollView x:Name="menuScroll">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup Name="OrientationStates">
                    <VisualState Name="Portrait">
                        <VisualState.Setters>
                            <Setter Property="Orientation" Value="Horizontal" />
                        </VisualState.Setters>
                    </VisualState>
                    <VisualState Name="Landscape">
                        <VisualState.Setters>
                            <Setter Property="Orientation" Value="Vertical" />
                        </VisualState.Setters>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>

            <StackLayout x:Name="menuStack">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup Name="OrientationStates">
                        <VisualState Name="Portrait">
                            <VisualState.Setters>
                                <Setter Property="Orientation" Value="Horizontal" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState Name="Landscape">
                            <VisualState.Setters>
                                <Setter Property="Orientation" Value="Vertical" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <StackLayout.Resources>
                    <Style TargetType="Button">
                        <Setter Property="VisualStateManager.VisualStateGroups">
                            <VisualStateGroupList>
                                <VisualStateGroup Name="OrientationStates">
                                    <VisualState Name="Portrait">
                                        <VisualState.Setters>
                                            <Setter Property="HorizontalOptions" Value="CenterAndExpand" />
                                            <Setter Property="Margin" Value="10, 5" />
                                        </VisualState.Setters>
                                    </VisualState>
                                    <VisualState Name="Landscape">
                                        <VisualState.Setters>
                                            <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                                            <Setter Property="HorizontalOptions" Value="Center" />
                                            <Setter Property="Margin" Value="10" />
                                        </VisualState.Setters>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateGroupList>
                        </Setter>
                    </Style>
                </StackLayout.Resources>

                <Button Text="Banana"
                        Command="{Binding SelectedCommand}"
                        CommandParameter="Banana.jpg" />
                <Button Text="Face Palm"
                        Command="{Binding SelectedCommand}"
                        CommandParameter="FacePalm.jpg" />
                <Button Text="Monkey"
                        Command="{Binding SelectedCommand}"
                        CommandParameter="monkey.png" />
                <Button Text="Seated Monkey"
                        Command="{Binding SelectedCommand}"
                        CommandParameter="SeatedMonkey.jpg" />
            </StackLayout>
        </ScrollView>

        <Image x:Name="image"
               VerticalOptions="FillAndExpand"
               HorizontalOptions="FillAndExpand" />
    </StackLayout>
</ContentPage>

Der innere ScrollView menuScroll und der StackLayout benannte menuStack implementieren das Menü der Schaltflächen.The inner ScrollView named menuScroll and the StackLayout named menuStack implement the menu of buttons. Die Ausrichtung dieser Layouts ist gegen mainStack .The orientation of these layouts is opposite of mainStack. Das Menü sollte im Hochformat horizontal und vertikal im Querformat angezeigt werden.The menu should be horizontal in portrait mode and vertical in landscape mode.

Der vierte Abschnitt von VSM-Markup weist einen impliziten Stil für die Schaltflächen auf.The fourth section of VSM markup is in an implicit style for the buttons themselves. Dieses Markup legt VerticalOptions HorizontalOptions Margin die Eigenschaften, und für das hoch-und Querformat fest.This markup sets VerticalOptions, HorizontalOptions, and Margin properties specific to the portrait and landscape orientations.

Mit der Code-Behind-Datei BindingContext wird die-Eigenschaft von auf die Implementierung der Befehlszeile festgelegt. menuStack Button Außerdem wird ein Handler an das- SizeChanged Ereignis der Seite angefügt:The code-behind file sets the BindingContext property of menuStack to implement Button commanding, and also attaches a handler to the SizeChanged event of the page:

public partial class VsmAdaptiveLayoutPage : ContentPage
{
    public VsmAdaptiveLayoutPage ()
    {
        InitializeComponent ();

        SizeChanged += (sender, args) =>
        {
            string visualState = Width > Height ? "Landscape" : "Portrait";
            VisualStateManager.GoToState(mainStack, visualState);
            VisualStateManager.GoToState(menuScroll, visualState);
            VisualStateManager.GoToState(menuStack, visualState);

            foreach (View child in menuStack.Children)
            {
                VisualStateManager.GoToState(child, visualState);
            }
        };

        SelectedCommand = new Command<string>((filename) =>
        {
            image.Source = ImageSource.FromResource("VsmDemos.Images." + filename);
        });

        menuStack.BindingContext = this;
    }

    public ICommand SelectedCommand { private set; get; }
}

Der SizeChanged Handler ruft VisualStateManager.GoToState für die beiden StackLayout Elemente und auf ScrollView und durchläuft dann die untergeordneten Elemente von, menuStack um VisualStateManager.GoToState für die Elemente aufzurufen Button .The SizeChanged handler calls VisualStateManager.GoToState for the two StackLayout and ScrollView elements, and then loops through the children of menuStack to call VisualStateManager.GoToState for the Button elements.

Es mag so aussehen, als ob die Code-Behind-Datei Richtungsänderungen direkt behandeln kann, indem Sie die Eigenschaften der Elemente in der XAML-Datei festlegen, aber der visuelle Zustands-Manager ist definitiv ein strukturierteres Konzept.It may seem as if the code-behind file can handle orientation changes more directly by setting properties of elements in the XAML file, but the Visual State Manager is definitely a more structured approach. Alle visuellen Elemente werden in der XAML-Datei gespeichert, wo Sie leichter zu untersuchen, zu warten und zu ändern sind.All the visuals are kept in the XAML file, where they become easier to examine, maintain, and modify.

Visual State Manager mit xamarin. UniversityVisual State Manager with Xamarin.University

Xamarin.Forms3,0 Visual State Manager-VideoXamarin.Forms 3.0 Visual State Manager video