ContentView

Článek
08/30/2024

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

Třída ContentView definuje vlastnost typu View, která představuje obsah ContentViewContent . Tato vlastnost je podporována objektem BindableProperty , což znamená, že to může být cíl datových vazeb a styl.

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

Poznámka:

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

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

Třída ContentView nabízí sama o sobě malé funkce, 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 od třídy ContentView.
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 CardView ovládací prvek, 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

Odvozenou ContentViewtřídu lze vytvořit pomocí šablony položky ContentView v sadě 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í CardView ovládací prvek 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í čáry.
CardColor, typu Color, který představuje barvu pozadí karty.

Každá vlastnost je zajištěna BindableProperty instancí.

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

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

Definování uživatelského rozhraní

Uživatelské rozhraní vlastního ovládacího prvku lze definovat v souboru XAML pro ContentView-odvozenou třídu, která používá ContentView jako kořenový prvek ovládacího prvku:

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

Element ContentView nastaví x:Name vlastnost na this, který lze použít pro přístup k objektu vázanému na CardView instanci. Prvky v sadě rozložení vazby na jejich vlastnosti na hodnoty definované v 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 v případě, že vazba je 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á vytvoří instanci vlastního ovládacího prvku. Po přidání CardView odkazu je možné vytvořit instanci a její vlastnosti definované:

<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 CardView objektů:

Screenshot of CardView objects.

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í. Dá ControlTemplate se použít k přepsání vzhledu ovládacího prvku bez ohledu na to, jak je tento vzhled definován.

Například CardView rozložení může zabírat příliš mnoho místa pro některé případy použití. Rozložení ControlTemplate lze přepsat tak, aby poskytovalo kompaktnější CardView 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 datové vazbě ControlTemplate používá TemplateBinding rozšíření značek k určení vazeb. Vlastnost ControlTemplate pak lze nastavit na definovaný ControlTemplate objekt pomocí jeho x:Key hodnoty. Následující příklad ukazuje ControlTemplate vlastnost nastavenou CardView na instanci:

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

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

Screenshot of CardView overridden with a ControlTemplate.

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

Sdílet prostřednictvím