Not
Bu sayfaya erişim yetkilendirme gerektiriyor. Oturum açmayı veya dizinleri değiştirmeyi deneyebilirsiniz.
Bu sayfaya erişim yetkilendirme gerektiriyor. Dizinleri değiştirmeyi deneyebilirsiniz.
Ağaç görünümü denetimi, iç içe öğeler içeren düğümleri genişleten ve daraltan hiyerarşik bir liste sağlar. Kullanıcı arabiriminizdeki bir klasör yapısını veya iç içe ilişkileri göstermek için kullanılabilir.
Ağaç görünümü, üst düğümler ve alt düğümler arasındaki iç içe ilişkiyi temsil etmek için girinti ve simgelerin bir bileşimini kullanır. Daraltılmış düğümler sağa işaret eden bir ok, genişletilmiş düğümler ise aşağıyı işaret eden bir ok kullanır.
Düğümleri temsil etmek için ağaç görünümü öğesi veri şablonuna bir simge ekleyebilirsiniz. Örneğin, bir dosya sistemi hiyerarşisi gösterirseniz, üst notlar için klasör simgelerini ve yaprak düğümler için dosya simgelerini kullanabilirsiniz.
TreeView API'leri aşağıdaki özellikleri destekler:
- N düzeyinde iç içe yerleştirme
- Tek veya birden çok düğüm seçimi
- TreeView ve TreeViewItem üzerindeki ItemsSource özelliğine veri bağlama
TreeView öğe şablonunun kökü olarak TreeViewItem- TreeViewItem'da rastgele içerik türleri
- Ağaç görünümleri arasında sürükleyip bırakma
Doğru kontrol bu mu?
Öğelerin iç içe liste öğeleri olduğunda ve öğelerin eşleriyle ve düğümleriyle hiyerarşik ilişkisini göstermek önemliyse TreeView kullanın.
Bir öğenin iç içe ilişkisini vurgulamak öncelik değilse TreeView kullanmaktan kaçının. Çoğu detaylandırma senaryosu için normal bir liste görünümü uygundur.
Ağaç görünümü oluşturma
ItemsSource'u hiyerarşik bir veri kaynağına bağlayarak ağaç görünümü oluşturabilir veya TreeViewNode nesnelerini kendiniz oluşturup yönetebilirsiniz.
Ağaç görünümü oluşturmak için TreeView denetimi ve TreeViewNode nesnelerinin hiyerarşisini kullanırsınız. TreeView denetiminin RootNodes koleksiyonuna bir veya daha fazla kök düğüm ekleyerek düğüm hiyerarşisini oluşturursunuz. Her TreeViewNode'un Çocuk koleksiyonuna daha fazla düğüm eklenebilir. Ağaç görünümü düğümlerini istediğiniz derinlikte iç içe yerleştirebilirsiniz.
Ağaç görünümü içeriğini sağlamak için ListView'unItemsSource özelliğinde olduğu gibi hiyerarşik bir veri kaynağını ItemsSource özelliğine bağlayabilirsiniz. Benzer şekilde, öğeyi işleyen bir DataTemplate sağlamak için ItemTemplate (ve isteğe bağlı ItemTemplateSelector) kullanın.
Önemli
ItemsSource ve ilgili API'leri Için Windows 10, sürüm 1809 (SDK 17763) veya üzeri ya da WinUI 2 gerekir.
ItemsSource, TreeView denetimine içerik yerleştirmek için TreeView.RootNodes'a alternatif bir mekanizmadır. Hem ItemsSource hem de RootNodes değerlerini aynı anda ayarlayamazsınız. ItemsSource kullandığınızda sizin için düğümler oluşturulur ve bunlara TreeView.RootNodes özelliğinden erişebilirsiniz.
Aşağıda XAML'de bildirilen basit bir ağaç görünümü örneği verilmiştir. Genellikle düğümleri koda eklersiniz, ancak düğüm hiyerarşisinin nasıl oluşturulduğunu görselleştirmek için yararlı olabileceğinden burada XAML hiyerarşisini gösteririz.
<muxc:TreeView>
<muxc:TreeView.RootNodes>
<muxc:TreeViewNode Content="Flavors"
IsExpanded="True">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Vanilla"/>
<muxc:TreeViewNode Content="Strawberry"/>
<muxc:TreeViewNode Content="Chocolate"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
</muxc:TreeView.RootNodes>
</muxc:TreeView>
Çoğu durumda, ağaç görünümünüz bir veri kaynağındaki verileri görüntüler, bu nedenle genellikle XAML'de kök TreeView denetimini bildirirsiniz, ancak kodda veya veri bağlama kullanarak TreeViewNode nesnelerini eklersiniz.
Hiyerarşik veri kaynağına bağlama
Veri bağlama kullanarak ağaç görünümü oluşturmak için TreeView.ItemsSource özelliğine hiyerarşik bir koleksiyon ayarlayın. Ardından ItemTemplate içinde alt öğe koleksiyonunu TreeViewItem.ItemsSource özelliğine ayarlayın.
<muxc:TreeView ItemsSource="{x:Bind DataSource}">
<muxc:TreeView.ItemTemplate>
<DataTemplate x:DataType="local:Item">
<muxc:TreeViewItem ItemsSource="{x:Bind Children}"
Content="{x:Bind Name}"/>
</DataTemplate>
</muxc:TreeView.ItemTemplate>
</muxc:TreeView>
Ayrıntılı kod için veri bağlama kullanarak ağaç görünümü bölümüne bakın.
Öğeler ve öğe kapsayıcıları
TreeView.ItemsSource kullanıyorsanız, bu API'ler düğümü veya veri öğesini kapsayıcıdan almak için kullanılabilir ve tam tersi de geçerlidir.
| TreeViewÖğesi | Description |
|---|---|
| TreeView.ItemFromContainer | Belirtilen TreeViewItem kapsayıcısı için veri öğesini alır. |
| TreeView.ContainerFromItem | Belirtilen veri öğesi için TreeViewItem kapsayıcısını alır. |
| Ağaç Görünümü Düğümü | Description |
|---|---|
| TreeView.NodeFromContainer | Belirtilen TreeViewItem kapsayıcısı için TreeViewNode değerini alır. |
| TreeView.ContainerFromNode |
Belirtilen TreeViewNode için TreeViewItem kapsayıcısını alır. |
Ağaç görünümü düğümlerini yönet
Bu ağaç görünümü daha önce XAML'de oluşturulan görünümle aynıdır, ancak düğümler bunun yerine kodda oluşturulur.
<muxc:TreeView x:Name="sampleTreeView"/>
private void InitializeTreeView()
{
muxc.TreeViewNode rootNode = new muxc.TreeViewNode() { Content = "Flavors" };
rootNode.IsExpanded = true;
rootNode.Children.Add(new muxc.TreeViewNode() { Content = "Vanilla" });
rootNode.Children.Add(new muxc.TreeViewNode() { Content = "Strawberry" });
rootNode.Children.Add(new muxc.TreeViewNode() { Content = "Chocolate" });
sampleTreeView.RootNodes.Add(rootNode);
}
Private Sub InitializeTreeView()
Dim rootNode As New muxc.TreeViewNode With {.Content = "Flavors", .IsExpanded = True}
With rootNode.Children
.Add(New muxc.TreeViewNode With {.Content = "Vanilla"})
.Add(New muxc.TreeViewNode With {.Content = "Strawberry"})
.Add(New muxc.TreeViewNode With {.Content = "Chocolate"})
End With
sampleTreeView.RootNodes.Add(rootNode)
End Sub
Bu API'ler, ağaç görünümünüzün veri hiyerarşisini yönetmek için kullanılabilir.
| Ağaç Görünümü | Description |
|---|---|
| Kök Düğümler | Ağaç görünümünde bir veya daha fazla kök düğüm olabilir. Kök düğüm oluşturmak için RootNodes koleksiyonuna bir TreeViewNode nesnesi ekleyin. Kök düğümün üst öğesi her zaman null'tır. Kök düğümün derinliği 0'dır. |
| Ağaç Görünümü Düğümü | Description |
|---|---|
| Çocuklar | Düğüm hiyerarşinizi oluşturmak için bir üst düğümün Children koleksiyonuna TreeViewNode nesneleri ekleyin. Bir düğüm, Çocuklar koleksiyonundaki tüm düğümlerin Ebeveyn'idir. |
| HasChildren | düğüm alt öğeleri fark ettiyse true. false boş bir klasörü veya öğeyi gösterir. |
| Gerçekleşmemiş Çocukları Var | Düğümler genişletildikçe dolduruluyorsa bu özelliği kullanın. Bu makalenin ilerleyen bölümlerinde genişletildiğinde düğümü doldurma konusuna bakın. |
| Derinlik | Alt düğümün kök düğümden ne kadar uzakta olduğunu gösterir. |
| Ebeveyn | Bu düğümün parçası olduğu Children koleksiyonunun sahibi olan TreeViewNode'yi alır. |
Ağaç görünümü, genişlet/daralt simgesinin gösterilip gösterilmediğini belirlemek için HasChildren ve HasUnrealizedChildren özelliklerini kullanır. Herhangi bir özellik true ise, simge gösterilir; aksi takdirde gösterilmez.
Ağaç görünüm düğümü içeriği
Ağaç görünümü düğümlerinin temsil ettiği veri öğesini content özelliğinde depolayabilirsiniz.
Önceki örneklerde içerik basit bir dize değeriydi. Burada, ağaç görünümü düğümü kullanıcının Resimler klasörünü temsil eder, bu nedenle StorageFolder resim kitaplığı düğümün content özelliğine atanır.
StorageFolder picturesFolder = KnownFolders.PicturesLibrary;
muxc.TreeViewNode pictureNode = new muxc.TreeViewNode();
pictureNode.Content = picturesFolder;
Dim picturesFolder As StorageFolder = KnownFolders.PicturesLibrary
Dim pictureNode As New muxc.TreeViewNode With {.Content = picturesFolder}
Uyarı
Resimler klasörüne erişmek için uygulama bildiriminde Resim Kitaplığı özelliğini belirtmeniz gerekir. Daha fazla bilgi için bkz. Uygulama özelliği bildirimleri .
Veri öğesinin ağaç görünümünde nasıl görüntüleneceğini belirtmek için bir DataTemplate sağlayabilirsiniz.
Uyarı
Windows 10, sürüm 1803'te TreeView denetimini yeniden şablonlamanız ve içeriğiniz bir dize değilse özel bir ItemTemplate belirtmeniz gerekir. Sonraki sürümlerde ItemTemplate özelliğini ayarlayın. Daha fazla bilgi için bkz. TreeView.ItemTemplate.
Öğe kapsayıcısı stili
ItemsSource veya RootNodes kullanıyor olun, her düğümü görüntülemek için kullanılan gerçek öğe ("kapsayıcı" olarak adlandırılır) bir TreeViewItem nesnesidir. TreeView'unItemContainerStyle veya ItemContainerStyleSelector özelliklerini kullanarak TreeViewItem özelliklerini kapsayıcıya stil katacak şekilde değiştirebilirsiniz.
Bu örnekte, genişletilmiş/daraltılmış gliflerin turuncu +/- işaretleri olarak nasıl değiştireceği gösterilmektedir. Varsayılan TreeViewItem şablonunda, glifler yazı tipini kullanacak Segoe MDL2 Assets şekilde ayarlanır. XAML tarafından kullanılan biçimde Unicode karakter değerini sağlayarak Setter.Value özelliğini ayarlayabilirsiniz: Value="".
<muxc:TreeView>
<muxc:TreeView.ItemContainerStyle>
<Style TargetType="muxc:TreeViewItem">
<Setter Property="CollapsedGlyph" Value=""/>
<Setter Property="ExpandedGlyph" Value=""/>
<Setter Property="GlyphBrush" Value="DarkOrange"/>
</Style>
</muxc:TreeView.ItemContainerStyle>
<muxc:TreeView.RootNodes>
<muxc:TreeViewNode Content="Flavors"
IsExpanded="True">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Vanilla"/>
<muxc:TreeViewNode Content="Strawberry"/>
<muxc:TreeViewNode Content="Chocolate"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
</muxc:TreeView.RootNodes>
</muxc:TreeView>
Öğe şablonu seçicileri
Varsayılan olarak , TreeView her düğüm için veri öğesinin dize gösterimini gösterir. ItemTemplate özelliğini tüm düğümler için görüntülenen öğeleri değiştirmek üzere ayarlayabilirsiniz. İsterseniz, öğe türüne veya belirttiğiniz diğer ölçütlere göre ağaç görünümü öğeleri için farklı bir DataTemplate seçmek üzere bir ItemTemplateSelector kullanabilirsiniz.
Örneğin, bir dosya gezgini uygulamasında klasörler için bir veri şablonu ve dosyalar için başka bir veri şablonu kullanabilirsiniz.
Burada bir öğe şablonu seçici oluşturma ve kullanma örneği verilmiştir. Daha fazla bilgi için bkz. DataTemplateSelector sınıfı.
Uyarı
Bu kod daha büyük bir örneğin parçasıdır ve tek başına çalışmaz. öğesini tanımlayan ExplorerItemkod da dahil olmak üzere tam örneği görmek için GitHub'daki Xaml-Controls-Gallery deposunu gözden geçirin.
TreeViewPage.xaml ve TreeViewPage.xaml.cs ilgili kodu içerir.
<Page.Resources>
<DataTemplate x:Key="FolderTemplate" x:DataType="local:ExplorerItem">
<muxc:TreeViewItem ItemsSource="{x:Bind Children}">
<StackPanel Orientation="Horizontal">
<Image Width="20" Source="Assets/folder.png"/>
<TextBlock Text="{x:Bind Name}" />
</StackPanel>
</muxc:TreeViewItem>
</DataTemplate>
<DataTemplate x:Key="FileTemplate" x:DataType="local:ExplorerItem">
<muxc:TreeViewItem>
<StackPanel Orientation="Horizontal">
<Image Width="20" Source="Assets/file.png"/>
<TextBlock Text="{x:Bind Name}"/>
</StackPanel>
</muxc:TreeViewItem>
</DataTemplate>
<local:ExplorerItemTemplateSelector
x:Key="ExplorerItemTemplateSelector"
FolderTemplate="{StaticResource FolderTemplate}"
FileTemplate="{StaticResource FileTemplate}" />
</Page.Resources>
<Grid>
<muxc:TreeView
ItemsSource="{x:Bind DataSource}"
ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}"/>
</Grid>
public class ExplorerItemTemplateSelector : DataTemplateSelector
{
public DataTemplate FolderTemplate { get; set; }
public DataTemplate FileTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
var explorerItem = (ExplorerItem)item;
if (explorerItem.Type == ExplorerItem.ExplorerItemType.Folder) return FolderTemplate;
return FileTemplate;
}
}
SelectTemplateCore yöntemine geçirilen nesne türü, Ağaç görünümünü ItemsSource özelliğini ayarlayarak mı yoksa TreeViewNode nesnelerini kendiniz oluşturup yöneterek mi oluşturduğunuza bağlıdır.
-
ItemsSource ayarlanırsa, nesne veri öğesinin türü ne olursa olsun olur. Önceki örnekte nesnesi bir
ExplorerItemidi, bu nedenle basit bir atamadanExplorerItemsonra kullanılabilir:var explorerItem = (ExplorerItem)item;. - ItemsSource ayarlanmadıysa ve ağaç görünümü düğümlerini kendiniz yönetiyorsanız, SelectTemplateCore'a geçirilen nesne bir TreeViewNode'dir. Bu durumda, veri öğesini TreeViewNode.Content özelliğinden alabilirsiniz.
Aşağıda, daha sonra gösterilen Resimler ve Müzik kitaplığı ağaç görünümü örneğinden bir veri şablonu seçicisi verilmiştır. SelectTemplateCore yöntemi, içeriği StorageFolder veya StorageFile olabilen bir TreeViewNode alır. İçeriğe bağlı olarak, müzik klasörü, resim klasörü, müzik dosyaları veya resim dosyaları için varsayılan bir şablon veya belirli bir şablon döndürebilirsiniz.
protected override DataTemplate SelectTemplateCore(object item)
{
var node = (TreeViewNode)item;
if (node.Content is StorageFolder)
{
var content = node.Content as StorageFolder;
if (content.DisplayName.StartsWith("Pictures")) return PictureFolderTemplate;
if (content.DisplayName.StartsWith("Music")) return MusicFolderTemplate;
}
else if (node.Content is StorageFile)
{
var content = node.Content as StorageFile;
if (content.ContentType.StartsWith("image")) return PictureItemTemplate;
if (content.ContentType.StartsWith("audio")) return MusicItemTemplate;
}
return DefaultTemplate;
}
Protected Overrides Function SelectTemplateCore(ByVal item As Object) As DataTemplate
Dim node = CType(item, muxc.TreeViewNode)
If TypeOf node.Content Is StorageFolder Then
Dim content = TryCast(node.Content, StorageFolder)
If content.DisplayName.StartsWith("Pictures") Then Return PictureFolderTemplate
If content.DisplayName.StartsWith("Music") Then Return MusicFolderTemplate
ElseIf TypeOf node.Content Is StorageFile Then
Dim content = TryCast(node.Content, StorageFile)
If content.ContentType.StartsWith("image") Then Return PictureItemTemplate
If content.ContentType.StartsWith("audio") Then Return MusicItemTemplate
End If
Return DefaultTemplate
End Function
Ağaç görünümüyle etkileşim kurma
Bir ağaç görünümünü, kullanıcının onunla birkaç farklı şekilde etkileşim kurmasına izin verecek şekilde yapılandırabilirsiniz:
- Düğümleri genişlet veya daralt
- Tek veya çoklu seçim öğeleri
- Öğeyi çağırmak için tıklayın
Genişlet/daralt
Alt öğeleri olan ağaç görünümündeki herhangi bir düğüm, genişlet/daralt sembolüne tıklanarak her zaman genişletilebilir veya daraltılabilir. Ayrıca bir düğümü program aracılığıyla genişletebilir veya daraltabilir ve düğüm durumu değiştiğinde yanıt vekleyebilirsiniz.
Düğümü program aracılığıyla genişletme/daraltma
Kodunuzda ağaç görünümü düğümünü genişletmenin veya daraltmanın 2 yolu vardır.
TreeView sınıfı Daralt ve Genişlet yöntemlerine sahiptir. Bu yöntemleri çağırdığınızda, genişletmek veya daraltmak istediğiniz TreeViewNode'u geçirirsiniz.
Her TreeViewNodeisExpanded özelliğine sahiptir. Bir düğümün durumunu denetlemek veya durumu değiştirmek için ayarlamak için bu özelliği kullanabilirsiniz. Bu özelliği bir düğümün ilk durumunu ayarlamak için XAML'de de ayarlayabilirsiniz.
Genişletirken düğümü doldurma
Ağaç görünümünüzde çok sayıda düğüm göstermeniz gerekebilir veya önceden kaç düğüme sahip olacağını bilmiyor olabilirsiniz. TreeView denetimi sanallaştırılmış değildir, bu nedenle genişletildiğinde her düğümü doldurarak ve daraltıldığında alt düğümleri kaldırarak kaynakları yönetebilirsiniz.
Genişleme olayını işleyin ve bir düğüm genişletilirken alt öğe eklemek için HasUnrealizedChildren özelliğini kullanın. HasUnrealizedChildren özelliği, düğümün doldurulması gerekip gerekmediğini veya Alt öğeler koleksiyonunun zaten doldurulup doldurulmadığını gösterir. TreeViewNode'un bu değeri ayarlamadığını, uygulama kodunuzda yönetmeniz gerektiğini unutmayın.
Kullanımda olan bu API'lerin bir örneği aşağıda verilmiştir. FillTreeNode uygulaması da dahil olmak üzere bağlam için bu makalenin sonundaki tam örnek koda bakın.
private void SampleTreeView_Expanding(muxc.TreeView sender, muxc.TreeViewExpandingEventArgs args)
{
if (args.Node.HasUnrealizedChildren)
{
FillTreeNode(args.Node);
}
}
Private Sub SampleTreeView_Expanding(sender As muxc.TreeView, args As muxc.TreeViewExpandingEventArgs)
If args.Node.HasUnrealizedChildren Then
FillTreeNode(args.Node)
End If
End Sub
Gerekli değildir, ancak Daraltılmış olayı da işlemek ve üst düğüm kapatıldığında alt düğümleri kaldırmak isteyebilirsiniz. Ağaç görünümünüzde çok sayıda düğüm varsa veya düğüm verileri çok fazla kaynak kullanıyorsa bu önemli olabilir. Bir düğüm her açıldığında doldurmak ile alt öğeleri kapalı bir düğümde bırakmak arasındaki performans etkisini dikkate almanız gerekir. En iyi seçenek uygulamanıza bağlıdır.
Daraltılmış olay için bir işleyici örneği aşağıda verilmiştır.
private void SampleTreeView_Collapsed(muxc.TreeView sender, muxc.TreeViewCollapsedEventArgs args)
{
args.Node.Children.Clear();
args.Node.HasUnrealizedChildren = true;
}
Private Sub SampleTreeView_Collapsed(sender As muxc.TreeView, args As muxc.TreeViewCollapsedEventArgs)
args.Node.Children.Clear()
args.Node.HasUnrealizedChildren = True
End Sub
Öğe çağırma
Kullanıcı, öğeyi seçmek yerine bir eylem çağırabilir (öğeyi bir düğme gibi ele alabilir). Bu kullanıcı etkileşimini yanıtlamak için ItemInvoked olayını işlersiniz.
Uyarı
IsItemClickEnabled özelliğine sahip ListView'un aksine, bir öğeyi çağırmak her zaman ağaç görünümünde etkinleştirilir. Yine de olayın işlenip işlenmeyeceğini seçebilirsiniz.
TreeViewItemInvokedEventArgs sınıfı
ItemInvoked olay birleştirmeleri, çağrılan öğeye erişmenizi sağlar. InvokedItem özelliği çağrılan düğüme sahiptir. Bunu bir TreeViewNode'a dönüştürebilir ve TreeViewNode.Content özelliğinden veri öğesini alabilirsiniz.
ItemInvoked olay işleyicisi örneği aşağıda verilmiştır. Veri öğesi bir IStorageItem'dir ve bu örnekte dosya ve ağaç hakkında bazı bilgiler görüntülenir. Ayrıca, düğüm bir klasör düğümüyse, düğümü aynı anda genişletir veya daraltır. Aksi takdirde düğüm yalnızca köşeli çift ayraç tıklandığında genişletilir veya daraltılır.
private void SampleTreeView_ItemInvoked(muxc.TreeView sender, muxc.TreeViewItemInvokedEventArgs args)
{
var node = args.InvokedItem as muxc.TreeViewNode;
if (node.Content is IStorageItem item)
{
FileNameTextBlock.Text = item.Name;
FilePathTextBlock.Text = item.Path;
TreeDepthTextBlock.Text = node.Depth.ToString();
if (node.Content is StorageFolder)
{
node.IsExpanded = !node.IsExpanded;
}
}
}
Private Sub SampleTreeView_ItemInvoked(sender As muxc.TreeView, args As muxc.TreeViewItemInvokedEventArgs)
Dim node = TryCast(args.InvokedItem, muxc.TreeViewNode)
Dim item = TryCast(node.Content, IStorageItem)
If item IsNot Nothing Then
FileNameTextBlock.Text = item.Name
FilePathTextBlock.Text = item.Path
TreeDepthTextBlock.Text = node.Depth.ToString()
If TypeOf node.Content Is StorageFolder Then
node.IsExpanded = Not node.IsExpanded
End If
End If
End Sub
Öğe seçimi
TreeView denetimi hem tek seçimi hem de çoklu seçimi destekler. Varsayılan olarak, düğüm seçimi kapalıdır, ancak TreeView.SelectionMode özelliğini düğüm seçimine izin verecek şekilde ayarlayabilirsiniz. TreeViewSelectionMode değerleri None, Single ve Multiple değerleridir.
Birden çok seçim
Birden çok seçim etkinleştirildiğinde, her ağaç görünümü düğümünü yanında bir onay kutusu gösterilir ve seçili öğeler vurgulanır. Kullanıcı, onay kutusunu kullanarak bir öğeyi seçebilir veya öğeyi seçimini kaldırabilir; öğeye tıklanması yine de çağrılmaya neden olur.
Bir üst düğümün seçilmesi veya seçiminin kaldırılması, o düğümün altındaki tüm alt öğelerin seçilmesine veya seçimlerinin kaldırılmasına neden olur. Ebeveyn düğüm altındaki çocuklardan bazıları seçilirse, ancak hepsi seçilmezse, ebeveyn düğümün onay kutusu belirsiz durumda gösterilir.
Seçili düğümler ağaç görünümünün SelectedNodes koleksiyonuna eklenir. Ağaç görünümündeki tüm düğümleri seçmek için SelectAll yöntemini çağırabilirsiniz.
Uyarı
Seçim ve gerçekleştirilmiş/gerçekleştirilmemiş düğümler
Ağaç görünümünüzde gerçekleşmemiş düğümler varsa, bunlar seçim için dikkate alınmaz. Burada, gerçekleşmemiş düğümlerle seçim yapma konusunda göz önünde bulundurmanız gereken bazı şeyler vardır.
- Bir kullanıcı bir ebeveyn düğüm seçerse, bu ebeveynin altındaki tüm gerçekleşmiş alt öğeler de seçilir. Benzer şekilde, tüm alt düğümler seçilirse ebeveyn düğüm de seçilir.
- SelectAll yöntemi yalnızca SelectedNodes koleksiyonuna gerçekleştirilen düğümleri ekler.
- Gerçekleşmemiş alt düğümleri olan bir ebeveyn düğüm seçilirse, fark edildikçe alt düğümler seçilir.
SeçiliÖğe/SeçiliÖğeler
TreeView , SelectedItem ve SelectedItems özelliklerine sahiptir. Seçili düğümlerin içeriğini doğrudan almak için bu özellikleri kullanabilirsiniz. Birden çok seçim etkinleştirilirse SelectedItem, SelectedItems koleksiyonundaki ilk öğeyi içerir.
SeçimDeğişti
Seçili öğelerin koleksiyonu değiştiğinde program aracılığıyla veya kullanıcı etkileşimi aracılığıyla yanıt vermek için SelectionChanged olayını işleyebilirsiniz.
<TreeView ItemsSource="{x:Bind Folders}"
SelectionMode="Multiple"
SelectionChanged="TreeView_SelectionChanged"/>
public void TreeView_SelectionChanged(TreeView sender, TreeViewSelectionChangedEventArgs args)
{
foreach (object item in args.RemovedItems)
{
this.SelectedFolders.Remove((Folder)item);
}
foreach (object item in args.AddedItems)
{
this.SelectedFolders.Add((Folder)item);
}
}
Kod örnekleri
Aşağıdaki kod örnekleri, ağaç görünümü denetiminin çeşitli özelliklerini gösterir.
XAML kullanarak ağaç görünümü
Bu örnekte XAML'de basit bir ağaç görünümü yapısının nasıl oluşturulacağı gösterilmektedir. Ağaç görünümünde, kullanıcının aralarından seçim yapabilecekleri, kategoriler halinde düzenlenmiş dondurma tatları ve topping'ler gösterilir. Çoklu seçim etkinleştirilir ve kullanıcı bir düğmeye tıkladığında, seçili öğeler ana uygulama kullanıcı arabiriminde görüntülenir.
<Page
x:Class="TreeViewTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Padding="100">
<SplitView IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="296">
<SplitView.Pane>
<muxc:TreeView x:Name="DessertTree" SelectionMode="Multiple">
<muxc:TreeView.RootNodes>
<muxc:TreeViewNode Content="Flavors" IsExpanded="True">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Vanilla"/>
<muxc:TreeViewNode Content="Strawberry"/>
<muxc:TreeViewNode Content="Chocolate"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
<muxc:TreeViewNode Content="Toppings">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Candy">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Chocolate"/>
<muxc:TreeViewNode Content="Mint"/>
<muxc:TreeViewNode Content="Sprinkles"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
<muxc:TreeViewNode Content="Fruits">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Mango"/>
<muxc:TreeViewNode Content="Peach"/>
<muxc:TreeViewNode Content="Kiwi"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
<muxc:TreeViewNode Content="Berries">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Strawberry"/>
<muxc:TreeViewNode Content="Blueberry"/>
<muxc:TreeViewNode Content="Blackberry"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
</muxc:TreeView.RootNodes>
</muxc:TreeView>
</SplitView.Pane>
<StackPanel Grid.Column="1" Margin="12,0">
<Button Content="Select all" Click="SelectAllButton_Click"/>
<Button Content="Create order" Click="OrderButton_Click" Margin="0,12"/>
<TextBlock Text="Your flavor selections:" Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="FlavorList" Margin="0,0,0,12"/>
<TextBlock Text="Your topping selections:" Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="ToppingList"/>
</StackPanel>
</SplitView>
</Grid>
</Page>
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using muxc = Microsoft.UI.Xaml.Controls;
namespace TreeViewTest
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void OrderButton_Click(object sender, RoutedEventArgs e)
{
FlavorList.Text = string.Empty;
ToppingList.Text = string.Empty;
foreach (muxc.TreeViewNode node in DessertTree.SelectedNodes)
{
if (node.Parent.Content?.ToString() == "Flavors")
{
FlavorList.Text += node.Content + "; ";
}
else if (node.HasChildren == false)
{
ToppingList.Text += node.Content + "; ";
}
}
}
private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
if (DessertTree.SelectionMode == muxc.TreeViewSelectionMode.Multiple)
{
DessertTree.SelectAll();
}
}
}
}
Private Sub OrderButton_Click(sender As Object, e As RoutedEventArgs)
FlavorList.Text = String.Empty
ToppingList.Text = String.Empty
For Each node As muxc.TreeViewNode In DessertTree.SelectedNodes
If node.Parent.Content?.ToString() = "Flavors" Then
FlavorList.Text += node.Content & "; "
ElseIf node.HasChildren = False Then
ToppingList.Text += node.Content & "; "
End If
Next
End Sub
Private Sub SelectAllButton_Click(sender As Object, e As RoutedEventArgs)
If DessertTree.SelectionMode = muxc.TreeViewSelectionMode.Multiple Then
DessertTree.SelectAll()
End If
End Sub
Veri bağlama kullanarak ağaç görünümü
Bu örnekte, önceki örnekle aynı ağaç görünümünün nasıl oluşturulacağı gösterilmektedir. Ancak veriler, XAML'de veri hiyerarşisi oluşturmak yerine kodda oluşturulur ve ağaç görünümünün ItemsSource özelliğine bağlıdır. (Önceki örnekte gösterilen düğme olay işleyicileri de bu örnek için geçerlidir.)
<Page
x:Class="TreeViewTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:local="using:TreeViewTest"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
Padding="100">
<SplitView IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="296">
<SplitView.Pane>
<muxc:TreeView Name="DessertTree"
SelectionMode="Multiple"
ItemsSource="{x:Bind DataSource}">
<muxc:TreeView.ItemTemplate>
<DataTemplate x:DataType="local:Item">
<muxc:TreeViewItem
ItemsSource="{x:Bind Children}"
Content="{x:Bind Name}"/>
</DataTemplate>
</muxc:TreeView.ItemTemplate>
</muxc:TreeView>
</SplitView.Pane>
<StackPanel Grid.Column="1" Margin="12,0">
<Button Content="Select all"
Click="SelectAllButton_Click"/>
<Button Content="Create order"
Click="OrderButton_Click"
Margin="0,12"/>
<TextBlock Text="Your flavor selections:"
Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="FlavorList" Margin="0,0,0,12"/>
<TextBlock Text="Your topping selections:"
Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="ToppingList"/>
</StackPanel>
</SplitView>
</Grid>
</Page>
using System.Collections.ObjectModel;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using muxc = Microsoft.UI.Xaml.Controls;
namespace TreeViewTest
{
public sealed partial class MainPage : Page
{
private ObservableCollection<Item> DataSource = new ObservableCollection<Item>();
public MainPage()
{
this.InitializeComponent();
DataSource = GetDessertData();
}
private ObservableCollection<Item> GetDessertData()
{
var list = new ObservableCollection<Item>();
Item flavorsCategory = new Item()
{
Name = "Flavors",
Children =
{
new Item() { Name = "Vanilla" },
new Item() { Name = "Strawberry" },
new Item() { Name = "Chocolate" }
}
};
Item toppingsCategory = new Item()
{
Name = "Toppings",
Children =
{
new Item()
{
Name = "Candy",
Children =
{
new Item() { Name = "Chocolate" },
new Item() { Name = "Mint" },
new Item() { Name = "Sprinkles" }
}
},
new Item()
{
Name = "Fruits",
Children =
{
new Item() { Name = "Mango" },
new Item() { Name = "Peach" },
new Item() { Name = "Kiwi" }
}
},
new Item()
{
Name = "Berries",
Children =
{
new Item() { Name = "Strawberry" },
new Item() { Name = "Blueberry" },
new Item() { Name = "Blackberry" }
}
}
}
};
list.Add(flavorsCategory);
list.Add(toppingsCategory);
return list;
}
private void OrderButton_Click(object sender, RoutedEventArgs e)
{
FlavorList.Text = string.Empty;
ToppingList.Text = string.Empty;
foreach (muxc.TreeViewNode node in DessertTree.SelectedNodes)
{
if (node.Parent.Content?.ToString() == "Flavors")
{
FlavorList.Text += node.Content + "; ";
}
else if (node.HasChildren == false)
{
ToppingList.Text += node.Content + "; ";
}
}
}
private void SelectAllButton_Click(object sender, RoutedEventArgs e)
{
if (DessertTree.SelectionMode == muxc.TreeViewSelectionMode.Multiple)
{
DessertTree.SelectAll();
}
}
}
public class Item
{
public string Name { get; set; }
public ObservableCollection<Item> Children { get; set; } = new ObservableCollection<Item>();
public override string ToString()
{
return Name;
}
}
}
Resimler ve Müzik kitaplığı ağaç görünümü
Bu örnekte, kullanıcının Resimler ve Müzik kitaplıklarının içeriğini ve yapısını gösteren bir ağaç görünümünün nasıl oluşturulacağı gösterilmektedir. Öğelerin sayısı önceden bilinmediğinden, her düğüm genişletildiğinde doldurulur ve daraltıldığında boşaltılır.
IStorageItem türünde veri öğelerini görüntülemek için özel bir öğe şablonu kullanılır.
Önemli
Bu örnekteki kod , picturesLibrary ve musicLibrary özelliklerini gerektirir. Dosya erişimi hakkında daha fazla bilgi için bkz. Dosya erişim izinleri, Dosya ve klasörleri listeleme ve sorgulama ve Müzik, Resimler ve Videolar kitaplıklarındaki Dosyalar ve klasörler.
<Page
x:Class="TreeViewTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TreeViewTest"
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
xmlns:storage="using:Windows.Storage"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<DataTemplate x:Key="TreeViewItemDataTemplate" x:DataType="muxc:TreeViewNode">
<Grid Height="44">
<TextBlock Text="{x:Bind ((storage:IStorageItem)Content).Name}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="MusicItemDataTemplate" x:DataType="muxc:TreeViewNode">
<StackPanel Height="44" Orientation="Horizontal">
<SymbolIcon Symbol="Audio" Margin="0,0,4,0"/>
<TextBlock Text="{x:Bind ((storage:StorageFile)Content).DisplayName}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="PictureItemDataTemplate" x:DataType="muxc:TreeViewNode">
<StackPanel Height="44" Orientation="Horizontal">
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph=""
Margin="0,0,4,0"/>
<TextBlock Text="{x:Bind ((storage:StorageFile)Content).DisplayName}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="MusicFolderDataTemplate" x:DataType="muxc:TreeViewNode">
<StackPanel Height="44" Orientation="Horizontal">
<SymbolIcon Symbol="MusicInfo" Margin="0,0,4,0"/>
<TextBlock Text="{x:Bind ((storage:StorageFolder)Content).DisplayName}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="PictureFolderDataTemplate" x:DataType="muxc:TreeViewNode">
<StackPanel Height="44" Orientation="Horizontal">
<SymbolIcon Symbol="Pictures" Margin="0,0,4,0"/>
<TextBlock Text="{x:Bind ((storage:StorageFolder)Content).DisplayName}"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Style="{ThemeResource BodyTextBlockStyle}"/>
</StackPanel>
</DataTemplate>
<local:ExplorerItemTemplateSelector
x:Key="ExplorerItemTemplateSelector"
DefaultTemplate="{StaticResource TreeViewItemDataTemplate}"
MusicItemTemplate="{StaticResource MusicItemDataTemplate}"
MusicFolderTemplate="{StaticResource MusicFolderDataTemplate}"
PictureItemTemplate="{StaticResource PictureItemDataTemplate}"
PictureFolderTemplate="{StaticResource PictureFolderDataTemplate}"/>
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView IsPaneOpen="True"
DisplayMode="Inline"
OpenPaneLength="296">
<SplitView.Pane>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Content="Refresh tree" Click="RefreshButton_Click" Margin="24,12"/>
<muxc:TreeView x:Name="sampleTreeView" Grid.Row="1" SelectionMode="Single"
ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}"
Expanding="SampleTreeView_Expanding"
Collapsed="SampleTreeView_Collapsed"
ItemInvoked="SampleTreeView_ItemInvoked"/>
</Grid>
</SplitView.Pane>
<StackPanel Grid.Column="1" Margin="12,72">
<TextBlock Text="File name:" Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="FileNameTextBlock" Margin="0,0,0,12"/>
<TextBlock Text="File path:" Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="FilePathTextBlock" Margin="0,0,0,12"/>
<TextBlock Text="Tree depth:" Style="{StaticResource CaptionTextBlockStyle}"/>
<TextBlock x:Name="TreeDepthTextBlock" Margin="0,0,0,12"/>
</StackPanel>
</SplitView>
</Grid>
</Page>
using System;
using System.Collections.Generic;
using Windows.Storage;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using muxc = Microsoft.UI.Xaml.Controls;
namespace TreeViewTest
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
InitializeTreeView();
}
private void InitializeTreeView()
{
// A TreeView can have more than 1 root node. The Pictures library
// and the Music library will each be a root node in the tree.
// Get Pictures library.
StorageFolder picturesFolder = KnownFolders.PicturesLibrary;
muxc.TreeViewNode pictureNode = new muxc.TreeViewNode();
pictureNode.Content = picturesFolder;
pictureNode.IsExpanded = true;
pictureNode.HasUnrealizedChildren = true;
sampleTreeView.RootNodes.Add(pictureNode);
FillTreeNode(pictureNode);
// Get Music library.
StorageFolder musicFolder = KnownFolders.MusicLibrary;
muxc.TreeViewNode musicNode = new muxc.TreeViewNode();
musicNode.Content = musicFolder;
musicNode.IsExpanded = true;
musicNode.HasUnrealizedChildren = true;
sampleTreeView.RootNodes.Add(musicNode);
FillTreeNode(musicNode);
}
private async void FillTreeNode(muxc.TreeViewNode node)
{
// Get the contents of the folder represented by the current tree node.
// Add each item as a new child node of the node that's being expanded.
// Only process the node if it's a folder and has unrealized children.
StorageFolder folder = null;
if (node.Content is StorageFolder && node.HasUnrealizedChildren == true)
{
folder = node.Content as StorageFolder;
}
else
{
// The node isn't a folder, or it's already been filled.
return;
}
IReadOnlyList<IStorageItem> itemsList = await folder.GetItemsAsync();
if (itemsList.Count == 0)
{
// The item is a folder, but it's empty. Leave HasUnrealizedChildren = true so
// that the chevron appears, but don't try to process children that aren't there.
return;
}
foreach (var item in itemsList)
{
var newNode = new muxc.TreeViewNode();
newNode.Content = item;
if (item is StorageFolder)
{
// If the item is a folder, set HasUnrealizedChildren to true.
// This makes the collapsed chevron show up.
newNode.HasUnrealizedChildren = true;
}
else
{
// Item is StorageFile. No processing needed for this scenario.
}
node.Children.Add(newNode);
}
// Children were just added to this node, so set HasUnrealizedChildren to false.
node.HasUnrealizedChildren = false;
}
private void SampleTreeView_Expanding(muxc.TreeView sender, muxc.TreeViewExpandingEventArgs args)
{
if (args.Node.HasUnrealizedChildren)
{
FillTreeNode(args.Node);
}
}
private void SampleTreeView_Collapsed(muxc.TreeView sender, muxc.TreeViewCollapsedEventArgs args)
{
args.Node.Children.Clear();
args.Node.HasUnrealizedChildren = true;
}
private void SampleTreeView_ItemInvoked(muxc.TreeView sender, muxc.TreeViewItemInvokedEventArgs args)
{
var node = args.InvokedItem as muxc.TreeViewNode;
if (node.Content is IStorageItem item)
{
FileNameTextBlock.Text = item.Name;
FilePathTextBlock.Text = item.Path;
TreeDepthTextBlock.Text = node.Depth.ToString();
if (node.Content is StorageFolder)
{
node.IsExpanded = !node.IsExpanded;
}
}
}
private void RefreshButton_Click(object sender, RoutedEventArgs e)
{
sampleTreeView.RootNodes.Clear();
InitializeTreeView();
}
}
public class ExplorerItemTemplateSelector : DataTemplateSelector
{
public DataTemplate DefaultTemplate { get; set; }
public DataTemplate MusicItemTemplate { get; set; }
public DataTemplate PictureItemTemplate { get; set; }
public DataTemplate MusicFolderTemplate { get; set; }
public DataTemplate PictureFolderTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item)
{
var node = (muxc.TreeViewNode)item;
if (node.Content is StorageFolder)
{
var content = node.Content as StorageFolder;
if (content.DisplayName.StartsWith("Pictures")) return PictureFolderTemplate;
if (content.DisplayName.StartsWith("Music")) return MusicFolderTemplate;
}
else if (node.Content is StorageFile)
{
var content = node.Content as StorageFile;
if (content.ContentType.StartsWith("image")) return PictureItemTemplate;
if (content.ContentType.StartsWith("audio")) return MusicItemTemplate;
}
return DefaultTemplate;
}
}
}
Public NotInheritable Class MainPage
Inherits Page
Public Sub New()
InitializeComponent()
InitializeTreeView()
End Sub
Private Sub InitializeTreeView()
' A TreeView can have more than 1 root node. The Pictures library
' and the Music library will each be a root node in the tree.
' Get Pictures library.
Dim picturesFolder As StorageFolder = KnownFolders.PicturesLibrary
Dim pictureNode As New muxc.TreeViewNode With {
.Content = picturesFolder,
.IsExpanded = True,
.HasUnrealizedChildren = True
}
sampleTreeView.RootNodes.Add(pictureNode)
FillTreeNode(pictureNode)
' Get Music library.
Dim musicFolder As StorageFolder = KnownFolders.MusicLibrary
Dim musicNode As New muxc.TreeViewNode With {
.Content = musicFolder,
.IsExpanded = True,
.HasUnrealizedChildren = True
}
sampleTreeView.RootNodes.Add(musicNode)
FillTreeNode(musicNode)
End Sub
Private Async Sub FillTreeNode(node As muxc.TreeViewNode)
' Get the contents of the folder represented by the current tree node.
' Add each item as a new child node of the node that's being expanded.
' Only process the node if it's a folder and has unrealized children.
Dim folder As StorageFolder = Nothing
If TypeOf node.Content Is StorageFolder AndAlso node.HasUnrealizedChildren Then
folder = TryCast(node.Content, StorageFolder)
Else
' The node isn't a folder, or it's already been filled.
Return
End If
Dim itemsList As IReadOnlyList(Of IStorageItem) = Await folder.GetItemsAsync()
If itemsList.Count = 0 Then
' The item is a folder, but it's empty. Leave HasUnrealizedChildren = true so
' that the chevron appears, but don't try to process children that aren't there.
Return
End If
For Each item In itemsList
Dim newNode As New muxc.TreeViewNode With {
.Content = item
}
If TypeOf item Is StorageFolder Then
' If the item is a folder, set HasUnrealizedChildren to True.
' This makes the collapsed chevron show up.
newNode.HasUnrealizedChildren = True
Else
' Item is StorageFile. No processing needed for this scenario.
End If
node.Children.Add(newNode)
Next
' Children were just added to this node, so set HasUnrealizedChildren to False.
node.HasUnrealizedChildren = False
End Sub
Private Sub SampleTreeView_Expanding(sender As muxc.TreeView, args As muxc.TreeViewExpandingEventArgs)
If args.Node.HasUnrealizedChildren Then
FillTreeNode(args.Node)
End If
End Sub
Private Sub SampleTreeView_Collapsed(sender As muxc.TreeView, args As muxc.TreeViewCollapsedEventArgs)
args.Node.Children.Clear()
args.Node.HasUnrealizedChildren = True
End Sub
Private Sub SampleTreeView_ItemInvoked(sender As muxc.TreeView, args As muxc.TreeViewItemInvokedEventArgs)
Dim node = TryCast(args.InvokedItem, muxc.TreeViewNode)
Dim item = TryCast(node.Content, IStorageItem)
If item IsNot Nothing Then
FileNameTextBlock.Text = item.Name
FilePathTextBlock.Text = item.Path
TreeDepthTextBlock.Text = node.Depth.ToString()
If TypeOf node.Content Is StorageFolder Then
node.IsExpanded = Not node.IsExpanded
End If
End If
End Sub
Private Sub RefreshButton_Click(sender As Object, e As RoutedEventArgs)
sampleTreeView.RootNodes.Clear()
InitializeTreeView()
End Sub
End Class
Public Class ExplorerItemTemplateSelector
Inherits DataTemplateSelector
Public Property DefaultTemplate As DataTemplate
Public Property MusicItemTemplate As DataTemplate
Public Property PictureItemTemplate As DataTemplate
Public Property MusicFolderTemplate As DataTemplate
Public Property PictureFolderTemplate As DataTemplate
Protected Overrides Function SelectTemplateCore(ByVal item As Object) As DataTemplate
Dim node = CType(item, muxc.TreeViewNode)
If TypeOf node.Content Is StorageFolder Then
Dim content = TryCast(node.Content, StorageFolder)
If content.DisplayName.StartsWith("Pictures") Then Return PictureFolderTemplate
If content.DisplayName.StartsWith("Music") Then Return MusicFolderTemplate
ElseIf TypeOf node.Content Is StorageFile Then
Dim content = TryCast(node.Content, StorageFile)
If content.ContentType.StartsWith("image") Then Return PictureItemTemplate
If content.ContentType.StartsWith("audio") Then Return MusicItemTemplate
End If
Return DefaultTemplate
End Function
End Class
Öğeleri ağaç görünümleri arasında sürükleyip bırakma
Aşağıdaki örnekte, öğeleri birbirine sürüklenip bırakılabilen iki ağaç görünümünün nasıl oluşturulacağı gösterilmektedir. Bir öğe diğer ağaç görünümüne sürüklendiğinde listenin sonuna eklenir. Ancak, öğeler ağaç görünümünde yeniden sıralanabilir. Bu örnek ayrıca yalnızca bir kök düğüme sahip ağaç görünümlerini de dikkate alır.
<Page
x:Class="TreeViewTest.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TreeView x:Name="treeView1"
AllowDrop="True"
CanDragItems="True"
CanReorderItems="True"
DragOver="TreeView_DragOver"
Drop="TreeView_Drop"
DragItemsStarting="TreeView_DragItemsStarting"
DragItemsCompleted="TreeView_DragItemsCompleted"/>
<TreeView x:Name="treeView2"
AllowDrop="True"
Grid.Column="1"
CanDragItems="True"
CanReorderItems="True"
DragOver="TreeView_DragOver"
Drop="TreeView_Drop"
DragItemsStarting="TreeView_DragItemsStarting"
DragItemsCompleted="TreeView_DragItemsCompleted"/>
</Grid>
</Page>
using System;
using Windows.ApplicationModel.DataTransfer;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace TreeViewTest
{
public sealed partial class MainPage : Page
{
private TreeViewNode deletedItem;
private TreeView sourceTreeView;
public MainPage()
{
this.InitializeComponent();
InitializeTreeView();
}
private void InitializeTreeView()
{
TreeViewNode parentNode1 = new TreeViewNode() { Content = "tv1" };
TreeViewNode parentNode2 = new TreeViewNode() { Content = "tv2" };
parentNode1.Children.Add(new TreeViewNode() { Content = "tv1FirstChild" });
parentNode1.Children.Add(new TreeViewNode() { Content = "tv1SecondChild" });
parentNode1.Children.Add(new TreeViewNode() { Content = "tv1ThirdChild" });
parentNode1.Children.Add(new TreeViewNode() { Content = "tv1FourthChild" });
parentNode1.IsExpanded = true;
treeView1.RootNodes.Add(parentNode1);
parentNode2.Children.Add(new TreeViewNode() { Content = "tv2FirstChild" });
parentNode2.Children.Add(new TreeViewNode() { Content = "tv2SecondChild" });
parentNode2.IsExpanded = true;
treeView2.RootNodes.Add(parentNode2);
}
private void TreeView_DragOver(object sender, DragEventArgs e)
{
if (e.DataView.Contains(StandardDataFormats.Text))
{
e.AcceptedOperation = DataPackageOperation.Move;
}
}
private async void TreeView_Drop(object sender, DragEventArgs e)
{
if (e.DataView.Contains(StandardDataFormats.Text))
{
string text = await e.DataView.GetTextAsync();
TreeView destinationTreeView = sender as TreeView;
if (destinationTreeView.RootNodes != null)
{
TreeViewNode newNode = new TreeViewNode() { Content = text };
destinationTreeView.RootNodes[0].Children.Add(newNode);
deletedItem = newNode;
}
}
}
private void TreeView_DragItemsStarting(TreeView sender, TreeViewDragItemsStartingEventArgs args)
{
if (args.Items.Count == 1)
{
args.Data.RequestedOperation = DataPackageOperation.Move;
sourceTreeView = sender;
foreach (var item in args.Items)
{
args.Data.SetText(item.ToString());
}
}
}
private void TreeView_DragItemsCompleted(TreeView sender, TreeViewDragItemsCompletedEventArgs args)
{
var children = sourceTreeView.RootNodes[0].Children;
if (deletedItem != null)
{
for (int i = 0; i < children.Count; i++)
{
if (children[i].Content.ToString() == deletedItem.Content.ToString())
{
children.RemoveAt(i);
break;
}
}
}
sourceTreeView = null;
deletedItem = null;
}
}
}
UWP ve WinUI 2
Önemli
Bu makaledeki bilgiler ve örnekler, Windows Uygulama SDK'sı ve WinUI 3kullanan uygulamalar için iyileştirilmiştir, ancak genellikle WinUI 2kullanan UWP uygulamaları için geçerlidir. Platforma özgü bilgiler ve örnekler için UWP API başvurusuna bakın.
Bu bölüm, denetimi bir UWP veya WinUI 2 uygulamasında kullanmak için ihtiyacınız olan bilgileri içerir.
UWP uygulamaları için TreeView, WinUI 2'nin bir parçası olarak dahil edilir. Yükleme yönergeleri de dahil olmak üzere daha fazla bilgi için bkz. WinUI 2. Bu denetimin API'leri hem Windows.UI.Xaml.Controls (UWP) hem de Microsoft.UI.Xaml.Controls (WinUI) ad alanlarında mevcuttur.
- UWP API'leri:TreeView sınıfı, TreeViewNode sınıfı, TreeView.ItemsSource özelliği
- WinUI 2 Apis:TreeView sınıfı, TreeViewNode sınıfı, TreeView.ItemsSource özelliği
- WinUI 2 Galeri uygulamasını açın ve TreeView'un nasıl çalıştığını görün. WinUI 2 Galeri uygulaması çoğu WinUI 2 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın.
Tüm denetimler için en güncel stilleri, şablonları ve özellikleri almak için en son WinUI 2'yi kullanmanızı öneririz.
Bu makaledeki kodu WinUI 2 ile kullanmak için, projenize dahil edilen Windows UI Kitaplığı API'lerini temsil etmek için XAML'de bir diğer ad kullanın (muxckullanıyoruz). Daha fazla bilgi için WinUI 2'yi kullanmaya başlama hakkında bölümüne bakın.
xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
<muxc:TreeView>
<muxc:TreeView.RootNodes>
<muxc:TreeViewNode Content="Flavors">
<muxc:TreeViewNode.Children>
<muxc:TreeViewNode Content="Vanilla"/>
</muxc:TreeViewNode.Children>
</muxc:TreeViewNode>
</muxc:TreeView.RootNodes>
</muxc:TreeView>
İlgili makaleler
GitHub'da bizimle işbirliği yapın
Bu içeriğin kaynağı GitHub'da bulunabilir; burada ayrıca sorunları ve çekme isteklerini oluşturup gözden geçirebilirsiniz. Daha fazla bilgi için katkıda bulunan kılavuzumuzu inceleyin.
Windows developer