ContentView

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) ContentView è un controllo che consente la creazione di controlli personalizzati riutilizzabili.

La ContentView classe definisce una Content proprietà di tipo View, che rappresenta il contenuto dell'oggetto ContentView. Questa proprietà è supportata da un BindableProperty oggetto , il che significa che può essere la destinazione dei data binding e stili.

La ContentView classe deriva dalla TemplatedView classe , che definisce la ControlTemplate proprietà associabile , di tipo ControlTemplate, che definisce l'aspetto del controllo . Per altre informazioni sulla proprietà, vedere Personalizzare l'aspetto ControlTemplate con controlTemplate.

Nota

Un ContentView oggetto può contenere solo un singolo elemento figlio.

Creare un controllo personalizzato

La ContentView classe offre poche funzionalità da solo, ma può essere usata per creare un controllo personalizzato. Il processo di creazione di un controllo personalizzato consiste nel:

1. Creare una classe che derivi dalla classe ContentView.
2. Definire le proprietà o gli eventi del controllo nel file code-behind per il controllo personalizzato.
3. Definire l'interfaccia utente per il controllo personalizzato.

Questo articolo illustra come creare un CardView controllo, ovvero un elemento dell'interfaccia utente che visualizza un'immagine, un titolo e una descrizione in un layout simile a una scheda.

Creare una classe derivata da ContentView

È possibile creare una ContentViewclasse derivata da usando il modello di elemento ContentView in Visual Studio. Questo modello crea un file XAML in cui è possibile definire l'interfaccia utente per il controllo personalizzato e un file code-behind in cui è possibile definire qualsiasi proprietà, eventi e altra logica di controllo.

Definire le proprietà del controllo

Qualsiasi proprietà, evento e altra logica di controllo deve essere definita nel file code-behind per la ContentViewclasse derivata da .

Il CardView controllo personalizzato definisce le proprietà seguenti:

• CardTitle, di tipo string, che rappresenta il titolo visualizzato nella scheda.
• CardDescription, di tipo string, che rappresenta la descrizione visualizzata nella scheda.
• IconImageSource, di tipo ImageSource, che rappresenta l'immagine visualizzata nella scheda.
• IconBackgroundColor, di tipo Color, che rappresenta il colore di sfondo per l'immagine visualizzata nella scheda.
• BorderColor, di tipo Color, che rappresenta il colore del bordo della scheda, del bordo dell'immagine e della linea di divisione.
• CardColor, di tipo Color, che rappresenta il colore di sfondo della scheda.

Ogni proprietà è supportata da un'istanza BindableProperty di .

L'esempio seguente mostra la CardTitle proprietà associabile nel file code-behind per la 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();
    }
}

Per altre informazioni sugli BindableProperty oggetti, vedere Proprietà associabili.

Definire l'interfaccia utente

L'interfaccia utente del controllo personalizzato può essere definita nel file XAML per la ContentViewclasse derivata da , che usa come ContentView elemento radice del controllo:

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

L'elemento ContentView imposta la x:Name proprietà su this, che può essere utilizzata per accedere all'oggetto associato all'istanza CardView di . Gli elementi nel layout impostano le associazioni sulle relative proprietà sui valori definiti nell'oggetto associato. Per altre informazioni sul data binding, vedere Data binding.

Nota

La FallbackValue proprietà nell'espressione Binding fornisce un valore predefinito nel caso in cui l'associazione sia null.

Creare un'istanza di un controllo personalizzato

È necessario aggiungere un riferimento allo spazio dei nomi del controllo personalizzato alla pagina che crea un'istanza del controllo personalizzato. Dopo aver aggiunto il riferimento, è possibile creare un'istanza CardView di e definire le relative proprietà:

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

Lo screenshot seguente mostra più CardView oggetti:

Personalizzare l'aspetto con un ControlTemplate

Un controllo personalizzato che deriva dalla classe può definire l'interfaccia ContentView utente usando XAML o codice oppure potrebbe non definirne affatto l'interfaccia utente. Un ControlTemplate oggetto può essere utilizzato per eseguire l'override dell'aspetto del controllo, indipendentemente dalla modalità di definizione dell'aspetto.

Ad esempio, un CardView layout potrebbe occupare troppo spazio per alcuni casi d'uso. Un ControlTemplate oggetto può essere utilizzato per eseguire l'override del CardView layout per fornire una visualizzazione più compatta, adatta a un elenco condensato:

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

Il data binding in un ControlTemplate usa l'estensione TemplateBinding di markup per specificare le associazioni. La ControlTemplate proprietà può quindi essere impostata sull'oggetto definito ControlTemplate usando il relativo x:Key valore. Nell'esempio seguente viene illustrata la proprietà impostata in un'istanza ControlTemplate CardView di :

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

Lo screenshot seguente mostra un'istanza standard CardView e più CardView istanze i cui modelli di controllo sono stati sottoposti a override:

Per altre informazioni sui modelli di controllo, vedere Modelli di controllo.