ContentView

O .NET Multi-platform App UI (.NET MAUI) ContentView é um controle que permite a criação de controles personalizados e reutilizáveis.

A ContentView classe define uma Content propriedade, do tipo View, que representa o conteúdo do ContentView. Essa propriedade é apoiada por um BindableProperty objeto, o que significa que ele pode ser o destino de associações de dados e estilizado.

A ContentView classe deriva da TemplatedView classe, que define a ControlTemplate propriedade bindable, do tipo ControlTemplate, que define a aparência do controle. Para obter mais informações sobre a propriedade, consulte Personalizar a ControlTemplate aparência com um ControlTemplate.

Observação

A ContentView só pode conter uma única criança.

Criar um controle personalizado

A ContentView classe oferece pouca funcionalidade por si só, mas pode ser usada para criar um controle personalizado. O processo para criar um controle personalizado é:

1. Crie uma classe que derive da classe ContentView.
2. Defina quaisquer propriedades de controle ou eventos no arquivo code-behind para o controle personalizado.
3. Defina a interface do usuário para o controle personalizado.

Este artigo demonstra como criar um controle, que é um elemento de interface do usuário que exibe uma imagem, título e descrição em um layout semelhante a um CardView cartão.

Criar uma classe derivada de ContentView

Uma ContentViewclasse derivada pode ser criada usando o modelo de item ContentView no Visual Studio. Esse modelo cria um arquivo XAML no qual a interface do usuário para o controle personalizado pode ser definida e um arquivo code-behind no qual quaisquer propriedades de controle, eventos e outras lógicas podem ser definidas.

Definir propriedades de controle

Quaisquer propriedades de controle, eventos e outras lógicas devem ser definidas no arquivo code-behind para a ContentViewclasse -derivada.

O CardView controle personalizado define as seguintes propriedades:

• CardTitle, do tipo string, que representa o título mostrado no cartão.
• CardDescription, do tipo string, que representa a descrição mostrada no cartão.
• IconImageSource, do tipo ImageSource, que representa a imagem mostrada no cartão.
• IconBackgroundColor, do tipo Color, que representa a cor de fundo da imagem mostrada no cartão.
• BorderColor, do tipo Color, que representa a cor da borda do cartão, da borda da imagem e da linha divisória.
• CardColor, do tipo Color, que representa a cor de fundo do cartão.

Cada propriedade é apoiada por uma BindableProperty instância.

O exemplo a seguir mostra a CardTitle propriedade bindable no arquivo code-behind da CardView classe:

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 obter mais informações sobre BindableProperty objetos, consulte Propriedades vinculáveis.

Definir a interface do usuário

A interface do usuário do controle personalizado pode ser definida no arquivo XAML para a classe -derivada, que usa a ContentViewContentView como o elemento raiz do controle:

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

O ContentView elemento define a x:Name propriedade como this, que pode ser usada para acessar o objeto vinculado à CardView instância. Os elementos no layout definem ligações em suas propriedades com valores definidos no objeto acoplado. Para obter mais informações sobre vinculação de dados, consulte Vinculação de dados.

Observação

A FallbackValue propriedade na Binding expressão fornece um valor padrão caso a associação seja null.

Instanciar um controle personalizado

Uma referência ao namespace de controle personalizado deve ser adicionada à página que instancia o controle personalizado. Uma vez que a referência tenha sido adicionada, o CardView pode ser instanciado e suas propriedades 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>                   

A captura de tela a seguir mostra vários CardView objetos:

Personalizar a aparência com um ControlTemplate

Um controle personalizado que deriva ContentView da classe pode definir sua interface do usuário usando XAML ou código, ou pode não definir sua interface do usuário. A ControlTemplate pode ser usado para substituir a aparência do controle, independentemente de como essa aparência é definida.

Por exemplo, um CardView layout pode ocupar muito espaço para alguns casos de uso. A ControlTemplate pode ser usado para substituir o CardView layout para fornecer uma exibição mais compacta, adequada para uma 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>

A vinculação de dados em um usa a TemplateBinding extensão de ControlTemplate marcação para especificar associações. A ControlTemplate propriedade pode então ser definida como o objeto definido ControlTemplate , usando seu x:Key valor. O exemplo a seguir mostra o ControlTemplate conjunto de propriedades em uma CardView instância:

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

A captura de tela a seguir mostra uma instância padrão CardView e várias CardView instâncias cujos modelos de controle foram substituídos:

Para obter mais informações sobre modelos de controle, consulte Modelos de controle.