Aplicación de estilos a Xamarin.Forms aplicaciones mediante hojas de estilo CSS (CSS)Styling Xamarin.Forms apps using Cascading Style Sheets (CSS)

Descargar ejemplo Descargar el ejemploDownload Sample Download the sample

Xamarin. Forms admite el estilo de los elementos visuales mediante Hojas de estilo CSS (CSS).Xamarin.Forms supports styling visual elements using Cascading Style Sheets (CSS).

Xamarin.Formslas aplicaciones pueden tener estilo mediante CSS. applications can be styled using CSS. Una hoja de estilos se compone de una lista de reglas, donde cada regla consta de uno o varios selectores y un bloque de declaración.A style sheet consists of a list of rules, with each rule consisting of one or more selectors and a declaration block. Un bloque de declaración se compone de una lista de declaraciones entre llaves, donde cada declaración consta de una propiedad, un signo de dos puntos y un valor.A declaration block consists of a list of declarations in braces, with each declaration consisting of a property, a colon, and a value. Cuando hay varias declaraciones en un bloque, se inserta un punto y coma como separador.When there are multiple declarations in a block, a semi-colon is inserted as a separator. En el ejemplo de código siguiente se muestra alguna Xamarin.Forms CSS compatible:The following code example shows some Xamarin.Forms compliant CSS:

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

^contentpage {
    background-color: lightgray;
}

#listView {
    background-color: lightgray;
}

stacklayout {
    margin: 20;
}

.mainPageTitle {
    font-style: bold;
    font-size: medium;
}

.mainPageSubtitle {
    margin-top: 15;
}

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

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

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

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

En Xamarin.Forms , las hojas de estilos CSS se analizan y evalúan en tiempo de ejecución, en lugar de en tiempo de compilación, y las hojas de estilos se vuelven a analizar en el uso.In Xamarin.Forms, CSS style sheets are parsed and evaluated at runtime, rather than compile time, and style sheets are re-parsed on use.

Nota

Actualmente, todo el estilo que es posible con el estilo XAML no se puede realizar con CSS.Currently, all of the styling that's possible with XAML styling cannot be performed with CSS. Sin embargo, los estilos XAML se pueden usar para complementar CSS para propiedades que actualmente no admite Xamarin.Forms .However, XAML styles can be used to supplement CSS for properties that are currently unsupported by Xamarin.Forms. Para obtener más información sobre los estilos XAML, consulte aplicar estilos a las Xamarin.Forms aplicaciones mediante estilos XAML.For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

En el ejemplo MonkeyAppCSS se muestra cómo usar CSS para aplicar estilo a una aplicación sencilla y se muestra en las siguientes capturas de pantallas:The MonkeyAppCSS sample demonstrates using CSS to style a simple app, and is shown in the following screenshots:

Página principal de MonkeyApp con estilo CSSMonkeyApp Main Page with CSS styling

Página de detalles de MonkeyApp con estilo CSSMonkeyApp Detail Page with CSS styling

Consumir una hoja de estilosConsuming a style sheet

El proceso para agregar una hoja de estilos a una solución es el siguiente:The process for adding a style sheet to a solution is as follows:

  1. Agregue un archivo CSS vacío al proyecto de biblioteca de .NET Standard.Add an empty CSS file to your .NET Standard library project.
  2. Establezca la acción de compilación del archivo CSS en EmbeddedResource.Set the build action of the CSS file to EmbeddedResource.

Cargar una hoja de estilosLoading a style sheet

Existen varios enfoques que se pueden usar para cargar una hoja de estilos.There are a number of approaches that can be used to load a style sheet.

Nota

Actualmente no es posible cambiar una hoja de estilos en tiempo de ejecución y aplicar la nueva hoja de estilos.It's not currently possible to change a style sheet at runtime and have the new style sheet applied.

XAMLXAML

Una hoja de estilos se puede cargar y analizar con la StyleSheet clase antes de que se agregue a un ResourceDictionary :A style sheet can be loaded and parsed with the StyleSheet class before being added to a ResourceDictionary:

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

La StyleSheet.Source propiedad especifica la hoja de estilos como un URI relativo a la ubicación del archivo XAML envolvente, o relativa a la raíz del proyecto si el identificador URI comienza con / .The StyleSheet.Source property specifies the style sheet as a URI relative to the location of the enclosing XAML file, or relative to the project root if the URI starts with a /.

Advertencia

El archivo CSS no se cargará si su acción de compilación no está establecida en EmbeddedResource.The CSS file will fail to load if its build action is not set to EmbeddedResource.

Como alternativa, se puede cargar y analizar una hoja de estilos con la StyleSheet clase, antes de agregarla a ResourceDictionary , si se inserta en una CDATA sección:Alternatively, a style sheet can be loaded and parsed with the StyleSheet class, before being added to a ResourceDictionary, by inlining it in a CDATA section:

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

Para obtener más información acerca de los diccionarios de recursos, consulte diccionarios de recursos.For more information about resource dictionaries, see Resource Dictionaries.

C#C#

En C#, una hoja de estilos se puede cargar desde un StringReader y agregar a un ResourceDictionary :In C#, a style sheet can be loaded from a StringReader and added to a ResourceDictionary:

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

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

El argumento para el StyleSheet.FromReader método es el TextReader que ha leído la hoja de estilos.The argument to the StyleSheet.FromReader method is the TextReader that has read the style sheet.

Seleccionar elementos y aplicar propiedadesSelecting elements and applying properties

CSS usa selectores para determinar los elementos de destino.CSS uses selectors to determine which elements to target. Los estilos con selectores coincidentes se aplican consecutivamente, en orden de definición.Styles with matching selectors are applied consecutively, in definition order. Los estilos definidos en un elemento específico siempre se aplican en último lugar.Styles defined on a specific item are always applied last. Para obtener más información sobre los selectores admitidos, vea Referencia del selector.For more information about supported selectors, see Selector Reference.

CSS utiliza las propiedades para aplicar estilo a un elemento seleccionado.CSS uses properties to style a selected element. Cada propiedad tiene un conjunto de valores posibles y algunas propiedades pueden afectar a cualquier tipo de elemento, mientras que otros se aplican a grupos de elementos.Each property has a set of possible values, and some properties can affect any type of element, while others apply to groups of elements. Para obtener más información sobre las propiedades admitidas, vea referencia de propiedades.For more information about supported properties, see Property Reference.

Importante

No se admiten las variables CSS.CSS variables are unsupported.

Seleccionar elementos por tipoSelecting elements by type

Los elementos del árbol visual se pueden seleccionar por tipo con el selector sin distinción de mayúsculas y minúsculas element :Elements in the visual tree can be selected by type with the case insensitive element selector:

stacklayout {
    margin: 20;
}

Este selector identifica los StackLayout elementos de las páginas que utilizan la hoja de estilos y establece sus márgenes en un grosor uniforme de 20.This selector identifies any StackLayout elements on pages that consume the style sheet, and sets their margins to a uniform thickness of 20.

Nota

El element selector no identifica las subclases del tipo especificado.The element selector does not identify subclasses of the specified type.

Seleccionar elementos por clase baseSelecting elements by base class

Los elementos del árbol visual se pueden seleccionar por clase base con el selector sin distinción de mayúsculas y minúsculas ^base :Elements in the visual tree can be selected by base class with the case insensitive ^base selector:

^contentpage {
    background-color: lightgray;
}

Este selector identifica los ContentPage elementos que utilizan la hoja de estilos y establece su color de fondo en lightgray .This selector identifies any ContentPage elements that consume the style sheet, and sets their background color to lightgray.

Nota

El ^base selector es específico de Xamarin.Forms y no forma parte de la especificación de CSS.The ^base selector is specific to Xamarin.Forms, and isn't part of the CSS specification.

Seleccionar un elemento por su nombreSelecting an element by name

Los elementos individuales del árbol visual se pueden seleccionar con el selector distinguir mayúsculas de minúsculas #id :Individual elements in the visual tree can be selected with the case sensitive #id selector:

#listView {
    background-color: lightgray;
}

Este selector identifica el elemento cuya StyleId propiedad está establecida en listView .This selector identifies the element whose StyleId property is set to listView. Sin embargo, si StyleId no se establece la propiedad, el selector volverá a usar el x:Name del elemento.However, if the StyleId property is not set, the selector will fall back to using the x:Name of the element. Por consiguiente, en el siguiente ejemplo de XAML, el #listView selector identificará el ListView cuyo x:Name atributo está establecido en listView y establecerá el color de fondo en lightgray .Therefore, in the following XAML example, the #listView selector will identify the ListView whose x:Name attribute is set to listView, and will set it's background color to lightgray.

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

Seleccionar elementos con un atributo de clase específicoSelecting elements with a specific class attribute

Los elementos con un atributo de clase específico se pueden seleccionar con el selector que distingue mayúsculas de minúsculas .class :Elements with a specific class attribute can be selected with the case sensitive .class selector:

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

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

Una clase CSS se puede asignar a un elemento XAML estableciendo la StyleClass propiedad del elemento en el nombre de clase CSS.A CSS class can be assigned to a XAML element by setting the StyleClass property of the element to the CSS class name. Por lo tanto, en el siguiente ejemplo de XAML, los estilos definidos por la .detailPageTitle clase se asignan al primero Label , mientras que los estilos definidos por la .detailPageSubtitle clase se asignan a la segunda Label .Therefore, in the following XAML example, the styles defined by the .detailPageTitle class are assigned to the first Label, while the styles defined by the .detailPageSubtitle class are assigned to the second Label.

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

Seleccionar elementos secundariosSelecting child elements

Los elementos secundarios del árbol visual se pueden seleccionar con el selector sin distinción de mayúsculas y minúsculas element element :Child elements in the visual tree can be selected with the case insensitive element element selector:

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

Este selector identifica los Image elementos que son elementos secundarios de ListView los elementos y establece su alto y ancho en 60.This selector identifies any Image elements that are children of ListView elements, and sets their height and width to 60. Por lo tanto, en el siguiente ejemplo de XAML, el listview image selector identificará el Image que es un elemento secundario de y ListView establecerá el alto y el ancho en 60.Therefore, in the following XAML example, the listview image selector will identify the Image that's a child of the ListView, and sets its height and width to 60.

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

Nota

El element element selector no requiere que el elemento secundario sea un elemento secundario directo del elemento primario: el elemento secundario puede tener un elemento primario diferente.The element element selector does not require the child element to be a direct child of the parent – the child element may have a different parent. La selección se produce siempre que un antecesor es el primer elemento especificado.Selection occurs provided that an ancestor is the specified first element.

Seleccionar elementos secundarios directosSelecting direct child elements

Los elementos secundarios directos del árbol visual se pueden seleccionar con el selector sin distinción de mayúsculas y minúsculas element>element :Direct child elements in the visual tree can be selected with the case insensitive element>element selector:

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

Este selector identifica los Image elementos que son elementos secundarios directos de StackLayout los elementos y establece su alto y ancho en 200.This selector identifies any Image elements that are direct children of StackLayout elements, and sets their height and width to 200. Por lo tanto, en el siguiente ejemplo de XAML, el stacklayout>image selector identificará el Image que es un elemento secundario directo de StackLayout y establecerá el alto y el ancho en 200.Therefore, in the following XAML example, the stacklayout>image selector will identify the Image that's a direct child of the StackLayout, and sets its height and width to 200.

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

Nota

El element>element selector requiere que el elemento secundario sea un elemento secundario directo del elemento primario.The element>element selector requires that the child element is a direct child of the parent.

Referencia del selectorSelector reference

Admite los siguientes selectores de CSS Xamarin.Forms :The following CSS selectors are supported by Xamarin.Forms:

SelectorSelector EjemploExample DescripciónDescription
.class .header Selecciona todos los elementos con la StyleClass propiedad que contiene ' header '.Selects all elements with the StyleClass property containing 'header'. Tenga en cuenta que este selector distingue mayúsculas de minúsculas.Note that this selector is case sensitive.
#id #email Selecciona todos los elementos con el StyleId valor establecido en email .Selects all elements with StyleId set to email. Si StyleId no se establece, fallback en x:Name .If StyleId is not set, fallback to x:Name. Cuando se usa XAML, x:Name se prefiere StyleId .When using XAML, x:Name is preferred over StyleId. Tenga en cuenta que este selector distingue mayúsculas de minúsculas.Note that this selector is case sensitive.
* * Selecciona todos los elementos.Selects all elements.
element label Selecciona todos los elementos de tipo Label , pero no las subclases.Selects all elements of type Label, but not subclasses. Tenga en cuenta que este selector no distingue mayúsculas de minúsculas.Note that this selector is case insensitive.
^base ^contentpage Selecciona todos los elementos con ContentPage como clase base, incluido a ContentPage sí mismo.Selects all elements with ContentPage as the base class, including ContentPage itself. Tenga en cuenta que este selector no distingue entre mayúsculas y minúsculas y no forma parte de la especificación de CSS.Note that this selector is case insensitive and isn't part of the CSS specification.
element,element label,button Selecciona todos los Button elementos y todos los Label elementos.Selects all Button elements and all Label elements. Tenga en cuenta que este selector no distingue mayúsculas de minúsculas.Note that this selector is case insensitive.
element element stacklayout label Selecciona todos los Label elementos dentro de StackLayout .Selects all Label elements inside a StackLayout. Tenga en cuenta que este selector no distingue mayúsculas de minúsculas.Note that this selector is case insensitive.
element>element stacklayout>label Selecciona todos los Label elementos con StackLayout como elemento primario directo.Selects all Label elements with StackLayout as a direct parent. Tenga en cuenta que este selector no distingue mayúsculas de minúsculas.Note that this selector is case insensitive.
element+element label+entry Selecciona todos los Entry elementos directamente después de Label .Selects all Entry elements directly after a Label. Tenga en cuenta que este selector no distingue mayúsculas de minúsculas.Note that this selector is case insensitive.
element~element label~entry Selecciona todos los Entry elementos precedidos por un Label .Selects all Entry elements preceded by a Label. Tenga en cuenta que este selector no distingue mayúsculas de minúsculas.Note that this selector is case insensitive.

Los estilos con selectores coincidentes se aplican consecutivamente, en orden de definición.Styles with matching selectors are applied consecutively, in definition order. Los estilos definidos en un elemento específico siempre se aplican en último lugar.Styles defined on a specific item are always applied last.

Sugerencia

Los selectores se pueden combinar sin limitación, como StackLayout>ContentView>label.email .Selectors can be combined without limitation, such as StackLayout>ContentView>label.email.

Actualmente no se admiten los siguientes selectores:The following selectors are currently unsupported:

  • [attribute]
  • @media y @supports@media and @supports
  • : y ::: and ::

Nota

La especificidad y las invalidaciones de especificidad no se admiten.Specificity, and specificity overrides are unsupported.

Referencia de propiedadesProperty reference

Las siguientes propiedades CSS son compatibles con Xamarin.Forms (en la columna valores , los tipos están en cursiva, mientras que los literales de cadena son gray ):The following CSS properties are supported by Xamarin.Forms (in the Values column, types are italic, while string literals are gray):

PropiedadProperty Se aplica aApplies to ValoresValues EjemploExample
align-content FlexLayout stretch | center | start | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initialstretch | center | start | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial align-content: space-between;
align-items FlexLayout stretch | center | start | end | flex-start | flex-end | initialstretch | center | start | end | flex-start | flex-end | initial align-items: flex-start;
align-self VisualElement auto | stretch | center | start | end | flex-start | flex-end | initialauto | stretch | center | start | end | flex-start | flex-end | initial align-self: flex-end;
background-color VisualElement color | initialcolor | initial background-color: springgreen;
background-image Page string | initialstring | initial background-image: bg.png;
border-color Button, Frame, ImageButtonButton, Frame, ImageButton color | initialcolor | initial border-color: #9acd32;
border-radius BoxView, Button, Frame, ImageButtonBoxView, Button, Frame, ImageButton doble |initialdouble | initial border-radius: 10;
border-width Button, ImageButtonButton, ImageButton doble |initialdouble | initial border-width: .5;
color ActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePickerActivityIndicator, BoxView, Button, CheckBox, DatePicker, Editor, Entry, Label, Picker, ProgressBar, SearchBar, Switch, TimePicker color | initialcolor | initial color: rgba(255, 0, 0, 0.3);
column-gap Grid doble |initialdouble | initial column-gap: 9;
direction VisualElement ltr | rtl | inherit | initialltr | rtl | inherit | initial direction: rtl;
flex-direction FlexLayout column | columnreverse | row | rowreverse | row-reverse | column-reverse | initialcolumn | columnreverse | row | rowreverse | row-reverse | column-reverse | initial flex-direction: column-reverse;
flex-basis VisualElement valor float | auto | initial.float | auto | initial. Además, se puede especificar un porcentaje en el intervalo comprendido entre 0% y 100% con el % signo.In addition, a percentage in the range 0% to 100% can be specified with the % sign. flex-basis: 25%;
flex-grow VisualElement valor float |initialfloat | initial flex-grow: 1.5;
flex-shrink VisualElement valor float |initialfloat | initial flex-shrink: 1;
flex-wrap VisualElement nowrap | wrap | reverse | wrap-reverse | initialnowrap | wrap | reverse | wrap-reverse | initial flex-wrap: wrap-reverse;
font-family Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span string | initialstring | initial font-family: Consolas;
font-size Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span doble | namedsize | initialdouble | namedsize | initial font-size: 12;
font-style Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, SpanButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, TimePicker, Span bold | italic | initialbold | italic | initial font-style: bold;
height VisualElement doble |initialdouble | initial min-height: 250;
justify-content FlexLayout start | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initialstart | center | end | spacebetween | spacearound | spaceevenly | flex-start | flex-end | space-between | space-around | initial justify-content: flex-end;
letter-spacing Button, DatePicker, Editor, Entry, Label, Picker, SearchBar, SearchHandler, Span, TimePickerButton, DatePicker, Editor, Entry, Label, Picker, SearchBar, SearchHandler, Span, TimePicker doble |initialdouble | initial letter-spacing: 2.5;
line-height Label, SpanLabel, Span doble |initialdouble | initial line-height: 1.8;
margin View grosor |initialthickness | initial margin: 6 12;
margin-left View grosor |initialthickness | initial margin-left: 3;
margin-top View grosor |initialthickness | initial margin-top: 2;
margin-right View grosor |initialthickness | initial margin-right: 1;
margin-bottom View grosor |initialthickness | initial margin-bottom: 6;
max-lines Label int | initialint | initial max-lines: 2;
min-height VisualElement doble |initialdouble | initial min-height: 50;
min-width VisualElement doble |initialdouble | initial min-width: 112;
opacity VisualElement doble |initialdouble | initial opacity: .3;
order VisualElement int | initialint | initial order: -1;
padding Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page grosor |initialthickness | initial padding: 6 12 12;
padding-left Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page doble |initialdouble | initial padding-left: 3;
padding-top Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page doble |initialdouble | initial padding-top: 4;
padding-right Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page doble |initialdouble | initial padding-right: 2;
padding-bottom Button, ImageButton, Layout, PageButton, ImageButton, Layout, Page doble |initialdouble | initial padding-bottom: 6;
position FlexLayout relative | absolute | initialrelative | absolute | initial position: absolute;
row-gap Grid doble |initialdouble | initial row-gap: 12;
text-align Entry, EntryCell, Label, SearchBarEntry, EntryCell, Label, SearchBar left | top | right | bottom | start | center | middle | end | initial.left | top | right | bottom | start | center | middle | end | initial. lefty right deben evitarse en entornos de derecha a izquierda.left and right should be avoided in right-to-left environments. text-align: right;
text-decoration Label, SpanLabel, Span none | underline | strikethrough | line-through | initialnone | underline | strikethrough | line-through | initial text-decoration: underline, line-through;
transform VisualElement none, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initialnone, rotate, rotateX, rotateY, scale, scaleX, scaleY, translate, translateX, translateY, initial transform: rotate(180), scaleX(2.5);
transform-origin VisualElement Double, Double |initialdouble, double | initial transform-origin: 7.5, 12.5;
vertical-align Label left | top | right | bottom | start | center | middle | end | initialleft | top | right | bottom | start | center | middle | end | initial vertical-align: bottom;
visibility VisualElement true | visible | false | hidden | collapse | initialtrue | visible | false | hidden | collapse | initial visibility: hidden;
width VisualElement doble |initialdouble | initial min-width: 320;

Nota

initiales un valor válido para todas las propiedades.initial is a valid value for all properties. Borra el valor (restablece al valor predeterminado) que se estableció desde otro estilo.It clears the value (resets to default) that was set from another style.

Actualmente no se admiten las siguientes propiedades:The following properties are currently unsupported:

  • all: initial.all: initial.
  • Propiedades de diseño (cuadro o cuadrícula).Layout properties (box, or grid).
  • Propiedades abreviadas, como font y border .Shorthand properties, such as font, and border.

Además, no hay ningún inherit valor y, por tanto, no se admite la herencia.In addition, there's no inherit value and so inheritance isn't supported. Por lo tanto, no es posible, por ejemplo, establecer la font-size propiedad en un diseño y esperar que todas las Label instancias del diseño hereden el valor.Therefore you can't, for example, set the font-size property on a layout and expect all the Label instances in the layout to inherit the value. La única excepción es la direction propiedad, que tiene un valor predeterminado de inherit .The one exception is the direction property, which has a default value of inherit.

SpanLos elementos de destino tienen un problema conocido que evita que los intervalos sean el destino de los estilos CSS por elemento y nombre (mediante el # símbolo).Targeting Span elements has a known issue preventing spans from being the target of CSS styles by both element and name (using the # symbol). El Span elemento se deriva de GestureElement , que no tiene la StyleClass propiedad, por lo que los intervalos no admiten el destino de clase CSS.The Span element derives from GestureElement, which does not have the StyleClass property so spans do not support CSS class targeting. Para obtener más información, vea no se puede aplicar el estilo CSS al control span.For more information, see Not able to apply CSS styling to Span control.

Xamarin.Formspropiedades específicas specific properties

Xamarin.FormsTambién se admiten las siguientes propiedades CSS específicas (en la columna valores , los tipos son cursiva, mientras que los literales de cadena son gray ):The following Xamarin.Forms specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

PropiedadProperty Se aplica aApplies to ValoresValues EjemploExample
-xf-bar-background-color NavigationPage, TabbedPageNavigationPage, TabbedPage color | initialcolor | initial -xf-bar-background-color: teal;
-xf-bar-text-color NavigationPage, TabbedPageNavigationPage, TabbedPage color | initialcolor | initial -xf-bar-text-color: gray
-xf-horizontal-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-horizontal-scroll-bar-visibility: never;
-xf-max-length Entry, Editor, SearchBarEntry, Editor, SearchBar int | initialint | initial -xf-max-length: 20;
-xf-max-track-color Slider color | initialcolor | initial -xf-max-track-color: red;
-xf-min-track-color Slider color | initialcolor | initial -xf-min-track-color: yellow;
-xf-orientation ScrollView, StackLayoutScrollView, StackLayout horizontal | vertical | both | initial.horizontal | vertical | both | initial. bothsolo se admite en ScrollView .both is only supported on a ScrollView. -xf-orientation: horizontal;
-xf-placeholder Entry, Editor, SearchBarEntry, Editor, SearchBar texto entre comillas quoted text |initialquoted text | initial -xf-placeholder: Enter name;
-xf-placeholder-color Entry, Editor, SearchBarEntry, Editor, SearchBar color | initialcolor | initial -xf-placeholder-color: green;
-xf-spacing StackLayout doble |initialdouble | initial -xf-spacing: 8;
-xf-thumb-color Slider, SwitchSlider, Switch color | initialcolor | initial -xf-thumb-color: limegreen;
-xf-vertical-scroll-bar-visibility ScrollView default | always | never | initialdefault | always | never | initial -xf-vertical-scroll-bar-visibility: always;
-xf-vertical-text-alignment Label start | center | end | initialstart | center | end | initial -xf-vertical-text-alignment: end;
-xf-visual VisualElement string | initialstring | initial -xf-visual: material;

Xamarin.FormsPropiedades específicas del shell Shell specific properties

Xamarin.FormsTambién se admiten las siguientes propiedades CSS específicas del shell (en la columna valores , los tipos son cursiva, mientras que los literales de cadena son gray ):The following Xamarin.Forms Shell specific CSS properties are also supported (in the Values column, types are italic, while string literals are gray):

PropiedadProperty Se aplica aApplies to ValoresValues EjemploExample
-xf-flyout-background Shell color | initialcolor | initial -xf-flyout-background: red;
-xf-shell-background Element color | initialcolor | initial -xf-shell-background: green;
-xf-shell-disabled Element color | initialcolor | initial -xf-shell-disabled: blue;
-xf-shell-foreground Element color | initialcolor | initial -xf-shell-foreground: yellow;
-xf-shell-tabbar-background Element color | initialcolor | initial -xf-shell-tabbar-background: white;
-xf-shell-tabbar-disabled Element color | initialcolor | initial -xf-shell-tabbar-disabled: black;
-xf-shell-tabbar-foreground Element color | initialcolor | initial -xf-shell-tabbar-foreground: gray;
-xf-shell-tabbar-title Element color | initialcolor | initial -xf-shell-tabbar-title: lightgray;
-xf-shell-tabbar-unselected Element color | initialcolor | initial -xf-shell-tabbar-unselected: cyan;
-xf-shell-title Element color | initialcolor | initial -xf-shell-title: teal;
-xf-shell-unselected Element color | initialcolor | initial -xf-shell-unselected: limegreen;

ColorColor

colorSe admiten los siguientes valores:The following color values are supported:

  • X11colores, que coinciden con los colores CSS, los colores predefinidos de UWP y los Xamarin.Forms colores.X11 colors, which match CSS colors, UWP pre-defined colors, and Xamarin.Forms colors. Tenga en cuenta que estos valores de color no distinguen mayúsculas de minúsculas.Note that these color values are case insensitive.
  • colores hex: #rgb , #argb , #rrggbb ,#aarrggbbhex colors: #rgb, #argb, #rrggbb, #aarrggbb
  • colores RGB: rgb(255,0,0) , rgb(100%,0%,0%) .rgb colors: rgb(255,0,0), rgb(100%,0%,0%). Los valores están en el intervalo 0-255 o 0%-100%.Values are in the range 0-255, or 0%-100%.
  • colores RGBA: rgba(255, 0, 0, 0.8) , rgba(100%, 0%, 0%, 0.8) .rgba colors: rgba(255, 0, 0, 0.8), rgba(100%, 0%, 0%, 0.8). El valor de opacidad está en el intervalo 0.0-1.0.The opacity value is in the range 0.0-1.0.
  • HSL Colors: hsl(120, 100%, 50%) .hsl colors: hsl(120, 100%, 50%). El valor h está en el intervalo 0-360, mientras que s y l están en el intervalo 0%-100%.The h value is in the range 0-360, while s and l are in the range 0%-100%.
  • colores de HSLA: hsla(120, 100%, 50%, .8) .hsla colors: hsla(120, 100%, 50%, .8). El valor de opacidad está en el intervalo 0.0-1.0.The opacity value is in the range 0.0-1.0.

ThicknessThickness

Se admiten uno, dos, tres o cuatro thickness valores, cada uno separado por un espacio en blanco:One, two, three, or four thickness values are supported, each separated by white space:

  • Un valor único indica el grosor uniforme.A single value indicates uniform thickness.
  • Dos valores indican el grosor vertical y horizontal.Two values indicate vertical then horizontal thickness.
  • Tres valores indican superior, después horizontal (izquierda y derecha) y, a continuación, el grosor inferior.Three values indicate top, then horizontal (left and right), then bottom thickness.
  • Cuatro valores indican la parte superior, después, la parte inferior y, a continuación, el grosor izquierdo.Four values indicate top, then right, then bottom, then left thickness.

Nota

thicknessLos valores CSS se diferencian de Thickness los valores XAML.CSS thickness values differ from XAML Thickness values. Por ejemplo, en XAML, un valor de dos valores Thickness indica el grosor horizontal y, a continuación, el grosor vertical, mientras que un valor de cuatro valores Thickness indica izquierda, superior, derecha y bajo grosor inferior.For example, in XAML a two-value Thickness indicates horizontal then vertical thickness, while a four-value Thickness indicates left, then top, then right, then bottom thickness. Además, Thickness los valores XAML están delimitados por comas.In addition, XAML Thickness values are comma delimited.

NamedSizeNamedSize

Se admiten los siguientes valores que no distinguen mayúsculas de minúsculas namedsize :The following case insensitive namedsize values are supported:

  • default
  • micro
  • small
  • medium
  • large

El significado exacto de cada valor depende de la namedsize plataforma y depende de la vista.The exact meaning of each namedsize value is platform-dependent and view-dependent.

CSS en Xamarin.Forms con Xamarin. UniversityCSS in Xamarin.Forms with Xamarin.University

Xamarin.Formsvídeo de CSS 3,0Xamarin.Forms 3.0 CSS video