Xamarin.Forms ContentView
La Xamarin.FormsContentView classe è un tipo di Layout che contiene un singolo elemento figlio e viene in genere usato per creare controlli personalizzati riutilizzabili. La classe ContentView eredita da TemplatedView. Questo articolo e l'esempio associato illustrano come creare un controllo personalizzato CardView basato sulla ContentView classe .
Lo screenshot seguente mostra un CardView controllo che deriva dalla ContentView classe :
La ContentView classe definisce una singola proprietà:
Contentè un oggettoView. Questa proprietà è supportata da unBindablePropertyoggetto in modo che possa essere la destinazione dei data binding.
Eredita ContentView inoltre una proprietà dalla TemplatedView classe :
ControlTemplateè unControlTemplateoggetto che può definire o eseguire l'override dell'aspetto del controllo.
Per altre informazioni sulla proprietà, vedere Personalizzare l'aspetto ControlTemplate con controlTemplate.
Creare un controllo personalizzato
La ContentView classe offre poche funzionalità da solo, ma può essere usata per creare un controllo personalizzato. Il progetto di esempio definisce 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.
Il processo di creazione di un controllo personalizzato consiste nel:
- Creare una nuova classe usando il
ContentViewmodello in Visual Studio 2019. - Definire eventuali proprietà o eventi univoci nel file code-behind per il nuovo controllo personalizzato.
- Creare l'interfaccia utente per il controllo personalizzato.
Nota
È possibile creare un controllo personalizzato il cui layout è definito nel codice invece di XAML. Per semplicità, l'applicazione di esempio definisce solo una singola CardView classe con un layout XAML. L'applicazione di esempio contiene tuttavia una classe CardViewCodePage che mostra il processo di utilizzo del controllo personalizzato nel codice.
Creare proprietà code-behind
Il CardView controllo personalizzato definisce le proprietà seguenti:
CardTitlestring: oggetto che rappresenta il titolo visualizzato nella scheda.CardDescriptionstring: oggetto che rappresenta la descrizione visualizzata nella scheda.IconImageSource: oggettoImageSourceche rappresenta l'immagine visualizzata nella scheda.IconBackgroundColorColor: oggetto che rappresenta il colore di sfondo per l'immagine visualizzata nella scheda.BorderColorColor: oggetto che rappresenta il colore del bordo della scheda, del bordo dell'immagine e della linea di divisione.CardColorColor: oggetto che rappresenta il colore di sfondo della scheda.
Nota
La BorderColor proprietà influisce su più elementi ai fini della dimostrazione. Questa proprietà può essere suddivisa in tre proprietà, se necessario.
Ogni proprietà è supportata da un'istanza BindableProperty di . Il backing BindableProperty consente di applicare uno stile a ogni proprietà e di associare, usando il modello MVVM.
L'esempio seguente illustra come creare un backup BindableProperty:
public static readonly BindableProperty CardTitleProperty = BindableProperty.Create(
"CardTitle", // the name of the bindable property
typeof(string), // the bindable property type
typeof(CardView), // the parent object type
string.Empty); // the default value for the property
La proprietà personalizzata usa i GetValue metodi e SetValue per ottenere e impostare i valori dell'oggetto BindableProperty :
public string CardTitle
{
get => (string)GetValue(CardView.CardTitleProperty);
set => SetValue(CardView.CardTitleProperty, value);
}
Per altre informazioni sugli BindableProperty oggetti, vedere Proprietà associabili.
Definire l'interfaccia utente
L'interfaccia utente del controllo personalizzato usa come ContentView elemento radice per il CardView controllo. L'esempio seguente illustra il CardView codice XAML:
<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 questa proprietà, 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 Xamarin.Forms Data Binding.
Nota
La FallbackValue proprietà fornisce un valore predefinito nel caso in cui l'associazione sia null. Ciò consente anche al visualizzatore anteprima XAML in Visual Studio di eseguire il rendering del CardView controllo.
Creare un'istanza di un controllo personalizzato
È necessario aggiungere un riferimento allo spazio dei nomi del controllo personalizzato a una pagina che crea un'istanza del controllo personalizzato. L'esempio seguente mostra un riferimento allo spazio dei nomi denominato controls aggiunto a un'istanza ContentPage in XAML:
<ContentPage ...
xmlns:controls="clr-namespace:CardViewDemo.Controls" >
Dopo aver aggiunto il riferimento, è possibile creare un'istanza CardView in XAML e definire le relative proprietà:
<controls:CardView BorderColor="DarkGray"
CardTitle="Slavko Vlasic"
CardDescription="Lorem ipsum dolor sit..."
IconBackgroundColor="SlateGray"
IconImageSource="user.png"/>
È CardView anche possibile creare un'istanza di un oggetto nel codice:
CardView card = new CardView
{
BorderColor = Color.DarkGray,
CardTitle = "Slavko Vlasic",
CardDescription = "Lorem ipsum dolor sit...",
IconBackgroundColor = Color.SlateGray,
IconImageSource = ImageSource.FromFile("user.png")
};
Personalizzare l'aspetto con un ControlTemplate
Un controllo personalizzato che deriva dalla classe può definire l'aspetto ContentView usando XAML, codice o potrebbe non definire l'aspetto. Indipendentemente dalla modalità di definizione dell'aspetto, un ControlTemplate oggetto può eseguire l'override dell'aspetto con un layout personalizzato.
Il CardView layout potrebbe occupare troppo spazio per alcuni casi d'uso. Un ControlTemplate oggetto può 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 Grid.Row="0"
Grid.Column="0"
Source="{TemplateBinding IconImageSource}"
BackgroundColor="{TemplateBinding IconBackgroundColor}"
WidthRequest="100"
HeightRequest="100"
Aspect="AspectFill"
HorizontalOptions="Center"
VerticalOptions="Center"/>
<StackLayout Grid.Row="0"
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 ControlTemplate definito 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}"/>
Gli screenshot seguenti mostrano un'istanza standard CardView e CardView il cui ControlTemplate override è stato eseguito:
Per altre informazioni sui modelli di controllo, vedere Xamarin.Forms Modelli di controllo.