Partilhar via

Xamarin.Forms Exibição de conteúdo

A Xamarin.FormsContentView classe é um tipo que Layout 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:

Captura de tela do aplicativo de exemplo CardView

A ContentView classe define uma única propriedade:

  • Content é um objeto View. Essa propriedade é apoiada por um BindableProperty objeto para que possa ser o destino de associações de dados.

O ContentView também herda uma propriedade da TemplatedView classe:

  • ControlTemplate é um ControlTemplate que pode definir ou substituir a aparência do controle.

Para obter mais informações sobre a ControlTemplate propriedade, consulte Personalizar a 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, um título e uma descrição em um layout semelhante a um cartão.

O processo para criar um controle personalizado é:

  1. Crie uma nova classe usando o ContentView modelo no Visual Studio 2019.
  2. Defina quaisquer propriedades ou eventos exclusivos no arquivo code-behind para o novo controle personalizado.
  3. Crie a interface do usuário para o controle personalizado.

Observação

É possível criar um controle personalizado cujo layout é definido no 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 consumo do controle personalizado no código.

Criar propriedades code-behind

O CardView controle personalizado define as seguintes propriedades:

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

Observação

A BorderColor propriedade afeta vários itens para fins de demonstração. Esta 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 associada, usando o padrão MVVM.

O exemplo a seguir mostra como criar um 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

A propriedade customizada usa os GetValue métodos and SetValue para obter e configurar os valores do 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 associáveis.

Definir interface do usuário

A interface do usuário do controle personalizado usa a ContentView como o elemento raiz do 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 como this, que pode ser usada para acessar o objeto associado à CardView instância. Os elementos no layout definem associações em suas propriedades para valores definidos no objeto associado.

Para obter mais informações sobre a associação de dados, consulte Xamarin.Forms Associaçã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 controls adicionada a uma ContentPage instância em XAML:

<ContentPage ...
             xmlns:controls="clr-namespace:CardViewDemo.Controls" >

Depois que a referência for adicionada, ela CardView poderá ser instanciada 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 derivado 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 layout para fornecer uma visualização mais compacta CardView , 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 associação de dados em um ControlTemplate usa a TemplateBinding extensão de marcação para especificar associações. Em seguida, a ControlTemplate propriedade pode 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:

Captura de tela do CardView ControlTemplate

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

  • Last updated on