Compartir a través de

ContentView

  • Artículo

Examinar ejemplo. Examinar el ejemplo

La interfaz de usuario de aplicaciones multiplataforma de .NET (.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 del ContentView. Esta propiedad está respaldada por un objeto BindableProperty, lo que significa que puede ser el destino de los enlaces de datos y aplicar 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, consulte cómo personalizar la apariencia con unControlTemplate.

Nota

Un ContentView únicamente puede contener un solo hijo.

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:

  1. Cree una clase que derive de la clase ContentView.
  2. Defina las propiedades o eventos de control en el archivo de código subyacente para el control personalizado.
  3. Defina 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 de ContentViewmediante la plantilla de elemento ContentView en Visual Studio. Esta plantilla crea un archivo XAML en el que se puede definir la interfaz de usuario del control personalizado y un archivo de código subyacente en el que se pueden definir cualquier propiedad, eventos y otra lógica de control.

Definir propiedades de control

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

El CardView control personalizado define las siguientes propiedades:

  • CardTitle, del tipo string, que representa el título que se muestra en la tarjeta.
  • CardDescription, del 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 de 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 obtener más información sobre los objetos de BindableProperty, vea 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 de ContentView, que usa un ContentView como elemento raíz del control:

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

El elemento ContentView establece la propiedad x:Name en this, que se puede usar para tener acceso al objeto enlazado a la instancia de 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, consulte 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 del CardView y definir sus propiedades.

<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:

Captura de pantalla de objetos CardView.

Personalizar 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. Se puede usar un ControlTemplate para anular la apariencia del control, independientemente de cómo esté definida esa apariencia.

Por ejemplo, un diseño de CardView podría ocupar demasiado espacio para algunos casos de uso. Se puede usar un ControlTemplate para invalidar el diseño de 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>

La vinculación de datos en un ControlTemplate utiliza la extensión de marcado TemplateBinding para especificar vinculaciones. A continuación, la propiedad ControlTemplate se puede establecer en el objeto ControlTemplate definido mediante su valor x:Key. En el ejemplo siguiente se muestra la propiedad ControlTemplate establecida en una instancia de CardView:

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

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

captura de pantalla de CardView invalidada con controlTemplate.

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