Denetim şablonları
Örneğe göz atın.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
objectbağlama değeri dönüştürücüsünün parametresidir. - StringFormat, türündeki
stringbağ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 SourceRelativeBindingSource.TemplatedParentbir 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 CardViewCardView birinin özelliğini olarak CardViewControlTemplateayarlarControlTemplate.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 ControlTemplateCardViewUI ö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ı PeopleViewModelbir 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 DeletePersonCommandkullanı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ı CardViewControlTemplatebir 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ü PeopleViewModelolan 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 CardTitleCardViewbağ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.
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin