Xamarin.Forms ContentView

Stažení ukázky

Xamarin.FormsContentView Třída je typ Layout , který obsahuje jeden podřízený element a obvykle se používá k vytvoření vlastních, opakovaně použitelných ovládacích prvků. ContentViewTřída dědí z TemplatedView . Tento článek a související ukázka vysvětlují, jak vytvořit vlastní CardView ovládací prvek na základě ContentView třídy.

Následující snímek obrazovky ukazuje CardView ovládací prvek, který je odvozen z ContentView třídy:

ContentViewTřída definuje jednu vlastnost:

• Xamarin_Forms _ContentView_Content "data-LINKTYPE =" absolutní cestu ">Content je View objekt. Tato vlastnost je zálohována BindableProperty objektem, takže může být cílem datových vazeb.

ContentViewTaké dědí vlastnost z TemplatedView třídy:

• Xamarin_Forms _TemplatedView_ControlTemplate "data-LINKTYPE =" absolutní cestu ">ControlTemplate je ControlTemplate , který může definovat nebo potlačit vzhled ovládacího prvku.

Další informace o této ControlTemplate vlastnosti naleznete v tématu ControlTemplate.

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

ContentViewTřída nabízí stejnou funkci, ale je možné ji použít k vytvoření vlastního ovládacího prvku. Vzorový projekt definuje CardView ovládací prvek – prvek uživatelského rozhraní, který zobrazí obrázek, název a popis v rozložení podobné kartě.

Proces vytváření vlastního ovládacího prvku je následující:

1. vytvořte novou třídu pomocí ContentView šablony v Visual Studio 2019.
2. Definujte jakékoli jedinečné vlastnosti nebo události v souboru kódu na pozadí pro nový vlastní ovládací prvek.
3. Vytvořte uživatelské rozhraní vlastního ovládacího prvku.

Vytvořit vlastnosti kódu na pozadí

CardViewVlastní ovládací prvek definuje následující vlastnosti:

• CardTitle: string objekt, který představuje název zobrazený na kartě.
• CardDescription: string objekt, který představuje popis zobrazený na kartě.
• IconImageSource: ImageSource objekt, který představuje obrázek zobrazený na kartě.
• IconBackgroundColor: Color objekt, který představuje barvu pozadí obrázku zobrazeného na kartě.
• BorderColor: Color objekt, který představuje barvu ohraničení karty, ohraničení obrázku a oddělovací čáry.
• CardColor: Color objekt, který představuje barvu pozadí karty.

Každá vlastnost je zálohována BindableProperty instancí. Zálohování BindableProperty umožňuje, aby jednotlivé vlastnosti byly ve stylu a vázané pomocí vzoru MVVM.

Následující příklad ukazuje, jak vytvořit zálohu 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

Vlastní vlastnost používá GetValueSetValue metody a k získání a nastavení BindableProperty hodnot objektu:

public string CardTitle
{
    get => (string)GetValue(CardView.CardTitleProperty);
    set => SetValue(CardView.CardTitleProperty, value);
}

Další informace o BindableProperty objektech naleznete v tématu BindablePropertys možností vazby.

Definovat uživatelské rozhraní

Uživatelské rozhraní vlastního ovládacího prvku používá ContentView jako kořenový prvek pro CardView ovládací prvek. Následující příklad ukazuje CardView kód 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>

ContentViewElement nastaví x:Name vlastnost na hodnotu, ContentViewkterou lze použít pro přístup k objektu svázanému s CardView instancí. Prvky v sadě rozložení vazby na jejich vlastnosti na hodnoty definované u vázaného objektu.

Další informace o datové vazbě najdete v tématu Xamarin.Forms Data Binding .

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á vytváří instanci vlastního ovládacího prvku. Následující příklad ukazuje odkaz na obor názvů nazvaný ovládací prvky přidané do instance v jazyce XAML:

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

Po přidání odkazu CardView lze vytvořit instanci v jazyce XAML a definované vlastnosti:

<controls:CardView BorderColor="DarkGray"
                   CardTitle="Slavko Vlasic"
                   CardDescription="Lorem ipsum dolor sit..."
                   IconBackgroundColor="SlateGray"
                   IconImageSource="user.png"/>

CardViewLze také vytvořit instanci v kódu:

CardView card = new CardView
{
    BorderColor = Color.DarkGray,
    CardTitle = "Slavko Vlasic",
    CardDescription = "Lorem ipsum dolor sit...",
    IconBackgroundColor = Color.SlateGray,
    IconImageSource = ImageSource.FromFile("user.png")
};

Přizpůsobení vzhledu pomocí ControlTemplate

Vlastní ovládací prvek, který je odvozen z ContentView třídy, může definovat vzhled pomocí jazyka XAML, kódu nebo nemusí vůbec definovat vzhled. Bez ohledu na to, jak je vzhled definován, ControlTemplate může objekt potlačit vzhled pomocí vlastního rozložení.

CardViewRozložení může pro některé případy použití zabírat příliš mnoho místa. ControlTemplateMůže přepsat CardView rozložení a poskytnout tak kompaktnější zobrazení, které je 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 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>

Datová vazba v nástroji ControlTemplate používá TemplateBinding rozšíření značek k určení vazeb. ControlTemplateVlastnost může být poté nastavena na definovaný objekt ControlTemplate pomocí jeho x:Key hodnoty. Následující příklad ukazuje ControlTemplate vlastnost nastavenou v CardView instanci:

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

Následující snímky obrazovky ukazují standardní CardView instanci a CardView jejíž přepsání bylo ControlTemplate potlačeno:

Další informace o šablonách ovládacích prvků naleznete v tématu Xamarin.Forms Control Templates .

Související odkazy

• Ukázková aplikace ContentView
• Xamarin.Forms Data Binding
• Vlastnostis možností vazby.
• Xamarin.Forms Control Templates