ContentView

.NET Multi-platform App UI (.NET MAUI) ContentView es un control que permite la creación de controles personalizados y reutilizables.

La clase ContentView define una propiedad Content, de tipo View, que representa el contenido de ContentView. Estas propiedades están respaldadas por objetos BindableProperty, lo que significa que pueden ser destinos de los enlaces de datos, y con formato de estilo.

La clase ContentView deriva de la clase TemplatedView, que define la propiedad enlazable ControlTemplate, de tipo ControlTemplate, que define la apariencia del control. Para obtener más información sobre la propiedad ControlTemplate, consulta Personalización de la apariencia con ControlTemplate.

Nota:

ContentView solo puede contener un solo elemento secundario.

Creación de un control personalizado

La clase ContentView ofrece poca funcionalidad por sí misma, pero se puede usar para crear un control personalizado. El proceso para crear un control personalizado es para:

1. Cree una clase que se derive de la clase ContentView.
2. Definir las propiedades o eventos de control en el archivo de código subyacente para el control personalizado.
3. Definir la interfaz de usuario para el control personalizado.

En este artículo se muestra cómo crear un control CardView, que es un elemento de interfaz de usuario que muestra una imagen, un título y una descripción en un diseño similar a una tarjeta.

Creación de una clase derivada de ContentView

Se puede crear una clase derivada ContentView mediante la plantilla de elemento ContentView en Visual Studio. Esta plantilla crea un archivo XAML en el que se puede definir la interfaz de usuario para el control personalizado y un archivo de código subyacente en el que se pueden definir cualquier propiedad, evento y otra lógica de control.

Definición de propiedades de control

Cualquier propiedad de control, evento y otra lógica debe definirse en el archivo de código subyacente para la clase derivada ContentView.

El control personalizado CardView define las siguientes propiedades:

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

Cada propiedad está respaldada por una instancia de BindableProperty.

En el ejemplo siguiente se muestra la propiedad enlazable CardTitle en el archivo de código subyacente para la clase CardView:

public partial class CardView : ContentView
{
    public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);

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

    public CardView()
    {
        InitializeComponent();
    }
}

Para más información sobre los objetos BindableProperty, consulta Propiedades enlazables.

Definición de la interfaz de usuario

La interfaz de usuario de control personalizada se puede definir en el archivo XAML para la clase derivada ContentView, que usa ContentView como elemento raíz del control:

<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 ContentView establece la propiedad x:Name en this, que se puede usar para tener acceso al objeto enlazado a la instancia CardView. Los elementos del conjunto de diseño enlazan sus propiedades a los valores definidos en el objeto enlazado. Para obtener más información sobre el enlace de datos, consulta Enlace de datos.

Nota:

La propiedad FallbackValue de la expresión Binding proporciona un valor predeterminado en caso de que el enlace sea null.

Creación de instancias de un control personalizado

Se debe agregar una referencia al espacio de nombres de control personalizado a la página que crea una instancia del control personalizado. Una vez agregada la referencia, se puede crear una instancia de CardView y sus propiedades definidas:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:CardViewDemo.Controls"
             x:Class="CardViewDemo.CardViewXamlPage">
   <ScrollView>
       <StackLayout>
           <controls:CardView BorderColor="DarkGray"
                              CardTitle="Slavko Vlasic"
                              CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
                              IconBackgroundColor="SlateGray"
                              IconImageSource="user.png" />
            <!-- More CardView objects -->
       </StackLayout>
   </ScrollView>
</ContentPage>                   

En la captura de pantalla siguiente se muestran varios objetos CardView:

Personalización de la apariencia con ControlTemplate

Un control personalizado que deriva de la clase ContentView puede definir su interfaz de usuario mediante XAML o código, o puede que no defina su interfaz de usuario en absoluto. ControlTemplate Se puede usar para invalidar la apariencia del control, independientemente de cómo se defina esa apariencia.

Por ejemplo, un diseño CardView podría ocupar demasiado espacio para algunos casos de uso. ControlTemplate se puede usar para invalidar el diseño CardView para proporcionar una vista más 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 Source="{TemplateBinding IconImageSource}"
                       BackgroundColor="{TemplateBinding IconBackgroundColor}"
                       WidthRequest="100"
                       HeightRequest="100"
                       Aspect="AspectFill"
                       HorizontalOptions="Center"
                       VerticalOptions="Center" />
                <StackLayout Grid.Column="1">
                    <Label Text="{TemplateBinding CardTitle}"
                           FontAttributes="Bold" />
                    <Label Text="{TemplateBinding CardDescription}" />
                </StackLayout>
            </Grid>
        </ControlTemplate>
    </ResourceDictionary>
</ContentPage.Resources>

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

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

En la captura de pantalla siguiente se muestra una instancia CardView estándar y varias instancias CardView cuyas plantillas de control se han invalidado:

Para obtener más información sobre las plantillas de control, consulta Plantillas de control.