Поделиться через

Глобальные стили в Xamarin.Forms

Стили можно сделать доступными глобально, добавив их в словарь ресурсов приложения. Это помогает избежать дублирования стилей на страницах или элементах управления.

Создание глобального стиля в XAML

По умолчанию все Xamarin.Forms приложения, созданные на основе шаблона, используют класс App для реализации подкласса Application . Чтобы объявить Style приложение на уровне приложения, в приложении ResourceDictionary с помощью XAML класс приложения по умолчанию должен быть заменен классом приложения XAML и связанным кодом. Дополнительные сведения см. в разделе "Работа с классом приложения".

В следующем примере кода показан объявленный Style на уровне приложения:

<Application xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.App">
    <Application.Resources>
        <ResourceDictionary>
            <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="VerticalOptions" Value="CenterAndExpand" />
                <Setter Property="BorderColor" Value="Lime" />
                <Setter Property="BorderRadius" Value="5" />
                <Setter Property="BorderWidth" Value="5" />
                <Setter Property="WidthRequest" Value="200" />
                <Setter Property="TextColor" Value="Teal" />
            </Style>
        </ResourceDictionary>
    </Application.Resources>
</Application>

Это ResourceDictionary определяет один явный стиль, buttonStyleкоторый будет использоваться для задания внешнего вида Button экземпляров. Однако глобальные стили могут быть явными или неявными.

В следующем примере кода показана страница XAML, применяемая buttonStyle к экземплярам страницы Button :

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <Button Text="These buttons" Style="{StaticResource buttonStyle}" />
            <Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
            <Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Результат показан на следующих снимках экрана:

Пример глобальных стилей

Сведения о создании стилей на странице ResourceDictionaryсм. в разделе "Явные стили " и "Неявные стили".

Переопределение стилей

Стили ниже в иерархии представлений имеют приоритет над теми, кто определен выше. Например, установка Style заданного значения Button.TextColor Red на уровне приложения будет переопределена стилем уровня страницы, в котором задано значение Button.TextColor Green. Аналогичным образом стиль уровня страницы переопределяется стилем уровня управления. Кроме того, если Button.TextColor задано непосредственно в свойстве элемента управления, это будет иметь приоритет над любыми стилями. Этот приоритет показан в следующем примере кода:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Styles.ApplicationStylesPage" Title="Application" IconImageSource="xaml.png">
    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="buttonStyle" TargetType="Button">
                ...
                <Setter Property="TextColor" Value="Red" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <ContentPage.Content>
        <StackLayout Padding="0,20,0,0">
            <StackLayout.Resources>
                <ResourceDictionary>
                    <Style x:Key="buttonStyle" TargetType="Button">
                        ...
                        <Setter Property="TextColor" Value="Blue" />
                    </Style>
                </ResourceDictionary>
            </StackLayout.Resources>
            <Button Text="These buttons" Style="{StaticResource buttonStyle}" />
            <Button Text="are demonstrating" Style="{StaticResource buttonStyle}" />
            <Button Text="application style overrides" Style="{StaticResource buttonStyle}" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

Исходный buttonStyle, определенный на уровне приложения, переопределяется экземпляром buttonStyle , определенным на уровне страницы. Кроме того, стиль уровня страницы переопределяется уровнем buttonStyleуправления. Таким образом, Button экземпляры отображаются синим текстом, как показано на следующих снимках экрана:

Пример переопределения стилей

Создание глобального стиля в C#

Style Экземпляры можно добавить в коллекцию приложения Resources в C# путем создания нового ResourceDictionaryэкземпляра, а затем путем добавления Style экземпляров в ResourceDictionaryколлекцию, как показано в следующем примере кода:

public class App : Application
{
    public App ()
    {
        var buttonStyle = new Style (typeof(Button)) {
            Setters = {
                ...
                new Setter { Property = Button.TextColorProperty,    Value = Color.Teal }
            }
        };

        Resources = new ResourceDictionary ();
        Resources.Add ("buttonStyle", buttonStyle);
        ...
    }
    ...
}

Конструктор определяет один явный стиль применения к Button экземплярам во всем приложении. Явные Style экземпляры добавляются в ResourceDictionary метод с помощью Add метода, указывая key строку для ссылки на Style экземпляр. Затем Style экземпляр можно применить к любым элементам управления правильного типа в приложении. Однако глобальные стили могут быть явными или неявными.

В следующем примере кода показана страница C#, применяемая buttonStyle к экземплярам страницы Button :

public class ApplicationStylesPageCS : ContentPage
{
    public ApplicationStylesPageCS ()
    {
        ...
        Content = new StackLayout {
            Children = {
                new Button { Text = "These buttons", Style = (Style)Application.Current.Resources ["buttonStyle"] },
                new Button { Text = "are demonstrating", Style = (Style)Application.Current.Resources ["buttonStyle"] },
                new Button { Text = "application styles", Style = (Style)Application.Current.Resources ["buttonStyle"]
                }
            }
        };
    }
}

Он buttonStyle применяется к Button экземплярам путем задания их Style свойств и управления внешним видом Button экземпляров.

  • Last updated on