Estilos CSS

Artigo
08/22/2023

Importante

Este projeto é uma versão experimental. Esperamos que você experimente associações blazor móveis experimentais e forneça comentários em https://github.com/xamarin/MobileBlazorBindings.

Visão geral

Os aplicativos criados usando associações blazor móveis têm uma variedade de estilos que podem ser aplicados para controlar a aparência da interface do usuário. Esses estilos podem ser aplicados diretamente aos componentes ou podem ser aplicados usando CSS (Folhas de Estilos em Cascata). Algumas das vantagens de usar css em vez de estilos diretos é que ele permite uma melhor separação de preocupações (ou seja, manter estilos de componente separados de seu layout e funcionalidade) e permitir o possível compartilhamento de CSS com outras mídias (por exemplo, um aplicativo Web).

Incluindo CSS em um projeto

Para adicionar o CSS a um projeto de Associações do Blazor Móvel:

No projeto de interface do usuário compartilhado do aplicativo, clique com o botão direito do mouse em qualquer pasta e selecione Adicionar –> Adicionar Novo Item e selecione o tipo de item Folha de Estilos (se você não conseguir encontrá-lo, use o recurso de pesquisa para localizar style sheet).
Escolha um nome apropriado para sua folha de estilos e pressione Adicionar.
Edite o conteúdo do arquivo CSS conforme necessário (veja abaixo os estilos com suporte). Por exemplo, para definir todos os rótulos para ter um large tamanho de fonte:
```
label {
    font-size: large;
}
```
Abra o .razor arquivo no qual você deseja usar o CSS.

Observação

Muitos aplicativos terão um único arquivo CSS incluído na página main do aplicativo.
Adicione a marcação a .razor seguir ao arquivo, normalmente no nível superior do arquivo. Alterando o nome e o caminho do arquivo CSS para corresponder ao que você criou:
```
<StyleSheet Resource="folder/MyStyles.css" Assembly="GetType().Assembly"></StyleSheet>
```

Observação

O suporte a CSS requer referência ao Xamarin.Forms 4.5 ou mais recente. Para atualizar essa referência, gerencie os pacotes NuGet para a solução e verifique se a solução está usando uma versão do Xamarin.Forms 4.5 ou mais recente. As versões futuras do Mobile Blazor Bindings incluirão essa versão por padrão.

Aplicando CSS a componentes

Os estilos CSS são declarados no arquivo CSS usando a sintaxe CSS padrão. Os estilos são especificados usando seletores, que permitem aplicar estilos com base no tipo de elemento, classe base, nome, atributo de classe e vários outros meios (veja abaixo a referência do Xamarin.Forms).

.razor No arquivo em cada componente que permite estilos CSS, você pode definir a classe ou o nome por meio das class propriedades e StyleId , respectivamente.

Observação

Elementos que dão suporte a estilos CSS também têm uma StyleClass propriedade , que é equivalente à class propriedade . Se você precisar usar a class propriedade programaticamente do C#, use a sintaxe @classde escape , como myElement.@class, ou use a StyleClass propriedade , como myElement.StyleClass.

Exemplo de arquivo CSS:

/* this rule applies to all labels */
label {
    font-size: large;
}

/* these rules apply only when this class is specified */
.happyText {
    color: green;
}

.sadText {
    color: red;
}

Exemplo de snippet de arquivo Razor:

<Label Text="Seattle" /> @* no class specified, so only 'label' rule applied *@
<Label class="happyText" Text="Weather: good" /> @* class is specified, so 'label' rule and '.happyText' rules applied *@
<Label class="sadText" Text="Traffic: bad" /> @* class is specified, so 'label' rule and '.sadText' rules applied *@

Estilos CSS com suporte

Como os componentes internos da interface do usuário são baseados em controles do Xamarin.Forms, consulte Estilo de aplicativos Xamarin.Forms usando CSS para saber mais sobre esse recurso e quais estilos podem ser aplicados a quais componentes.

Solução de problemas

Definir a ação de build como recurso inserido

Ao adicionar um novo arquivo CSS no Visual Studio, o arquivo CSS deve ter Build Action seu conjunto automaticamente como para Embedded resource garantir que ele seja incluído no projeto compilado. Se não estiver, clique com o botão direito do mouse no arquivo CSS, selecione Propriedades e defina Build Action como Embedded resource.

Usar a sintaxe de caminho correta para CSS em subpastas

Se o arquivo CSS estiver localizado em uma pasta, especifique seu nome usando seu caminho com barras de avanço como separadores de caminho. Por exemplo, se o arquivo CSS for <PROJECT ROOT>/assets/styles/MyApp.css, a marcação para incluí-lo em um .razor arquivo será:

<StyleSheet Resource="assets/styles/MyApp.css" Assembly="GetType().Assembly"></StyleSheet>

Compartilhar via