Udostępnij za pośrednictwem

Wprowadzenie do Xamarin.Forms stylów

  • Artykuł

Style umożliwiają dostosowywanie wyglądu elementów wizualnych. Style są definiowane dla określonego typu i zawierają wartości właściwości dostępnych dla tego typu.

Xamarin.Forms aplikacje często zawierają wiele kontrolek, które mają identyczny wygląd. Na przykład aplikacja może mieć wiele Label wystąpień, które mają te same opcje czcionek i opcje układu, jak pokazano w poniższym przykładzie kodu XAML:

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

Poniższy przykład kodu przedstawia równoważną stronę utworzoną w języku C#:

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

Każde Label wystąpienie ma identyczne wartości właściwości do kontrolowania wyglądu tekstu wyświetlanego Labelprzez element . Spowoduje to wyświetlenie wyglądu pokazanego na poniższych zrzutach ekranu:

Wygląd etykiety bez stylów

Ustawianie wyglądu poszczególnych kontrolek może być powtarzające się i podatne na błędy. Zamiast tego można utworzyć styl definiujący wygląd, a następnie zastosowany do wymaganych kontrolek.

Tworzenie stylu

Klasa Style grupuje kolekcję wartości właściwości w jeden obiekt, który następnie można zastosować do wielu wystąpień elementów wizualnych. Pomaga to zmniejszyć powtarzające się znaczniki i umożliwia łatwiejsze zmianę wyglądu aplikacji.

Mimo że style zostały zaprojektowane głównie dla aplikacji opartych na języku XAML, można je również utworzyć w języku C#:

  • Style wystąpienia utworzone w języku XAML są zwykle definiowane w obiekcie ResourceDictionary przypisanym do Resources kolekcji kontrolki, strony lub Resources kolekcji aplikacji.
  • Style wystąpienia utworzone w języku C# są zwykle definiowane w klasie strony lub w klasie, do której można uzyskać dostęp globalnie.

Wybieranie miejsca definiowania Style wpływu, w którym można go użyć:

  • Style wystąpienia zdefiniowane na poziomie kontrolki można stosować tylko do kontrolki i do jej elementów podrzędnych.
  • Style wystąpienia zdefiniowane na poziomie strony można stosować tylko do strony i jej elementów podrzędnych.
  • Style wystąpienia zdefiniowane na poziomie aplikacji można stosować w całej aplikacji.

Każde Style wystąpienie zawiera kolekcję co najmniej jednego Setter obiektu, z których każda Setter ma obiekt Property i Value. Jest Property to nazwa właściwości możliwej do powiązania elementu, do którego jest stosowany styl, a Value wartość jest stosowana do właściwości .

Każde Style wystąpienie może być jawne lub niejawne:

  • Jawne wystąpienie jest definiowane przez określenie TargetType wartości i x:Key oraz przez ustawienie właściwości elementu Style docelowego na x:Key odwołanie. Style Aby uzyskać więcej informacji na temat jawnych stylów, zobacz Jawne style.
  • Wystąpienie niejawne Style jest definiowane przez określenie tylko .TargetType Wystąpienie Style zostanie następnie automatycznie zastosowane do wszystkich elementów tego typu. Należy pamiętać, że podklasy obiektu TargetType nie są Style automatycznie stosowane. Aby uzyskać więcej informacji na temat niejawnych stylów, zobacz Niejawne style.

Podczas tworzenia Styleobiektu właściwość jest zawsze wymagana TargetType . Poniższy przykład kodu przedstawia jawny styl (zwróć uwagę na x:Key) utworzony w języku XAML:

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

Aby zastosować Styleobiekt , obiekt docelowy musi być obiektem VisualElement zgodnym TargetType z wartością Stylewłaściwości , jak pokazano w poniższym przykładzie kodu XAML:

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

Style niższe w hierarchii widoków mają pierwszeństwo przed zdefiniowanymi wyżej. Na przykład ustawienie wartości ustawianej Style Label.TextColor na Red wartość na poziomie aplikacji zostanie zastąpione przez styl na poziomie strony ustawiony Label.TextColor na Greenwartość . Podobnie styl poziomu strony zostanie zastąpiony stylem poziomu kontrolki. Ponadto jeśli Label.TextColor właściwość kontrolki jest ustawiana bezpośrednio, ma to pierwszeństwo przed dowolnymi stylami.

Artykuły w tej sekcji przedstawiają i wyjaśniają sposób tworzenia i stosowania jawnych i niejawnych stylów, tworzenia stylów globalnych, dziedziczenia stylu, reagowania na zmiany stylu w czasie wykonywania oraz sposobu używania wbudowanych stylów zawartych w programie Xamarin.Forms.

Uwaga

Co to jest identyfikator StyleId?

Xamarin.Forms Przed wersją 2.2 StyleId właściwość była używana do identyfikowania poszczególnych elementów w aplikacji do identyfikacji w testach interfejsu użytkownika oraz w aparatach motywów, takich jak Pixate. Xamarin.Forms Jednak 2.2 wprowadził AutomationId właściwość, która zastępuje StyleId właściwość .