Xamarin.Forms ContentView
A Xamarin.FormsContentView classe é um tipo de Layout que contém um único elemento filho e normalmente é usada para criar controles personalizados e reutilizáveis. A classe ContentView herda de TemplatedView. Este artigo e o exemplo associado explicam como criar um controle personalizado CardView com base na ContentView classe.
A captura de tela a seguir mostra um CardView controle que deriva da ContentView classe:
A ContentView classe define uma única propriedade:
Contenté um objetoView. Essa propriedade é apoiada por umBindablePropertyobjeto para que possa ser o destino de associações de dados.
O ContentView também herda uma propriedade da TemplatedView classe:
ControlTemplateé umControlTemplateque pode definir ou substituir 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 projeto de exemplo define um CardView controle - um elemento de interface do usuário que exibe uma imagem, título e descrição em um layout semelhante a um cartão.
O processo para criar um controle personalizado é:
- Crie uma nova classe usando o
ContentViewmodelo no Visual Studio 2019. - Defina quaisquer propriedades ou eventos exclusivos no arquivo code-behind para o novo controle personalizado.
- Crie a interface do usuário para o controle personalizado.
Observação
É possível criar um controle personalizado cujo layout é definido em código em vez de XAML. Para simplificar, o aplicativo de exemplo define apenas uma única CardView classe com um layout XAML. No entanto, o aplicativo de exemplo contém uma classe CardViewCodePage que mostra o processo de consumir o controle personalizado no código.
Criar propriedades code-behind
O CardView controle personalizado define as seguintes propriedades:
CardTitle: umstringobjeto que representa o título mostrado no cartão.CardDescription: umstringobjeto que representa a descrição mostrada no cartão.IconImageSource: umImageSourceobjeto que representa a imagem mostrada no cartão.IconBackgroundColor: umColorobjeto que representa a cor do plano de fundo da imagem mostrada no cartão.BorderColor: umColorobjeto que representa a cor da borda do cartão, borda da imagem e linha divisória.CardColor: umColorobjeto que representa a cor do plano de fundo do cartão.
Observação
A BorderColor propriedade afeta vários itens para fins de demonstração. Essa propriedade pode ser dividida em três propriedades, se necessário.
Cada propriedade é apoiada por uma BindableProperty instância. O suporte BindableProperty permite que cada propriedade seja estilizada e vinculada, usando o padrão MVVM.
O exemplo a seguir mostra como criar um suporte 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
A propriedade personalizada usa os GetValue métodos e SetValue para obter e definir os valores de BindableProperty objeto:
public string CardTitle
{
get => (string)GetValue(CardView.CardTitleProperty);
set => SetValue(CardView.CardTitleProperty, value);
}
Para obter mais informações sobre BindableProperty objetos, consulte Propriedades vinculáveis.
Definir UI
A interface do usuário do controle personalizado usa um ContentView como o elemento raiz para o CardView controle. O exemplo a seguir mostra o CardView 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>
O ContentView elemento define a x:Name propriedade para isso, 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 Xamarin.Forms Vinculação de dados.
Observação
A FallbackValue propriedade fornece um valor padrão caso a associação seja null. Isso também permite que o Visualizador XAML no Visual Studio renderize o CardView controle.
Instanciar um controle personalizado
Uma referência ao namespace de controle personalizado deve ser adicionada a uma página que instancia o controle personalizado. O exemplo a seguir mostra uma referência de namespace chamada controles adicionados a uma ContentPage instância em XAML:
<ContentPage ...
xmlns:controls="clr-namespace:CardViewDemo.Controls" >
Depois que a referência tiver sido adicionada, o CardView poderá ser instanciado em XAML e suas propriedades definidas:
<controls:CardView BorderColor="DarkGray"
CardTitle="Slavko Vlasic"
CardDescription="Lorem ipsum dolor sit..."
IconBackgroundColor="SlateGray"
IconImageSource="user.png"/>
A CardView também pode ser instanciado no código:
CardView card = new CardView
{
BorderColor = Color.DarkGray,
CardTitle = "Slavko Vlasic",
CardDescription = "Lorem ipsum dolor sit...",
IconBackgroundColor = Color.SlateGray,
IconImageSource = ImageSource.FromFile("user.png")
};
Personalizar a aparência com um ControlTemplate
Um controle personalizado que deriva da classe pode definir a ContentView aparência usando XAML, código ou pode não definir a aparência. Independentemente de como a aparência é definida, um ControlTemplate objeto pode substituir a aparência por um layout personalizado.
O CardView layout pode ocupar muito espaço para alguns casos de uso. A ControlTemplate pode 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 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>
A vinculação de dados em um ControlTemplate usa a TemplateBinding extensão de marcação para especificar associações. A ControlTemplate propriedade pode então ser definida como o objeto ControlTemplate definido, 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}"/>
As capturas de tela a seguir mostram uma instância padrão CardView e CardView cuja ControlTemplate foi substituída:
Para obter mais informações sobre modelos de controle, consulte Xamarin.Forms Modelos de controle.