ContentView de Xamarin.Forms

  • Artículo
  • 5 minutos para leer

Ejemplo de descarga Descarga del ejemplo

La clase es un tipo de que contiene un único elemento secundario y se usa normalmente Xamarin.FormsContentView para crear controles Layout personalizados y reutilizables. La clase ContentView se hereda de TemplatedView. En este artículo, y en el ejemplo asociado, se explica cómo crear un CardView control personalizado basado en la clase ContentView .

En la captura de pantalla siguiente CardView se muestra un control que deriva de la clase ContentView :

Captura de pantalla de la aplicación de ejemplo CardView

La ContentView clase define una sola propiedad:

también ContentView hereda una propiedad de la TemplatedView clase :

Para obtener más información sobre la ControlTemplate propiedad , vea Personalizar la apariencia con un control ControlTemplate.

Creación de un control personalizado

La ContentView clase ofrece poca funcionalidad por sí sola, pero se puede usar para crear un control personalizado. El proyecto de ejemplo define un control : un elemento de interfaz de usuario que muestra una imagen, un título y CardView una descripción en un diseño de tipo tarjeta.

El proceso para crear un control personalizado es:

  1. Cree una nueva clase con la ContentView plantilla en Visual Studio 2019.
  2. Defina las propiedades o eventos únicos en el archivo de código subyacente para el nuevo control personalizado.
  3. Cree la interfaz de usuario para el control personalizado.

Nota:

Es posible crear un control personalizado cuyo diseño se define en código en lugar de XAML. Para simplificar, la aplicación de ejemplo solo define una sola CardView clase con un diseño XAML. Sin embargo, la aplicación de ejemplo contiene una clase CardViewCodePage que muestra el proceso de consumo del control personalizado en el código.

Creación de propiedades de código subyacente

El CardView control personalizado define las siguientes propiedades:

  • CardTitle: objeto string que representa el título que se muestra en la tarjeta.
  • CardDescription: objeto string que representa la descripción que se muestra en la tarjeta.
  • IconImageSource: objeto ImageSource que representa la imagen que se muestra en la tarjeta.
  • IconBackgroundColor: objeto Color que representa el color de fondo de la imagen que se muestra en la tarjeta.
  • BorderColor: objeto Color que representa el color del borde de la tarjeta, el borde de la imagen y la línea divisora.
  • CardColor: objeto Color que representa el color de fondo de la tarjeta.

Nota:

La BorderColor propiedad afecta a varios elementos para fines de demostración. Esta propiedad podría dividirse en tres propiedades si es necesario.

Cada propiedad está copiada por una BindableProperty instancia de . El respaldo BindableProperty permite que cada propiedad tenga estilo y esté enlazada mediante el patrón MVVM.

En el ejemplo siguiente se muestra cómo crear una copia de seguridad BindableProperty :

public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(
    "CardTitle",        // the name of the bindable property
    typeof(string),     // the bindable property type
    typeof(CardView),   // the parent object type
    string.Empty);      // the default value for the property

La propiedad personalizada usa los GetValueSetValue métodos y para obtener y establecer los valores BindableProperty de objeto:

public string CardTitle
{
    get => (string)GetValue(CardView.CardTitleProperty);
    set => SetValue(CardView.CardTitleProperty, value);
}

Para obtener más información sobre BindableProperty los objetos , vea Propiedades BindableProperty.

Definición de la interfaz de usuario

La interfaz de usuario del control personalizado ContentView usa como elemento raíz para el CardView control. En el ejemplo siguiente se muestra CardView el código XAML:

<ContentView ...
             x:Name="this"
             x:Class="CardViewDemo.Controls.CardView">
    <Frame BindingContext="{x:Reference this}"
            BackgroundColor="{Binding CardColor}"
            BorderColor="{Binding BorderColor}"
            ...>
        <Grid>
            ...
            <Frame BorderColor="{Binding BorderColor, FallbackValue='Black'}"
                   BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Grey'}"
                   ...>
                <Image Source="{Binding IconImageSource}"
                       .. />
            </Frame>
            <Label Text="{Binding CardTitle, FallbackValue='Card Title'}"
                   ... />
            <BoxView BackgroundColor="{Binding BorderColor, FallbackValue='Black'}"
                     ... />
            <Label Text="{Binding CardDescription, FallbackValue='Card description text.'}"
                   ... />
        </Grid>
    </Frame>
</ContentView>

El elemento establece la propiedad en , que se puede usar para tener acceso ContentView al objeto enlazado a la instancia de x:NameContentViewCardView . Los elementos del diseño establecen enlaces en sus propiedades a valores definidos en el objeto enlazado.

Para obtener más información sobre el enlace de datos, vea Xamarin.Forms Data Binding .

Nota:

La FallbackValue propiedad proporciona un valor predeterminado en caso de que el enlace sea null . Esto también permite que el previewer xaml de Visual Studio represente el control.

Creación de instancias de un control personalizado

Se debe agregar una referencia al espacio de nombres de control personalizado a una página que cree una instancia del control personalizado. En el ejemplo siguiente se muestra una referencia de espacio de nombres denominada controles agregados a una instancia en XAML:

<ContentPage ...
             xmlns:controls="clr-namespace:CardViewDemo.Controls" >

Una vez agregada la referencia, se pueden crear instancias de CardView en XAML y sus propiedades definidas:

<controls:CardView BorderColor="DarkGray"
                   CardTitle="Slavko Vlasic"
                   CardDescription="Lorem ipsum dolor sit..."
                   IconBackgroundColor="SlateGray"
                   IconImageSource="user.png"/>

También CardView se pueden crear instancias de en el código:

CardView card = new CardView
{
    BorderColor = Color.DarkGray,
    CardTitle = "Slavko Vlasic",
    CardDescription = "Lorem ipsum dolor sit...",
    IconBackgroundColor = Color.SlateGray,
    IconImageSource = ImageSource.FromFile("user.png")
};

Personalización de la apariencia con un controlTemplate

Un control personalizado que deriva de la clase puede definir la apariencia mediante XAML, código o puede ContentView no definir la apariencia en absoluto. Independientemente de cómo se defina la apariencia, un ControlTemplate objeto puede invalidar la apariencia con un diseño personalizado.

El CardView diseño puede ocupar demasiado espacio para algunos casos de uso. Puede ControlTemplate invalidar el diseño para proporcionar una vista más CardView compacta, adecuada para una lista condensada:

<ContentPage.Resources>
    <ResourceDictionary>
        <ControlTemplate x:Key="CardViewCompressed">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="100" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100" />
                    <ColumnDefinition Width="100*" />
                </Grid.ColumnDefinitions>
                <Image Grid.Row="0"
                       Grid.Column="0"
                       Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center"/>
                <StackLayout Grid.Row="0"
                             Grid.Column="1">
                    <Label Text="{TemplateBinding CardTitle}"
                           FontAttributes="Bold" />
                    <Label Text="{TemplateBinding CardDescription}" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

El enlace de datos ControlTemplate de usa la extensión de marcado para especificar TemplateBinding enlaces. A ControlTemplate continuación, la propiedad se puede establecer en el objeto ControlTemplate definido, utilizando su x:Key valor . En el ejemplo siguiente se muestra ControlTemplate la propiedad establecida en una instancia de CardView :

<controls:CardView ControlTemplate="{StaticResource CardViewCompressed}"/>

En las capturas de pantalla siguientes se muestra una instancia CardView estándar y cuya propiedad se ha CardViewControlTemplate invalidado:

Captura de pantalla de CardView ControlTemplate

Para obtener más información sobre las plantillas de control, vea Xamarin.Forms Control Templates .