Xamarin.Forms ContentView
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 TemplatedView
devralı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
:
ContentView
sınıfı tek bir özellik tanımlar:
Content
birView
nesnedir. Bu özellik birBindableProperty
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 birControlTemplate
öğ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:
- Visual Studio 2019'da şablonu kullanarak
ContentView
yeni bir sınıf oluşturun. - Yeni özel denetim için arka planda kod dosyasında benzersiz özellikleri veya olayları tanımlayın.
- Ö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:
CardTitle
string
: kartta gösterilen başlığı temsil eden bir nesne.CardDescription
string
: kartta gösterilen açıklamayı temsil eden bir nesne.IconImageSource
: kartta gösterilen görüntüyü temsil eden birImageSource
nesne.IconBackgroundColor
Color
: kartta gösterilen resmin arka plan rengini temsil eden nesne.BorderColor
Color
: Kart kenarlığı, resim kenarlığı ve ayırıcı çizginin rengini temsil eden nesne.CardColor
Color
: 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 null
olması 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:
Denetim şablonları hakkında daha fazla bilgi için bkz Xamarin.Forms . Denetim Şablonları.