Xamarin.Forms ContentView

Örneği indirin

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

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

ContentViewSınıfı tek bir özelliği tanımlar:

• Xamarin_Forms _ContentView_Content "Data-LinkType =" Absolute-path ">Content bir View nesnedir. Bu özellik, BindableProperty veri bağlamalarının hedefi olması için bir nesne tarafından desteklenir.

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

• Xamarin_Forms _TemplatedView_ControlTemplate "Data-LinkType =" Absolute-path ">ControlTemplate , ControlTemplate denetimin görünümünü tanımlayabileceğiniz veya geçersiz kılabileceğiniz bir.

Özelliği hakkında daha fazla bilgi için ControlTemplate bkz. ControlTemplate.

Özel denetim oluşturma

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

Özel denetim oluşturma işlemi şu şekilde yapılır:

1. ContentViewVisual Studio 2019 ' deki şablonu kullanarak yeni bir sınıf oluşturun.
2. Yeni özel denetim için arka plan kod dosyasında herhangi bir benzersiz özellik veya olay tanımlayın.
3. Özel denetim için Kullanıcı arabirimini oluşturun.

Arka plan kod özellikleri oluşturma

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

• CardTitle: string kartta gösterilen başlığı temsil eden nesne.
• CardDescription: string kartta gösterilen açıklamayı temsil eden nesne.
• IconImageSource: ImageSource kartta gösterilen görüntüyü temsil eden nesne.
• IconBackgroundColor: Color kartta gösterilen görüntünün arka plan rengini temsil eden nesne.
• BorderColor: Color kart kenarlığının, görüntü kenarlığının ve ayırıcı çizginin rengini temsil eden bir nesne.
• CardColor: Color kartın arka plan rengini temsil eden nesne.

Her özellik bir örnek tarafından desteklenir BindableProperty . Bu destek, BindableProperty her bir özelliğin, MVVM düzeniyle biçimlendirilmiş ve birbirlerine bağlanmasını sağlar.

Aşağıdaki örnek, bir yedeklemenin nasıl oluşturulacağını gösterir 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, GetValueSetValue nesne değerlerini almak ve ayarlamak için ve yöntemlerini kullanır BindableProperty :

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

Nesneler hakkında daha fazla bilgi için BindableProperty bkz. BindableProperty.

Kullanıcı arabirimini tanımlama

Özel denetim kullanıcı arabirimi, ContentView Denetim için kök öğe olarak bir kullanır CardView . Aşağıdaki örnekte CardView xaml gösterilmektedir:

<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, x:Name örneğine bağlantılı nesneye erişmek için kullanılabilecek özelliği ContentViewolarak ayarlar CardView . Düzen içindeki öğeler, özellikleri üzerindeki bağlamaları, bağlı nesnede tanımlanan değerlere göre ayarlar.

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

Özel bir denetim örneği oluşturma

Özel Denetim ad alanına bir başvuru, özel denetimi Başlatan bir sayfaya eklenmelidir. Aşağıdaki örnek, XAML içindeki bir örneğe eklenen denetimler adlı bir ad alanı başvurusunu gösterir :

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

Başvuru eklendikten sonra CardView xaml 'de örneklenebilir ve özellikleri tanımlı olur:

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

CardViewKod içinde de bir 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")
};

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

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

CardViewDüzen bazı kullanım durumları için çok fazla alan içerebilir. ControlTemplateCardView , Yoğunlaştırılmış bir liste için uygun olan daha kompakt bir görünüm sağlamak için düzeni geçersiz kılabilir:

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

İçindeki veri bağlama ControlTemplate , TemplateBinding bağlamaları belirtmek için biçimlendirme uzantısını kullanır. ControlTemplateDaha sonra özelliği, değeri kullanılarak tanımlanmış ControlTemplate nesnesine ayarlanabilir x:Key . Aşağıdaki örnek, ControlTemplate bir örneği üzerinde ayarlanan özelliği gösterir CardView :

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

Aşağıdaki ekran görüntülerinde standart bir CardView örnek gösterilmektedir ve CardView bunlar ControlTemplate geçersiz kılınır:

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

İlgili bağlantılar

• ContentView örnek uygulaması
• Xamarin.Forms Data Binding
• Bağlanabilir Özellikler.
• Xamarin.Forms Control Templates