为什么这在设计时不起作用?

您可以轻松创建设计时数据:

1. 创建数据模型:

   public class Person
   {
       public string Name { get; set; }
   
       public int  Age { get; set; }
   }
   
   public class PersonCollection : List<Person>
   {
       public PersonCollection()
       {
   
       }
   }
   

2. 创建一个带有 .xaml 扩展名包含:

DesignTimeTreeData。xaml

    <local:PersonCollection xmlns:local="clr-namespace:Test_TreeWithDesignData">
        <local:Person Name="Joan Solo" Age="32" />
        <local:Person Name="Amara Skywalker" Age="31" />
    </local:PersonCollection>

3. 使用 d:DataContext 和 d:DesignData 使用DesignTimeTreeData中指定的数据。xaml:

主窗口。xaml

    <Window x:Class="Test_TreeWithDesignData.MainWindow"
            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:local="clr-namespace:Test_TreeWithDesignData"
            Title="MainWindow"
            Height="350"
            Width="525"
            mc:Ignorable="d">
        <Grid>
            <TreeView
                d:DataContext="{d:DesignData Source=./DesignTimeTreeData.xaml}"
                ItemsSource="{Binding}">
                <TreeView.Resources>
                    <DataTemplate DataType="{x:Type local:Person}" >
                        <StackPanel Orientation="Horizontal" Height="25">
                            <Label Content="{Binding Name}"/>
                            <Label Content="{Binding Age}" Margin="3,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </TreeView.Resources>
            </TreeView>
        </Grid>
    </Window>

4. 自从 Window.DataContext 属性设置为 ViewModel 还有 TreeView.DataContext 是它的一个集合,为了让两个数据源都工作,您可以围绕 TreeView 用一个 Grid 哪一个 DataContext 设置为 视图模型 这是我的收藏。

DummyViewModel。反恐精英

    public class DummyViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            var handler = PropertyChanged;
            if (handler != null)
            {
                handler(this, new PropertyChangedEventArgs(propertyName));
            }
        }

        public PersonCollection Persons { get; set; }

        public DummyViewModel()
        {
            this.Persons = new PersonCollection();
        }
    }

主窗口。xaml

    <Window x:Class="Test_TreeWithDesignData.MainWindow"
            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:local="clr-namespace:Test_TreeWithDesignData"
            Title="MainWindow"
            Height="350"
            Width="525"
            mc:Ignorable="d">
        <Window.DataContext>
            <local:DummyViewModel />
        </Window.DataContext>

        <Grid Name="RootGrid">
            <Grid Name="TreeGrid" DataContext="{Binding Persons}">
                <TreeView d:DataContext="{d:DesignData Source=./DesignTimeTreeData.xaml}"
                    ItemsSource="{Binding}">
                    <TreeView.Resources>
                        <DataTemplate DataType="{x:Type local:Person}" >
                            <StackPanel Orientation="Horizontal" Height="25">
                                <Label Content="{Binding Name}"/>
                                <Label Content="{Binding Age}" Margin="3,0,0,0"/>
                            </StackPanel>
                        </DataTemplate>
                    </TreeView.Resources>
                </TreeView>
            </Grid>
        </Grid>
    </Window>

结果:

编辑

下一个问题是:我如何在设计器中展开项目?

5. 这个 Person 将有一群人:

   public class Person
   {
       public string Name { get; set; }
   
       public int  Age { get; set; }
   
       public PersonCollection Childs { get; set; }
   }
   

6. 设计时数据将有一个孩子

DesignTimeTreeData。xaml

    <local:PersonCollection xmlns:local="clr-namespace:Test_TreeWithDesignData">
        <local:Person Name="Joan Solo" Age="32" />
        <local:Person Name="Amara Skywalker" Age="31">
            <local:Person.Childs>
                <local:PersonCollection>
                    <local:Person Name="Han Skywalker" Age="10" />
                </local:PersonCollection>
            </local:Person.Childs>
        </local:Person>
    </local:PersonCollection>

7. 树现在将有一个HierarchycalDataTemplate:

   <HierarchicalDataTemplate
       DataType="{x:Type local:Person}"
       ItemsSource="{Binding Childs}">
       <StackPanel Orientation="Horizontal" Height="25">
           <Label Content="{Binding Name}"/>
           <Label Content="{Binding Age}" Margin="3,0,0,0"/>
       </StackPanel>
   </HierarchicalDataTemplate>
   

8. 还有 树景 将绑定到 DesignerProperties.IsInDesignMode 要展开设计器中的项目,请执行以下操作:

   <TreeView.ItemContainerStyle>
       <Style TargetType="TreeViewItem">
           <Style.Triggers>
               <DataTrigger
                       Binding="{Binding RelativeSource={RelativeSource Self}, Path=(pf:DesignerProperties.IsInDesignMode)}"
                       Value="true"
                       >
                   <Setter Property="IsExpanded" Value="True" />
               </DataTrigger>
           </Style.Triggers>
       </Style>
   </TreeView.ItemContainerStyle>
   

这是窗口的xaml:

主窗口。xaml

    <Window x:Class="Test_TreeWithDesignData.MainWindow"
            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:local="clr-namespace:Test_TreeWithDesignData"
            xmlns:pf="clr-namespace:System.ComponentModel;assembly=PresentationFramework"
            Title="MainWindow"
            Height="250"
            Width="325"
            mc:Ignorable="d"
            >
        <Window.DataContext>
            <local:DummyViewModel />
        </Window.DataContext>

        <Grid Name="RootGrid">

            <Grid Name="TreeGrid" DataContext="{Binding Persons}">
                <TreeView
                    d:DataContext="{d:DesignData Source=./DesignTimeTreeData.xaml}"
                    ItemsSource="{Binding}"
                    >
                    <TreeView.ItemContainerStyle>
                        <Style TargetType="TreeViewItem">
                            <Style.Triggers>
                                <DataTrigger
                                        Binding="{Binding RelativeSource={RelativeSource Self}, Path=(pf:DesignerProperties.IsInDesignMode)}"
                                        Value="true"
                                        >
                                    <Setter Property="IsExpanded" Value="True" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </TreeView.ItemContainerStyle>
                    <TreeView.Resources>
                        <HierarchicalDataTemplate
                            DataType="{x:Type local:Person}"
                            ItemsSource="{Binding Childs}"
                            >
                            <StackPanel Orientation="Horizontal" Height="25">
                                <Label Content="{Binding Name}"/>
                                <Label Content="{Binding Age}" Margin="3,0,0,0"/>
                            </StackPanel>
                        </HierarchicalDataTemplate>
                    </TreeView.Resources>
                </TreeView>
            </Grid>
        </Grid>
    </Window>

结果如下:

一旦你开始绑定、设置DataContext、ItemSource等,设计师就会对你大发雷霆。只需删除所有绑定(如图3所示),设计器就可以工作了。把所有的东西排好,或者做任何你需要做的事情,然后再添加绑定。