web-dev-qa-db-ja.com

TreeView、HierarchicalDataTemplate、および再帰的データ

私のツリービューには、ItemsSourceを提供する2つの異なるクラスがあります。

public class TreeViewModel : ViewModelBase
{
    public ObservableCollection<NodeViewModel> Items { get; set; }
}

public class NodeViewModel : ViewModelBase
{
    public string Id { get; set; }
    public string Name { get; set; }
    public ObservableCollection<NodeViewModel> Children { get; set; }
}

TreeViewにTreeViewModelの項目を表示し、NodeViewModelによって提供される階層データを表示する必要があります。

これが私のXAMLです

<Window x:Class="TreeViewMasterDetails.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TreeViewMasterDetails" 
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <TreeView Height="Auto" 
                  HorizontalAlignment="Stretch" 
                  Margin="10" 
                  VerticalAlignment="Stretch" 
                  Width="Auto">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="x:Type local:TreeViewModel" ItemsSource="{Binding Items}">
                    <TextBlock Text="{Binding Path=Name}"></TextBlock>
                </HierarchicalDataTemplate>
                <HierarchicalDataTemplate DataType="x:Type local:NodeViewModel" ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Name}"></TextBlock>
                </HierarchicalDataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</Window>

ItemsのItemsSourceとしてTreeViewを提供しようとしました。何かを表示する場合、データを階層的に表示しません。

また、TreeView.Resourcesの代わりにItemTemplateを使用してみました。

それの何が問題になっていますか？

おそらく、最初のTextBlock Text Bindingに問題がありますか？そこにNameのNodeViewModelのItemsプロパティを表示したい。

c#wpftreeviewhierarchicaldatatemplate
14
Mare Infinitus

@ sa_ddam213が言ったように、HierarchicalDataTemplateに必要なのはNodeViewModelだけですが、コードの唯一の問題は中かっこ（{および}） ために DataType="x:Type local:TreeViewModel"データテンプレート定義内（DataType="{x:Type local:TreeViewModel}"）。大括弧とItemsSourceバインディングを追加すると、問題が解決します。

HierarchicalDataTemplateの追加のTreeViewModelは使用されませんが、害はありません。

3
Mohammad Dehghan

これはHierarchicalDataTemplateに表示される唯一のものであるため、NodeViewModelに対してTreeViewを宣言するだけでよく、実際のItemSourceをTreeViewにバインドします。

<TreeView ItemsSource="{Binding Items}">
    <TreeView.Resources>
        <HierarchicalDataTemplate DataType="{x:Type local:NodeViewModel}" ItemsSource="{Binding Children}">
            <TextBlock Text="{Binding Name}"></TextBlock>
        </HierarchicalDataTemplate>
    </TreeView.Resources>
</TreeView>

完全な例

XAML：

<Window x:Class="WpfApplication13.MainWindow"
        xmlns="http://schemas.Microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.Microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication13"
        Title="MainWindow" x:Name="UI" Width="343" Height="744.625" >

    <TreeView DataContext="{Binding ElementName=UI, Path=TreeModel}" ItemsSource="{Binding Items}">
        <TreeView.Resources>
            <HierarchicalDataTemplate DataType="{x:Type local:NodeViewModel}" ItemsSource="{Binding Children}">
                <TextBlock Text="{Binding Name}"></TextBlock>
            </HierarchicalDataTemplate>
        </TreeView.Resources>
    </TreeView>

</Window>

コード：

public partial class MainWindow : Window
{

    public MainWindow()
    {
        InitializeComponent();
    }

    public TreeViewModel TreeModel
    {
        get
        {
            return new TreeViewModel
            {
                Items = new ObservableCollection<NodeViewModel>{
                           new NodeViewModel { Name = "Root", Children =  new ObservableCollection<NodeViewModel> {
                              new NodeViewModel { Name = "Level1" ,  Children = new ObservableCollection<NodeViewModel>{ 
                                  new NodeViewModel{ Name = "Level2"}}} } }}
            };
        }
    }
}

public class TreeViewModel
{
    public ObservableCollection<NodeViewModel> Items { get; set; }
}

public class NodeViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public ObservableCollection<NodeViewModel> Children { get; set; }
}

結果：

enter image description here

24
sa_ddam213