Aracılığıyla paylaş

Xamarin.Forms ContentView

  • Makale

sınıfı Xamarin.FormsContentView , tek bir alt öğe içeren bir türüdür Layout ve genellikle özel, yeniden kullanılabilir denetimler oluşturmak için kullanılır. ContentView sınıfı öğesinden TemplatedViewdevralır. Bu makale ve ilişkili örnek, sınıfını temel alan özel CardView bir denetimin ContentView nasıl oluşturulacağını açıklar.

Aşağıdaki ekran görüntüsünde sınıfından türetilen bir CardView denetim gösterilmektedir ContentView :

CardView örnek uygulama ekran görüntüsü

ContentView sınıfı tek bir özellik tanımlar:

  • Content bir View nesnedir. Bu özellik bir BindableProperty nesne tarafından yedeklendiğinden veri bağlamalarının hedefi olabilir.

ayrıca ContentView sınıfından bir özelliği devralır TemplatedView :

  • ControlTemplate denetimin görünümünü tanımlayabilen veya geçersiz kılabilen bir ControlTemplate öğedir.

özelliği hakkında ControlTemplate daha fazla bilgi için bkz . ControlTemplate ile görünümü özelleştirme.

Özel denetim oluşturma

sınıfı ContentView tek başına çok az işlevsellik sunar, ancak özel denetim oluşturmak için kullanılabilir. Örnek proje, kart benzeri bir CardView düzende görüntü, başlık ve açıklama görüntüleyen bir kullanıcı arabirimi öğesi olan bir denetim tanımlar.

Özel denetim oluşturma işlemi şu şekildedir:

  1. Visual Studio 2019'da şablonu kullanarak ContentView yeni bir sınıf oluşturun.
  2. Yeni özel denetim için arka planda kod dosyasında benzersiz özellikleri veya olayları tanımlayın.
  3. Özel denetim için kullanıcı arabirimini oluşturun.

Not

Düzeni XAML yerine kodda tanımlanan özel bir denetim oluşturmak mümkündür. Basitlik için örnek uygulama yalnızca XAML düzenine sahip tek CardView bir sınıfı tanımlar. Ancak örnek uygulama, kodda özel denetimi kullanma işlemini gösteren bir CardViewCodePage sınıfı içerir.

Arka planda kod özellikleri oluşturma

Özel CardView denetim aşağıdaki özellikleri tanımlar:

  • CardTitlestring: kartta gösterilen başlığı temsil eden bir nesne.
  • CardDescriptionstring: kartta gösterilen açıklamayı temsil eden bir nesne.
  • IconImageSource: kartta gösterilen görüntüyü temsil eden bir ImageSource nesne.
  • IconBackgroundColorColor: kartta gösterilen resmin arka plan rengini temsil eden nesne.
  • BorderColorColor: Kart kenarlığı, resim kenarlığı ve ayırıcı çizginin rengini temsil eden nesne.
  • CardColorColor: kartın arka plan rengini temsil eden nesne.

Not

Özellik, BorderColor gösterim amacıyla birden çok öğeyi etkiler. Gerekirse bu özellik üç özelliğe ayrılabilir.

Her özellik bir BindableProperty örnek tarafından desteklenir. Yedekleme BindableProperty , MVVM deseni kullanılarak her özelliğin stil ve bağlı olmasını sağlar.

Aşağıdaki örnekte, bir yedeklemenin nasıl oluşturulacağı gösterilmektedir 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

Özel özellik, nesne değerlerini almak ve ayarlamak BindableProperty için ve SetValue yöntemlerini kullanırGetValue:

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

Nesneler hakkında BindableProperty daha fazla bilgi için bkz . Bağlanabilir Özellikler.

Kullanıcı arabirimi tanımlama

Özel denetim kullanıcı arabirimi, denetimin kök öğesi CardView olarak bir ContentView kullanır. Aşağıdaki örnekte XAML gösterilmektedir CardView :

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

ContentView öğesi, örneğine x:Name bağlı CardView nesneye erişmek için kullanılabilen özelliğini buna ayarlar. Düzendeki öğeler, özelliklerine bağlı nesnede tanımlanan değerlere bağlar.

Veri bağlama hakkında daha fazla bilgi için bkz Xamarin.Forms . Veri Bağlama.

Not

özelliği, FallbackValue bağlama nullolması durumunda varsayılan bir değer sağlar. Bu, Visual Studio'daki XAML Önizleyicisi'nin denetimi işlemesine CardView de olanak tanır.

Özel denetim örneği oluşturma

Özel denetim ad alanına başvuru, özel denetimin örneğini oluşturan bir sayfaya eklenmelidir. Aşağıdaki örnekte, XAML'de bir örneğe eklenen denetimler adlı ad ContentPage alanı başvurusu gösterilmektedir:

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

Başvuru eklendikten CardView sonra XAML'de örneği oluşturulabilir ve özellikleri tanımlanır:

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

A CardView örneği kodda da oluşturulabilir:

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

ControlTemplate ile görünümü özelleştirme

sınıfından ContentView türetilen özel bir denetim, XAML, kod kullanarak görünümü tanımlayabilir veya hiç görünüm tanımlamayabilir. Görünümün nasıl tanımlandığına bakılmaksızın, nesne ControlTemplate özel bir düzende görünümü geçersiz kılabilir.

Düzen, CardView bazı kullanım örnekleri için çok fazla yer kaplayabilir. , ControlTemplate sıkıştırılmış liste için uygun olan daha kompakt bir görünüm sağlamak için düzeni geçersiz kılabilir CardView :

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

içindeki ControlTemplate veri bağlaması, bağlamaları belirtmek için işaretleme uzantısını kullanır TemplateBinding . Daha ControlTemplate sonra özelliği, değerini kullanarak tanımlı ControlTemplate nesnesine x:Key ayarlanabilir. Aşağıdaki örnekte, bir CardView örnekte ayarlanan özellik gösterilmektedirControlTemplate:

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

Aşağıdaki ekran görüntüleri standart CardView bir örneği ve CardView geçersiz kılınmış olan ControlTemplate örneği gösterir:

CardView ControlTemplate ekran görüntüsü

Denetim şablonları hakkında daha fazla bilgi için bkz Xamarin.Forms . Denetim Şablonları.