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.

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.

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.