Denetim şablonları
.NET Çok Platformlu Uygulama Kullanıcı Arabirimi (.NET MAUI) denetim şablonları, türetilmiş özel denetimlerin ve ContentPage türetilmiş sayfaların ContentView görsel yapısını tanımlamanızı sağlar. Denetim şablonları, özel denetim veya sayfa için kullanıcı arabirimini (UI) denetimi veya sayfayı uygulayan mantıktan ayırır. Önceden tanımlanmış bir konumdaki şablonlu özel denetime veya şablonlu sayfaya ek içerik de eklenebilir.
Örneğin, özel denetim tarafından sağlanan kullanıcı arabirimini yeniden tanımlayan bir denetim şablonu oluşturulabilir. Denetim şablonu daha sonra gerekli özel denetim örneği tarafından kullanılabilir. Alternatif olarak, bir uygulamadaki birden çok sayfa tarafından kullanılacak herhangi bir ortak kullanıcı arabirimini tanımlayan bir denetim şablonu oluşturulabilir. Denetim şablonu daha sonra birden çok sayfa tarafından kullanılabilir ve her sayfa benzersiz içeriğini görüntülemeye devam eder.
ControlTemplate oluşturma
Aşağıdaki örnekte özel bir CardView
denetimin kodu gösterilmektedir:
public class CardView : ContentView
{
public static readonly BindableProperty CardTitleProperty =
BindableProperty.Create(nameof(CardTitle), typeof(string), typeof(CardView), string.Empty);
public static readonly BindableProperty CardDescriptionProperty =
BindableProperty.Create(nameof(CardDescription), typeof(string), typeof(CardView), string.Empty);
public string CardTitle
{
get => (string)GetValue(CardTitleProperty);
set => SetValue(CardTitleProperty, value);
}
public string CardDescription
{
get => (string)GetValue(CardDescriptionProperty);
set => SetValue(CardDescriptionProperty, value);
}
...
}
CardView
sınıfından ContentView türetilen sınıfı, verileri kart benzeri bir düzende görüntüleyen özel bir denetimi temsil eder. sınıfı, görüntülediği veriler için bağlanabilir özellikler tarafından yedeklenen özellikler içerir. Ancak, CardView
sınıfı herhangi bir kullanıcı arabirimi tanımlamaz. Bunun yerine, kullanıcı arabirimi bir denetim şablonuyla tanımlanır. Türetilmiş özel denetimler oluşturma ContentView hakkında daha fazla bilgi için bkz . ContentView.
Türüyle bir ControlTemplate denetim şablonu oluşturulur. Oluşturduğunuzda ControlTemplate, özel denetim veya sayfa için kullanıcı arabirimi oluşturmak üzere nesneleri birleştirirsiniz View . Bir ControlTemplate , kök öğesi olarak yalnızca bir tane View içermelidir. Ancak, kök öğesi genellikle diğer View nesneleri içerir. Nesnelerin birleşimi, denetimin görsel yapısını oluşturur.
satır ControlTemplate içinde tanımlanabilir olsa da, bildirim göndermeye ControlTemplate yönelik tipik yaklaşım bir kaynak sözlüğündeki bir kaynaktır. Denetim şablonları kaynak olduğundan, tüm kaynaklar için geçerli olan aynı kapsam kurallarına uyarlar. Örneğin, uygulama düzeyindeki kaynak sözlüğünüzde bir denetim şablonu bildirirseniz, şablon uygulamanızın herhangi bir yerinde kullanılabilir. Şablonu bir sayfada tanımlarsanız, denetim şablonunu yalnızca o sayfa kullanabilir. Kaynaklar hakkında daha fazla bilgi için bkz . Kaynak sözlükleri.
Aşağıdaki XAML örneği, nesneler için CardView
bir ControlTemplate gösterir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...>
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewControlTemplate">
<Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
BackgroundColor="{Binding CardColor}"
BorderColor="{Binding BorderColor}"
...>
<!-- UI objects that define the CardView visual structure -->
</Frame>
</ControlTemplate>
</ContentPage.Resources>
...
</ContentPage>
kaynak ControlTemplate olarak bildirildiğinde, kaynak sözlüğünde tanımlanabilmesi x:Key
için özniteliğiyle belirtilen bir anahtarı olmalıdır. Bu örnekte öğesinin kök öğesi CardViewControlTemplate
bir Frame nesnedir. Frame nesnesi, şablonun RelativeSource
uygulanacağı çalışma zamanı nesne örneğine ayarlamak BindingContext için işaretleme uzantısını kullanır. Bu, şablonlu üst öğe olarak bilinir. Frame nesnesi, bir nesnenin görsel yapısını tanımlamak için denetimlerin bir CardView
bileşimini kullanır. Bu nesnelerin bağlama ifadeleri, kök Frame öğesinden devralındığı BindingContext için özelliklere karşı CardView
çözümleniyor. İşaretleme uzantısı hakkında RelativeSource
daha fazla bilgi için bkz . Göreli bağlamalar.
ControlTemplate kullanma
özelliği ControlTemplate denetim şablonu nesnesine ayarlanarak ControlTemplate türetilmiş bir ContentView özel denetime uygulanabilir. Benzer şekilde, bir ControlTemplate türetilmiş bir ContentPage sayfaya özelliğini denetim şablonu nesnesine ayarlayarak ControlTemplate uygulanabilir. Çalışma zamanında, bir ControlTemplate uygulandığında, içinde ControlTemplate tanımlanan tüm denetimler şablonlu özel denetimin görsel ağacına veya şablonlu sayfaya eklenir.
Aşağıdaki örnekte iki CardView
nesnenin CardViewControlTemplate
özelliğine ControlTemplate atanması gösterilmektedir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ControlTemplateDemos.Controls"
...>
<StackLayout Margin="30">
<controls:CardView BorderColor="DarkGray"
CardTitle="John Doe"
CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
IconBackgroundColor="SlateGray"
IconImageSource="user.png"
ControlTemplate="{StaticResource CardViewControlTemplate}" />
<controls:CardView BorderColor="DarkGray"
CardTitle="Jane Doe"
CardDescription="Phasellus eu convallis mi. In tempus augue eu dignissim fermentum. Morbi ut lacus vitae eros lacinia."
IconBackgroundColor="SlateGray"
IconImageSource="user.png"
ControlTemplate="{StaticResource CardViewControlTemplate}" />
</StackLayout>
</ContentPage>
Bu örnekte içindeki denetimler CardViewControlTemplate
, her CardView
nesnenin görsel ağacının bir parçası haline gelir. Denetim şablonunun kök Frame nesnesi şablonun üst Frame öğesine ayarladığı BindingContext için ve alt öğeleri bağlama ifadelerini her CardView
nesnenin özelliklerine göre çözümler.
Aşağıdaki ekran görüntüsünde CardViewControlTemplate
nesnelere CardView
uygulanan gösterilir:
Önemli
Bir denetim örneğine uygulanan nokta ControlTemplate , şablonlu özel denetim veya şablonlu sayfadaki yöntemi geçersiz kılarak OnApplyTemplate algılanabilir. Daha fazla bilgi için bkz . Şablondan adlandırılmış öğe alma.
TemplateBinding ile parametreleri geçirme
TemplateBinding
İşaretlemeyi uzantısı, şablonlu özel denetim veya şablonlu sayfa tarafından tanımlanan bir ortak özelliğe bir ControlTemplate öğenin özelliğini bağlar. kullandığınızda TemplateBinding
, şablona parametre olarak davranması için denetimdeki özellikleri etkinleştirirsiniz. Bu nedenle, şablonlu bir özel denetim veya şablonlu sayfadaki bir özellik ayarlandığında, bu değer üzerinde öğesinin olduğu öğeye TemplateBinding
geçirilir.
Önemli
İşaretleme TemplateBinding
ifadesi, önceki denetim şablonundan bağlamanın kaldırılmasını sağlar RelativeSource
ve ifadelerin Binding
yerini alır.
İşaretleme TemplateBinding
uzantısı aşağıdaki özellikleri tanımlar:
- Path, türündeki
string
özelliğin yoludur. - Mode, türündekiBindingMode, değişikliklerin kaynak ve hedef arasında yayıldığı yön.
- Converter, türündeki IValueConverterbağlama değeri dönüştürücüsü.
- ConverterParameter, türündeki
object
bağlama değeri dönüştürücüsünün parametresidir. - StringFormat, türündeki
string
bağlama için dize biçimidir.
ContentProperty
biçimlendirme uzantısının TemplateBinding
adıdırPath. Bu nedenle, yol ifadedeki ilk öğeyse TemplateBinding
, işaretleme uzantısının "Path=" bölümü atlanabilir. Bu özellikleri bağlama ifadesinde kullanma hakkında daha fazla bilgi için bkz . Veri bağlama.
Uyarı
İşaretleme TemplateBinding
uzantısı yalnızca içinde ControlTemplatekullanılmalıdır. Ancak, dışında ControlTemplate bir TemplateBinding
ifade kullanmaya çalışmak bir derleme hatasına veya bir özel durum oluşturulmasına neden olmaz.
Aşağıdaki XAML örneği, işaretleme uzantısını TemplateBinding
kullanan nesneler için CardView
bir ControlTemplate gösterir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...>
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewControlTemplate">
<Frame BackgroundColor="{TemplateBinding CardColor}"
BorderColor="{TemplateBinding BorderColor}"
...>
<!-- UI objects that define the CardView visual structure -->
</Frame>
</ControlTemplate>
</ContentPage.Resources>
...
</ContentPage>
Bu örnekte, TemplateBinding
işaretleme uzantısı bağlama ifadelerini her CardView
nesnenin özelliklerine karşı çözümler. Aşağıdaki ekran görüntüsünde CardViewControlTemplate
nesnelere CardView
uygulanan gösterilir:
Önemli
İşaretleme uzantısının TemplateBinding
kullanılması, şablondaki kök öğesinin işaretleme uzantısıyla RelativeSource
şablon üst öğesi olarak ayarlanmasına BindingContext ve ardından işaretleme uzantısıyla alt nesnelerin bağlamalarını çözümlemeye Binding
eşdeğerdir. Aslında, TemplateBinding
işaretleme uzantısı olan Source
RelativeBindingSource.TemplatedParent
bir Binding
oluşturur.
Stil ile ControlTemplate uygulama
Denetim şablonları stillerle de uygulanabilir. Bu, öğesini kullanan ControlTemplateörtük veya açık bir stil oluşturularak elde edilir.
Aşağıdaki XAML örneğinde, kullanan örtük bir stil gösterilmektedirCardViewControlTemplate
:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ControlTemplateDemos.Controls"
...>
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewControlTemplate">
...
</ControlTemplate>
<Style TargetType="controls:CardView">
<Setter Property="ControlTemplate"
Value="{StaticResource CardViewControlTemplate}" />
</Style>
</ContentPage.Resources>
<StackLayout Margin="30">
<controls:CardView BorderColor="DarkGray"
CardTitle="John Doe"
CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
IconBackgroundColor="SlateGray"
IconImageSource="user.png" />
...
</StackLayout>
</ContentPage>
Bu örnekte örtük her nesneye otomatik olarak uygulanır ve her CardView
CardView
birinin özelliğini olarak CardViewControlTemplate
ayarlarControlTemplate. Style
Stiller hakkında daha fazla bilgi için bkz . Stiller.
Denetimin kullanıcı arabirimini yeniden tanımlama
örneği ControlTemplate oluşturulur ve türetilmiş bir ContentView özel denetimin veya türetilmiş bir ContentPage sayfanın özelliğine ControlTemplate atanırsa, özel denetim veya sayfa için tanımlanan görsel yapısı içinde ControlTemplatetanımlanan görsel yapısıyla değiştirilir.
Örneğin, CardViewUI
özel denetim aşağıdaki XAML'yi kullanarak kullanıcı arabirimini tanımlar:
<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ControlTemplateDemos.Controls.CardViewUI"
x:Name="this">
<Frame BindingContext="{x:Reference this}"
BackgroundColor="{Binding CardColor}"
BorderColor="{Binding BorderColor}"
...>
<!-- UI objects that define the CardView visual structure -->
</Frame>
</ContentView>
Ancak, bu kullanıcı arabirimini oluşturan denetimler, içinde ControlTemplateyeni bir görsel yapı tanımlayıp nesnesinin ControlTemplate CardViewUI
özelliğine atanarak değiştirilebilir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
...>
<ContentPage.Resources>
<ControlTemplate x:Key="CardViewCompressed">
<Grid RowDefinitions="100"
ColumnDefinitions="100, *">
<Image Source="{TemplateBinding IconImageSource}"
BackgroundColor="{TemplateBinding IconBackgroundColor}"
...>
<!-- Other UI objects that define the CardView visual structure -->
</Grid>
</ControlTemplate>
</ContentPage.Resources>
<StackLayout Margin="30">
<controls:CardViewUI BorderColor="DarkGray"
CardTitle="John Doe"
CardDescription="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elit dolor, convallis non interdum."
IconBackgroundColor="SlateGray"
IconImageSource="user.png"
ControlTemplate="{StaticResource CardViewCompressed}" />
...
</StackLayout>
</ContentPage>
Bu örnekte, nesnenin CardViewUI
görsel yapısı, daraltılmış liste için uygun daha kompakt bir görsel yapı sağlayan bir içinde yeniden tanımlanır ControlTemplate :
İçerik yerine ContentPresenter yazın
şablonlu ContentPresenter özel denetim veya şablonlu sayfa tarafından görüntülenecek içeriğin nerede görüneceğini işaretlemek için bir denetim şablonuna yerleştirilebilir. Denetim şablonunu kullanan özel denetim veya sayfa, tarafından ContentPresentergörüntülenecek içeriği tanımlar. Aşağıdaki diyagramda ControlTemplate , mavi dikdörtgenle işaretlenmiş bir de dahil olmak üzere bir dizi denetim içeren bir ContentPresenter sayfa için gösterilir:
Aşağıdaki XAML, görsel yapısında bir içeren adlı TealTemplate
bir ContentPresenter denetim şablonunu gösterir:
<ControlTemplate x:Key="TealTemplate">
<Grid RowDefinitions="0.1*, 0.8*, 0.1*">
<BoxView Color="Teal" />
<Label Margin="20,0,0,0"
Text="{TemplateBinding HeaderText}"
... />
<ContentPresenter Grid.Row="1" />
<BoxView Grid.Row="2"
Color="Teal" />
<Label x:Name="changeThemeLabel"
Grid.Row="2"
Margin="20,0,0,0"
Text="Change Theme"
...>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnChangeThemeLabelTapped" />
</Label.GestureRecognizers>
</Label>
<controls:HyperlinkLabel Grid.Row="2"
Margin="0,0,20,0"
Text="Help"
Url="https://learn.microsoft.com/dotnet/maui/"
... />
</Grid>
</ControlTemplate>
Aşağıdaki örnekte, türetilmiş bir ContentPage sayfanın özelliğine ControlTemplate atanmış olan gösterilmektedirTealTemplate
:
<controls:HeaderFooterPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:controls="clr-namespace:ControlTemplateDemos.Controls"
ControlTemplate="{StaticResource TealTemplate}"
HeaderText="MyApp"
...>
<StackLayout Margin="10">
<Entry Placeholder="Enter username" />
<Entry Placeholder="Enter password"
IsPassword="True" />
<Button Text="Login" />
</StackLayout>
</controls:HeaderFooterPage>
Çalışma zamanında sayfaya TealTemplate
uygulandığında, sayfa içeriği denetim şablonunda tanımlananla değiştirilir ContentPresenter :
Şablondan adlandırılmış öğe alma
Bir denetim şablonundaki adlandırılmış öğeler, şablonlanmış özel denetimden veya şablonlu sayfadan alınabilir. Bu, bulunursa örneklenen ControlTemplate görsel ağaçtaki adlandırılmış öğeyi döndüren yöntemiyle GetTemplateChild elde edilebilir. Aksi takdirde döndürür null
.
Bir denetim şablonu örneği oluşturulduktan sonra, şablonun OnApplyTemplate yöntemi çağrılır. GetTemplateChild Bu nedenle yöntem, şablonlu denetim veya şablonlu sayfadaki bir OnApplyTemplate geçersiz kılmadan çağrılmalıdır.
Önemli
yöntemi GetTemplateChild yalnızca yöntem çağrıldıktan sonra OnApplyTemplate çağrılmalıdır.
Aşağıdaki XAML, türetilmiş sayfalara ContentPage uygulanabilecek adlı TealTemplate
bir denetim şablonunu gösterir:
<ControlTemplate x:Key="TealTemplate">
<Grid>
...
<Label x:Name="changeThemeLabel"
Text="Change Theme"
...>
<Label.GestureRecognizers>
<TapGestureRecognizer Tapped="OnChangeThemeLabelTapped" />
</Label.GestureRecognizers>
</Label>
...
</Grid>
</ControlTemplate>
Bu örnekte, Label öğesi adlandırılmıştır ve şablonlu sayfanın kodunda alınabilir. Bu, şablonlu sayfanın geçersiz kılmasından OnApplyTemplate yöntemini çağırarak GetTemplateChild elde edilir:
public partial class AccessTemplateElementPage : HeaderFooterPage
{
Label themeLabel;
public AccessTemplateElementPage()
{
InitializeComponent();
}
protected override void OnApplyTemplate()
{
base.OnApplyTemplate();
themeLabel = (Label)GetTemplateChild("changeThemeLabel");
themeLabel.Text = OriginalTemplate ? "Aqua Theme" : "Teal Theme";
}
}
Bu örnekte adlı nesne changeThemeLabel
örneği Label oluşturulduktan sonra ControlTemplate alınır. changeThemeLabel
daha sonra sınıfı tarafından AccessTemplateElementPage
erişilebilir ve işlenebilir. Aşağıdaki ekran görüntüsünde, tarafından Label görüntülenen metnin değiştirildiği gösterilmektedir:
Görünüm modeline bağlama
Bir ControlTemplate , şablonlanmış üst öğeye (şablonun ControlTemplate uygulandığı çalışma zamanı nesne örneği) bağlansa bile bir görünüm modeline bağlanabilir.
Aşağıdaki XAML örneğinde adlı PeopleViewModel
bir görünüm modeli kullanan bir sayfa gösterilmektedir:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:ControlTemplateDemos"
xmlns:controls="clr-namespace:ControlTemplateDemos.Controls"
...>
<ContentPage.BindingContext>
<local:PeopleViewModel />
</ContentPage.BindingContext>
<ContentPage.Resources>
<DataTemplate x:Key="PersonTemplate">
<controls:CardView BorderColor="DarkGray"
CardTitle="{Binding Name}"
CardDescription="{Binding Description}"
ControlTemplate="{StaticResource CardViewControlTemplate}" />
</DataTemplate>
</ContentPage.Resources>
<StackLayout Margin="10"
BindableLayout.ItemsSource="{Binding People}"
BindableLayout.ItemTemplate="{StaticResource PersonTemplate}" />
</ContentPage>
Bu örnekte, BindingContext sayfanın örneği olarak PeopleViewModel
ayarlanmıştır. Bu görünüm modeli bir People
koleksiyonu ve adlı bir ICommand öğesini DeletePersonCommand
kullanıma sunar. StackLayout sayfadaki, koleksiyona veri bağlamak People
için bağlanabilir bir düzen kullanır ve ItemTemplate
bağlanabilir düzenin kaynağı ayarlanırPersonTemplate
. Bu DataTemplate , koleksiyondaki People
her öğenin bir CardView
nesne kullanılarak görüntüleneceğini belirtir. Nesnesinin CardView
görsel yapısı adlı CardViewControlTemplate
bir ControlTemplate kullanılarak tanımlanır:
<ControlTemplate x:Key="CardViewControlTemplate">
<Frame BindingContext="{Binding Source={RelativeSource TemplatedParent}}"
BackgroundColor="{Binding CardColor}"
BorderColor="{Binding BorderColor}"
...>
<!-- UI objects that define the CardView visual structure -->
</Frame>
</ControlTemplate>
Bu örnekte öğesinin kök öğesi ControlTemplate bir Frame nesnedir. Frame nesnesi, işaretleme uzantısını RelativeSource
şablonlanmış üst öğeye ayarlamak BindingContext için kullanır. nesnesinin ve alt öğelerinin Frame bağlama ifadeleri, kök Frame öğesinden devralındığı BindingContext için özelliklere karşı CardView
çözümleniyor. Aşağıdaki ekran görüntüsünde koleksiyonun görüntülendiği sayfa gösterilmektedir People
:
Içindeki nesneler ControlTemplate şablonlu üst öğesindeki özelliklere bağlanırken, Button denetim şablonunun içindekiler hem şablonlanmış üst öğesine hem de görünüm modelindeki öğesine DeletePersonCommand
bağlanır. Bunun nedeni, özelliğinin Button.Command
bağlama kaynağını bağlama bağlam türü PeopleViewModel
olan ve olan üst öğesinin bağlama bağlamı olacak şekilde yeniden tanımlamasıdır StackLayout. Bağlama Path
ifadelerinin bölümü daha sonra özelliğini çözümleyebilir DeletePersonCommand
. Ancak, Button.CommandParameter
özelliği bağlama kaynağını değiştirmez, bunun yerine içindeki üst ControlTemplateöğesinden devralır. Bu nedenle, CommandParameter
özelliği özelliğine CardTitle
CardView
bağlanır.
Bağlamaların Button genel etkisi, öğesine dokunulduğunda Button sınıfında DeletePersonCommand
öğesinin PeopleViewModel
yürütülerek özelliğin CardName
değerine geçirilmesidir DeletePersonCommand
. Bu, belirtilen CardView
değerin bağlanabilir düzenden kaldırılmasına neden olur.
Göreli bağlamalar hakkında daha fazla bilgi için bkz . Göreli bağlamalar.