ContentView

Článek
02/25/2025

vzorek k prohlížení. Prohlédněte si ukázku

ContentView rozhraní .NET Multi-Platform App UI (.NET MAUI) je ovládací prvek, který umožňuje vytváření vlastních a opakovaně použitelných ovládacích prvků.

Třída ContentView definuje Content vlastnost typu View, která představuje obsah ContentView. Tato vlastnost je zajištěna objektem BindableProperty, což znamená, že může být cílem datových vazeb a stylován.

Třída ContentView je odvozena ze třídy TemplatedView, která definuje vlastnost ControlTemplate bindable, vlastnost typu ControlTemplate, která určuje vzhled ovládacího prvku. Další informace o vlastnosti ControlTemplate naleznete v tématu Přizpůsobení vzhledu pomocíControlTemplate .

Poznámka

ContentView může obsahovat pouze jedno podřízené.

Vytvoření vlastního ovládacího prvku

Třída ContentView sama o sobě nabízí jen málo funkcionality, ale lze ji použít k vytvoření vlastního ovládacího prvku. Proces vytvoření vlastního ovládacího prvku je následující:

Vytvořte třídu, která je odvozena z ContentView třídy.
Definujte všechny vlastnosti ovládacího prvku nebo události v souboru kódu pro vlastní ovládací prvek.
Definujte uživatelské rozhraní vlastního ovládacího prvku.

Tento článek ukazuje, jak vytvořit ovládací prvek CardView, což je prvek uživatelského rozhraní, který zobrazuje obrázek, název a popis v rozložení podobné kartě.

Vytvoření odvozené třídy ContentView

Třída odvozená z ContentViewlze vytvořit pomocí šablony položky ContentView v aplikaci Visual Studio. Tato šablona vytvoří soubor XAML, ve kterém lze definovat uživatelské rozhraní vlastního ovládacího prvku, a soubor kódu, ve kterém lze definovat všechny vlastnosti ovládacího prvku, události a další logiku.

Definování vlastností ovládacího prvku

Všechny vlastnosti ovládacího prvku, události a další logiky by měly být definovány v souboru kódu pro ContentView-odvozenou třídu.

Vlastní ovládací prvek CardView definuje následující vlastnosti:

CardTitle, typu string, který představuje název zobrazený na kartě.
CardDescription, typu string, který představuje popis zobrazený na kartě.
IconImageSource, typu ImageSource, který představuje obrázek zobrazený na kartě.
IconBackgroundColor, typu Color, který představuje barvu pozadí obrázku zobrazeného na kartě.
BorderColor, typu Color, který představuje barvu ohraničení karty, ohraničení obrázku a dělicí čáru.
CardColor, typu Color, který představuje barvu pozadí karty.

Každá vlastnost je podporována instancí BindableProperty.

Následující příklad ukazuje CardTitle bindable vlastnost v souboru kódu pro CardView třídy:

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();
    }
}

Další informace o objektech BindableProperty naleznete v tématu Vlastnosti pro svázání.

Definování uživatelského rozhraní

Uživatelské rozhraní vlastního ovládacího prvku může být definováno v souboru XAML pro třídu odvozenou z ContentView, která používá ContentView jako kořenový prvek ovládacího prvku:

<ContentView ...
             xmlns:local="clr-namespace:CardViewDemo.Controls"
             x:Name="this"
             x:Class="CardViewDemo.Controls.CardView"
             x:DataType="local:CardView">
    <Border BindingContext="{x:Reference this}"
            BackgroundColor="{Binding CardColor}"
            Stroke="{Binding BorderColor}"
            ...>
        <Grid>
            ...
            <Border Stroke="{Binding BorderColor, FallbackValue='Black'}"
                    BackgroundColor="{Binding IconBackgroundColor, FallbackValue='Grey'}"
                   ...>
                <Image Source="{Binding IconImageSource}"
                       .. />
            </Border>
            <Label Text="{Binding CardTitle, FallbackValue='Card Title'}"
                   ... />
            <BoxView BackgroundColor="{Binding BorderColor, FallbackValue='Black'}"
                     ... />
            <Label Text="{Binding CardDescription, FallbackValue='Card description text.'}"
                   ... />
        </Grid>
    </Border>
</ContentView>

Element ContentView nastaví vlastnost x:Name na this, který lze použít pro přístup k objektu vázanému na instanci CardView. Prvky v rozložení nastavují vazby na své vlastnosti vůči hodnotám definovaným ve vázaném objektu. Další informace o datové vazbě naleznete v tématu Datové vazby.

Poznámka

Vlastnost FallbackValue ve výrazu Binding poskytuje výchozí hodnotu pro případ, že je vazba null.

Vytvoření instance vlastního ovládacího prvku

Odkaz na obor názvů vlastního ovládacího prvku musí být přidán na stránku, která ho instanciuje. Po přidání odkazu lze vytvořit instanci CardView a definovat její vlastnosti:

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

Následující snímek obrazovky ukazuje více objektů CardView:

snímek obrazovky objektů typu CardView

Přizpůsobení vzhledu pomocí ControlTemplate

Vlastní ovládací prvek odvozený z ContentView třídy může definovat jeho uživatelské rozhraní pomocí XAML nebo kódu, nebo nemusí vůbec definovat jeho uživatelské rozhraní. ControlTemplate lze použít k přepsání vzhledu ovládacího prvku bez ohledu na to, jak je tento vzhled definován.

Například rozložení CardView může zabírat příliš mnoho místa pro některé případy použití. ControlTemplate lze použít k přepsání rozložení CardView, které poskytuje kompaktnější zobrazení vhodné pro zhuštěný seznam:

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

Datová vazba v ControlTemplate používá značkovací rozšíření TemplateBinding k určení vazeb. Vlastnost ControlTemplate lze potom nastavit na definovaný objekt ControlTemplate pomocí jeho x:Key hodnoty. Následující příklad ukazuje vlastnost ControlTemplate nastavenou na instanci CardView:

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

Následující snímek obrazovky ukazuje standardní instanci CardView a několik instancí CardView, jejichž řídicí šablony byly přepsány:

snímek obrazovky CardView se přepsaným ovládacím objektem ControlTemplate

Další informace o šablonách ovládacích prvků naleznete v tématu Řídicí šablony.

Sdílet prostřednictvím