お薦めTreeListView

![CL_layerView.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599481/e0215519-f21c-e424-3861-e9e11d8fb19e.png)
####レイヤーリスト
昨今のグラフィックツールはレイヤーのグループ化が出来るのでツリービューの搭載は当たり前になっている。
ご覧の通り、カラムで仕訳けられた項目も必要だ。
そう、欲しいのは単なるTreeViewではない、TreeListViewなのだ。
しかしそんなコントローラーは.NETに標準搭載されていない。作るしかないのだ:sweat:
というわけで数多のサンプルを検証して素人なりに出した結果を以下にまとめる。

#dlaa

https://dlaa.me/blog/post/9898803

昨年見つけてそのときは上手くいったコード。
当該コードのままだと階層が限定的だが、
以下をまるまる削除すれば無限階層化される

```:xaml

 <!-- Level 1 template leaves space for 1 child "Toggle" level -->
                    <HierarchicalDataTemplate.ItemTemplate>
                        <HierarchicalDataTemplate ItemsSource="{Binding SubItems}">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition SharedSizeGroup="Task"/>
                                    <ColumnDefinition/>
                                    <ColumnDefinition SharedSizeGroup="Toggle"/>
                                    <ColumnDefinition SharedSizeGroup="Duration"/>
                                    <ColumnDefinition SharedSizeGroup="Notes"/>
                                </Grid.ColumnDefinitions>
                                <TextBlock Grid.Column="0" Text="{Binding Task}" Style="{StaticResource TextBlockStyle}"/>
                                <TextBlock Grid.Column="3" Text="{Binding Duration}" Style="{StaticResource TextBlockStyle}"/>
                                <TextBlock Grid.Column="4" Text="{Binding Notes}" Style="{StaticResource TextBlockStyle}"/>
                            </Grid>

                            <!-- Level 2 template has no children -->
                            <HierarchicalDataTemplate.ItemTemplate>
                                <HierarchicalDataTemplate ItemsSource="{Binding SubItems}">
                                    <Grid>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition SharedSizeGroup="Task"/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition/>
                                            <ColumnDefinition SharedSizeGroup="Duration"/>
                                            <ColumnDefinition SharedSizeGroup="Notes"/>
                                        </Grid.ColumnDefinitions>
                                        <TextBlock Grid.Column="0" Text="{Binding Task}" Style="{StaticResource TextBlockStyle}"/>
                                        <TextBlock Grid.Column="3" Text="{Binding Duration}" Style="{StaticResource TextBlockStyle}"/>
                                        <TextBlock Grid.Column="4" Text="{Binding Notes}" Style="{StaticResource TextBlockStyle}"/>
                                    </Grid>
                                </HierarchicalDataTemplate>
                            </HierarchicalDataTemplate.ItemTemplate>
                        </HierarchicalDataTemplate>
                    </HierarchicalDataTemplate.ItemTemplate>
```

そしてこちらが応用例
![スクリーンショット 2021-06-13 17.30.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599481/0618c516-a14a-bd50-f305-f618d346898a.jpeg)
ご覧の通りカラムがズレてる（削除した部分がまさにそれだから）。
そして、TreeのExpanderが左端カラムから剝がせない。
いずれも、コンバーターとStyleの調整でうまくいくと思う（確か去年は上手くいった）が今回は見送る。

#MarkFerdman
https://www.javaer101.com/en/article/51761702.html
なんらかの質問サイトらしいが、このページの回答部分がよさげ。
応用し、普通に呼び出す。

```:XAML
 <TreeView  ItemsSource="{Binding}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <TextBlock Text="{Binding Name}"/>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
```

するとこうなった。
![スクリーンショット 2021-06-13 17.34.10.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599481/ebe12a2f-76e5-c919-4a34-e5aea5148002.jpeg)

ご覧の通り、
ハイライトが貫通しない、
また、幅を調整しようとするとカラムが破綻する。
カラムヘッダーが作りにくい
などの問題がある。
粘ればなんとかなりそうだが今回は見送る。

#TreeListView
https://www.codeproject.com/Articles/24973/TreeListView-2
これスゴイ。
なんでこんなシンプルなコードでここまで出来るのか不思議なくらいスゴイ。
しかもカラムの移動も可能。完璧だ…！
![スクリーンショット 2021-06-13 17.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599481/69e1e74f-206d-f089-9523-e27507de86b8.png)
※トグルボタンのデザインは改変しています

これで罫線があれば言うことなし！

#罫線を描く
上記コードの最初のBorderをGridに変え、ItemsControlを併記する。


```:generic.xaml
 <Grid x:Name="Border">
                <!--GridViewRowPrsenter containing the current information.-->

                <GridViewRowPresenter Content="{TemplateBinding Header}" Name="ayasiiPresenter"
                    Columns="{Binding Columns, 
                    RelativeSource={RelativeSource Mode=FindAncestor, 
                    AncestorType=local:TreeListView}}"/>
                               <!-- ここから -->
                <ItemsControl ItemsSource="{Binding ElementName=ayasiiPresenter,Path=Columns}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black" BorderThickness="0,0,0.5,0.5" Width="{Binding Path=ActualWidth}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
                <!-- ここまで -->
            </Grid>
```

結果がこちら
![スクリーンショット 2021-06-13 22.47.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599481/b384bde1-5ccc-100c-59e3-ec0b74086d31.png)
バッチリ:hugging:

#その他
有料だが、Nugetにこんなものがある。
![dlh.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1599481/e863e543-dbcd-8c7a-92d6-e9240b4e3bae.png)

有料のコントローラーDataTreeGridだ。
https://dlhsoft.com/HierarchicalDataLightLibrary/datatreegrid.html
デモを見る限りなかなかよさそう。
機会があれば検証しよう。