Aplicativos de estilo usando Folhas de Estilos em Cascata

Os aplicativos da interface do usuário de aplicativo multiplataforma do .NET (.NET MAUI) podem ser estilizados usando Folhas de Estilos em Cascata (CSS). Uma folha de estilos consiste de uma lista de regras, com cada regra consistindo de um ou mais seletores e um bloco de declaração. Um bloco de declaração consiste de uma lista de declarações entre chaves, com cada declaração consistindo de uma propriedade, dois pontos e um valor. Quando existem várias declarações em um bloco, um ponto e vírgula é inserido como separador.

O exemplo a seguir mostra algumas opções de CSS compatíveis com .NET MAUI:

navigationpage {
    -maui-bar-background-color: lightgray;
}

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
    -maui-spacing: 6;
}

grid {
    row-gap: 6;
    column-gap: 6;
}
.mainPageTitle {
    font-style: bold;
    font-size: 14;
}

.mainPageSubtitle {
    margin-top: 15;
}

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

listview image {
    height: 60;
    width: 60;
}

stacklayout>image {
    height: 200;
    width: 200;
}

No .NET MAUI, as folhas de estilo CSS são analisadas e avaliadas no runtime, não no momento da compilação, e as folhas de estilo são analisadas novamente quando em uso.

Consumir uma folha de estilos

O processo para adicionar uma folha de estilos a um aplicativo .NET MAUI é o seguinte:

1. Adicione um arquivo CSS vazio ao seu projeto de aplicativo do .NET MAUI. O arquivo CSS pode ser colocado em qualquer pasta, com a pasta Recursos sendo o local recomendado.
2. Defina a ação de compilar do arquivo CSS como MauiCss.

Como carregar uma folha de estilos

Existem várias abordagens que podem ser usadas para carregar uma folha de estilos.

Carregar uma folha de estilos em XAML

Uma folha de estilos pode ser carregada e analisada com a classe StyleSheet antes de ser adicionada a um ResourceDictionary:

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </Application.Resources>
</Application>

A propriedade StyleSheet.Source especifica a folha de estilos como um URI com relação ao local do arquivo XAML delimitado ou com relação à raiz do projeto, se o URI começar com um /.

Alternativamente, uma folha de estilos pode ser carregada e analisada com a classe StyleSheet, antes de ser adicionada a um ResourceDictionary, ao ser incorporada a uma seção CDATA:

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet>
            <![CDATA[
            ^contentpage {
                background-color: lightgray;
            }
            ]]>
        </StyleSheet>
    </ContentPage.Resources>
    ...
</ContentPage>

Para obter mais informações sobre dicionários de recursos, confira Dicionários de recursos.

Carregar uma folha de estilos em C#

No C#, uma folha de estilos pode ser carregada a partir de um StringReader e adicionada a um ResourceDictionary:

using Microsoft.Maui.Controls.StyleSheets;

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

        using (var reader = new StringReader("^contentpage { background-color: lightgray; }"))
        {
            this.Resources.Add(StyleSheet.FromReader(reader));
        }
    }
}

O argumento para o método StyleSheet.FromReader é o TextReader que leu a folha de estilos.

Selecionar elementos e aplicar propriedades

O CSS usa seletores para determinar quais elementos serão visados. Os estilos com seletores combinando são aplicados de forma consecutiva, na ordem da definição. Os estilos definidos em um item específico são sempre aplicados por último. Para obter mais informações sobre seletores com suporte, confira Referência de seletores.

O CSS usa propriedades para definir o estilo de um elemento selecionado. Cada propriedade tem um conjunto de valores possíveis e algumas propriedades podem afetar qualquer tipo de elemento, enquanto outras se aplicam a grupos de elementos. Para obter mais informações sobre propriedades com suporte, confira Referência de propriedades.

As folhas de estilo filhas sempre substituem as folhas de estilo pai se definirem as mesmas propriedades. Portanto, as seguintes regras de precedência são seguidas ao aplicar estilos que definem as mesmas propriedades:

• Um estilo definido nos recursos do aplicativo será substituído por um estilo definido nos recursos da página, se definirem as mesmas propriedades.
• Um estilo definido nos recursos da página será substituído por um estilo definido nos recursos de controle, se definirem as mesmas propriedades.
• Um estilo definido nos recursos do aplicativo será substituído por um estilo definido nos recursos de controle, se definirem as mesmas propriedades.

Selecionar elementos por tipo

Os elementos na árvore visual podem ser selecionados por tipo com o seletor de element, que não diferencia maiúsculas de minúsculas:

stacklayout {
    margin: 20;
}

Esse seletor identifica todos os elementos de StackLayout nas páginas que consomem a folha de estilos e define suas margens como uma espessura uniforme de 20.

Como selecionar elementos por classe base

Os elementos na árvore visual podem ser selecionados pela classe base com o seletor de ^base, que não diferencia maiúsculas de minúsculas:

^contentpage {
    background-color: lightgray;
}

Esse seletor identifica todos os elementos de ContentPage que consomem a folha de estilos e define a cor da tela de fundo como lightgray.

Como selecionar um elemento por nome

Elementos individuais na árvore visual podem ser selecionados com o seletor de #id, que diferencia maiúsculas de minúsculas:

#listView {
    background-color: lightgray;
}

Esse seletor identifica o elemento cuja propriedade StyleId é definida como listView. No entanto, se a propriedade StyleId não estiver definida, o seletor irá retroceder e usar o x:Name do elemento. Portanto, no exemplo a seguir, o seletor #listView irá identificar o ListView cujo atributo x:Name está definido como listView e definir a cor da tela de fundo como lightgray.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView x:Name="listView">
            ...
        </ListView>
    </StackLayout>
</ContentPage>

Selecionar elementos com um atributo de classe específico

Elementos com um atributo de classe específico podem ser selecionados com o seletor de .class que diferencia maiúsculas de minúsculas:

.detailPageTitle {
    font-style: bold;
    font-size: 14;
    text-align: center;
}

.detailPageSubtitle {
    text-align: center;
    font-style: italic;
}

Uma classe de CSS pode ser atribuída a um elemento XAML ao definir a propriedade StyleClass do elemento como o nome da classe de CSS. Portanto, no exemplo a seguir, os estilos definidos pela classe .detailPageTitle são atribuídos ao primeiro Label, enquanto os estilos definidos pela classe .detailPageSubtitle são atribuídos ao segundo Label.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            <Label ... StyleClass="detailPageTitle" />
            <Label ... StyleClass="detailPageSubtitle"/>
        </StackLayout>
    </ScrollView>
</ContentPage>

Selecionar elementos filhos

Os elementos filhos na árvore visual podem ser selecionados com o seletor de element element que não diferencia maiúsculas de minúsculas:

listview image {
    height: 60;
    width: 60;
}

Esse seletor identifica todos os elementos Image que são filhos de elementos ListView e define sua altura e largura como 60. Portanto, no exemplo de XAML a seguir, o seletor listview image irá identificar o Image, que é filho da ListView, e definir sua altura e largura como 60.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <StackLayout>
        <ListView ...>
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            ...
                            <Image ... />
                            ...
                        </Grid>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage>

Selecionar elementos filhos diretos

Os elementos filhos diretos na árvore visual podem ser selecionados com o seletor element>element, que não diferencia maiúsculas de minúsculas:

stacklayout>image {
    height: 200;
    width: 200;
}

Esse seletor identifica todos os elementos Image que são filhos diretos de elementos StackLayout e define sua altura e largura como 200. Portanto, no exemplo a seguir, o seletor stacklayout>image irá identificar o Image que é um filho direto do StackLayout e definir sua altura e largura como 200.

<ContentPage ...>
    <ContentPage.Resources>
        <StyleSheet Source="/Resources/styles.css" />
    </ContentPage.Resources>
    <ScrollView>
        <StackLayout>
            ...
            <Image ... />
            ...
        </StackLayout>
    </ScrollView>
</ContentPage>

Referência de seletores

Os seguintes seletores de CSS são compatíveis com o .NET MAUI:

Os estilos com seletores combinando são aplicados de forma consecutiva, na ordem da definição. Os estilos definidos em um item específico são sempre aplicados por último.

Os seletores a seguir não têm suporte:

• [attribute]
• @media e @supports
• : e ::

Referência de propriedade

As seguintes propriedades de CSS são compatíveis com o .NET MAUI (na coluna Valores, os tipos são em itálico, enquanto os literais de cadeia de caracteres são gray):

As seguintes propriedades não têm suporte:

• all: initial.
• Propriedades de layout (caixa ou grade).
• Propriedades abreviadas, como font e border.

Além disso, não existe nenhum valor inherit e, portanto, a herança não tem suporte. Portanto, você não pode, por exemplo, definir a propriedade font-size em um layout e esperar que todas as instâncias de Label no layout herdem o valor. A única exceção é a propriedade direction, que tem um valor padrão inherit.

Propriedades específicas do .NET MAUI

As seguintes propriedades de CSS específicas para o .NET MAUI também têm suporte (na coluna Valores, os tipos são em itálico, enquanto os literais de cadeia de caracteres são gray):

Propriedades específicas do Shell do .NET MAUI

As seguintes propriedades de CSS específicas para o Shell do .NET MAUI também têm suporte (na coluna Valores, os tipos são em itálico, enquanto os literais de cadeia de caracteres são gray):

Color

Há suporte para os seguintes valores de color:

• cores X11, que correspondem às cores do CSS e às cores do .NET MAUI. Esses valores de cor não diferenciam maiúsculas de minúsculas.
• cores hexadecimais: #rgb, #argb, #rrggbb, #aarrggbb
• cores rgb: rgb(255,0,0), rgb(100%,0%,0%). Os valores estão no intervalo de 0 a 255, ou 0%-100%.
• cores rgba: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). O valor de opacidade está no intervalo 0,0-1,0.
• cores hsl: hsl(120, 100%, 50%). O valor h está no intervalo de 0-360, enquanto s e l estão no intervalo 0%-100%.
• cores hsla: hsla(120, 100%, 50%, .8). O valor de opacidade está no intervalo 0,0-1,0.

Espessura

Os valores de thickness um, dois, três ou quatro têm suporte, cada um separado por um espaço em branco:

• Um único valor indica uma espessura uniforme.
• Dois valores indicam espessura vertical e, a seguir, horizontal.
• Três valores indicam a espessura da parte superior, horizontal (esquerda e direita) e da parte inferior, nesta ordem.
• Quatro valores indicam a espessura da parte superior, da direita, da parte inferior e da esquerda, nesta ordem.

Funções

Gradientes lineares e radiais podem ser especificados usando as funções CSS linear-gradient() e radial-gradient(), respectivamente. O resultado dessas funções deve ser atribuído à propriedade background de um controle.