Freigeben über

Xamarin.Forms Einführung in Formatvorlagen

  • Artikel

Formatvorlagen ermöglichen die Anpassung visueller Elemente. Stile werden für einen bestimmten Typ definiert und enthalten Werte für die Eigenschaften, die für diesen Typ verfügbar sind.

Xamarin.Forms Anwendungen enthalten häufig mehrere Steuerelemente, die eine identische Darstellung aufweisen. Eine Anwendung kann z. B. mehrere Label Instanzen mit den gleichen Schriftartoptionen und Layoutoptionen haben, wie im folgenden XAML-Codebeispiel gezeigt:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="Styles.NoStylesPage"
    Title="No Styles"
    IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Label Text="These labels"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="are not"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
            <Label Text="using styles"
                   HorizontalOptions="Center"
                   VerticalOptions="CenterAndExpand"
                   FontSize="Large" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Im folgenden Codebeispiel wird die Erstellung der entsprechenden Seite in C# dargestellt:

public class NoStylesPageCS : ContentPage
{
    public NoStylesPageCS ()
    {
        Title = "No Styles";
        IconImageSource = "csharp.png";
        Padding = new Thickness (0, 20, 0, 0);

        Content = new StackLayout {
            Children = {
                new Label {
                    Text = "These labels",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "are not",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                },
                new Label {
                    Text = "using styles",
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.CenterAndExpand,
                    FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label))
                }
            }
        };
    }
}

Jede Label Instanz verfügt über identische Eigenschaftswerte zum Steuern der Darstellung des texts, der von der Label. Dies ergibt die in den folgenden Screenshots gezeigte Darstellung:

Beschriftungsdarstellung ohne Formatvorlagen

Das Festlegen der Darstellung jedes einzelnen Steuerelements kann sich wiederholend und fehleranfällig sein. Stattdessen kann ein Stil erstellt werden, der die Darstellung definiert. Dieser Stil kann dann auf die benötigten Steuerelemente angewendet werden.

Erstellen eines Stils

Die Klasse Style gruppiert eine Sammlung von Eigenschaftswerten in ein Objekt, das anschließend auf mehrere Instanzen von visuellen Elementen angewendet werden kann. Dies trägt dazu bei, sich wiederholendes Markup zu reduzieren und eine Anwendungsdarstellung einfacher zu ändern.

Obwohl Stile hauptsächlich für XAML-basierte Anwendungen entwickelt wurden, können sie auch in C# erstellt werden:

  • Style In XAML erstellte Instanzen werden in der Regel in einer ResourceDictionary Resources Auflistung eines Steuerelements, einer Seite oder der Resources Auflistung der Anwendung definiert.
  • Style In C# erstellte Instanzen werden in der Regel in der Klasse der Seite oder in einer Klasse definiert, auf die global zugegriffen werden kann.

Die Entscheidung, wo Sie eine Style-Klasse definieren, hat Einfluss darauf, wo Sie sie verwenden können:

  • Style Instanzen, die auf Steuerelementebene definiert sind, können nur auf das Steuerelement und die untergeordneten Elemente angewendet werden.
  • Style Instanzen, die auf Seitenebene definiert sind, können nur auf die Seite und die untergeordneten Elemente angewendet werden.
  • Eine auf Anwendungsebene definierte Style-Instanz können Sie für die gesamte Anwendung nutzen.

Jede Style-Instanz enthält eine Sammlung mit mindestens einem Setter-Objekt. Dabei weist jedes Setter-Objekt eine Property und einen Value auf. Property ist der Name der bindbaren Eigenschaft des Elements, auf das die Formatvorlage angewendet wird, und Value ist der Wert, der auf die Eigenschaft angewendet wird.

Jede Style Instanz kann explizit oder implizit sein:

  • Eine explizite Style Instanz wird durch Angeben eines TargetType x:Key Werts und durch Festlegen der Eigenschaft des Zielelements Style auf den x:Key Verweis definiert. Weitere Informationen zu expliziten Formatvorlagen finden Sie unter "Explizite Formatvorlagen".
  • Eine implizite Style Instanz wird definiert, indem nur ein TargetType. Die Style Instanz wird dann automatisch auf alle Elemente dieses Typs angewendet. Beachten Sie, dass Unterklassen der TargetType App nicht automatisch angewendet werden Style . Weitere Informationen zu impliziten Stilen finden Sie unter Implizite Stile.

Wenn Sie eine Style-Instanz erstellen, wird immer die Eigenschaft TargetType benötigt. Das folgende Codebeispiel zeigt eine explizite Formatvorlage (beachten Sie die x:Keyin XAML erstellte) Formatvorlage:

<Style x:Key="labelStyle" TargetType="Label">
    <Setter Property="HorizontalOptions" Value="Center" />
    <Setter Property="VerticalOptions" Value="CenterAndExpand" />
    <Setter Property="FontSize" Value="Large" />
</Style>

Um ein StyleObjekt anzuwenden, muss es sich um ein VisualElement Objekt handeln, das dem TargetType Eigenschaftswert des StyleObjekts entspricht, wie im folgenden XAML-Codebeispiel gezeigt:

<Label Text="Demonstrating an explicit style" Style="{StaticResource labelStyle}" />

In der Ansichtshierarchie haben die untergeordneten Stile Vorrang vor den übergeordneten Stilen. Das Festlegen eines Style Werts, der auf Anwendungsebene festgelegt Label.TextColor Red wird, wird z. B. durch ein Seitenebenenformat überschrieben, das auf Label.TextColor Green. Ebenso wird eine Formatvorlage auf Seitenebene durch eine Steuerelementebenenformatvorlage überschrieben. Wenn Label.TextColor direkt auf eine Steuerelementeigenschaft gesetzt wird, hat dies außerdem Vorrang vor allen Stilen.

Die Artikel in diesem Abschnitt veranschaulichen und erläutern, wie explizite und implizite Stile erstellt und angewendet werden, wie globale Stile, Formatvererbung, Reaktion auf Formatänderungen zur Laufzeit und verwendung der integrierten Formatvorlagen verwendet werden, die in Xamarin.Formsdiesem Abschnitt enthalten sind.

Hinweis

Was ist StyleId?

Xamarin.Forms Vor 2.2 wurde die StyleId Eigenschaft verwendet, um einzelne Elemente in einer Anwendung zur Identifizierung bei Benutzeroberflächentests und in Designmodulen wie Pixate zu identifizieren. Xamarin.Forms 2.2 führte jedoch die AutomationId Eigenschaft ein, die die StyleId Eigenschaft abgelöst hat.