wpf - この奇妙な WPF TreeListDataGridView をどのように実装できますか?

Question

下の画像でわかるように、他のグループと、パラメータを保持できる任意の数のアイテムを含むことができるグループで構成されるツリー データモデルがあります。パラメータ自体はグローバルに定義され、アイテム内で繰り返し発生します。パラメータの実際の値のみが、異なる項目でのパラメータの使用方法ごとに異なる場合があります。

以下の画像は、カスタム コントロール テンプレートと項目のデータ テンプレートを含む通常の WPF ツリービュー コントロールです。

今私の目標は、テキストボックスの上のパラメーター名を削除し、ツリービューの一番左にある別の列に垂直に積み重ね、テキストボックスをそのままにして、最初の列のパラメーター名に対応するように垂直に積み重ねることです。

コントロール テンプレートとデータ テンプレート、およびビュー モデルへのデータ バインディングを使用してこれを解決する方法はありますか? （はい、MVVMを使用しています）

ツリービュー画像 http://img242.imageshack.us/img242/5377/treebh8.th.png 画像リンク

この問題は、データバインディングでうまく機能しなければならない一般的なレイアウトの問題です。通常、オブジェクト グラフを次のようなビューにバインドします (カットアウト モックアップ)。

ツリーレイアウト http://img75.imageshack.us/img75/5763/treelayoutjh5.jpg

ParamX ヘッダーは、実際にはツリーレイアウトの一部ではないことに注意してください。しかし、値はまだです。ここで、値はそれらとの接続 (つまり、同じ行にある) を維持する必要があります。また、ツリー内のどの項目にも Param1 が含まれていない場合、Param1 ヘッダーと対応する行は完全に消える必要があります。

Answer 1

私はツリービューの専門家ではありませんが、ツリービューがなくてもそのようなものを作成するのは簡単です。

WpfTreeGridWhateverという名前の空のVS2008Wpfアプリケーションから開始します

まず、モデルを定義しましょう。

using System;
using System.Collections.Generic;

namespace WpfTreeGridWhatever
{
    public class ItemBase
    {
    }
    public class Group : ItemBase
    {
        public string Name { get; set; }
        public IList<ItemBase> Items { get; set; }
    }
    public class Item : ItemBase
    {
        public string Name { get; set; }
        public IList<Parameter> Parameters { get; set; }
    }
    public class Parameter
    {
        public string Name { get; set; }
        public string Value { get; set; }
    }
}

ここで、Window1コンストラクターでオブジェクトを作成します（バインドするデータがあるため）。

   public Window1()
    {
        DataContext = new Group[]
        {
            new Group()
            {
                Name="Group A",
                Items = new List<ItemBase>()
                {
                    new Item()
                    {
                        Name="Item",
                        Parameters=new List<Parameter>()
                        {
                            new Parameter(){Name="Param 1",Value="12"},
                            new Parameter(){Name="Param 2",Value="true"},
                            new Parameter(){Name="Param 3",Value="0.0"},
                            new Parameter(){Name="Param 4",Value="off"},
                        }
                    },
                    new Item()
                    {
                        Name="Item",
                        Parameters=new List<Parameter>()
                        {
                            new Parameter(){Name="Param 1",Value="12"},
                            new Parameter(){Name="Param 2",Value="true"}
                        }
                    },
                    new Group()
                    {
                        Name="Group B",
                        Items = new List<ItemBase>()
                        {
                            new Item()
                            {
                                Name="Item",
                                Parameters=new List<Parameter>()
                                {
                                    new Parameter(){Name="Param 1",Value="12"},
                                    new Parameter(){Name="Param 2",Value="true"},
                                    new Parameter(){Name="Param 3",Value="0.0"},
                                    new Parameter(){Name="Param 4",Value="off"},
                                }
                            },
                            new Item()
                            {
                                Name="Item",
                                Parameters=new List<Parameter>()
                                {
                                    new Parameter(){Name="Param 1",Value="12"},
                                    new Parameter(){Name="Param 2",Value="true"},
                                    new Parameter(){Name="Param 3",Value="0.0"},
                                    new Parameter(){Name="Param 4",Value="off"},
                                    new Parameter(){Name="Param 5",Value="2000"},
                                }
                            },
                            new Item()
                            {
                                Name="Item",
                                Parameters=new List<Parameter>()
                                {
                                    new Parameter(){Name="Param 1",Value="12"},
                                    new Parameter(){Name="Param 2",Value="true"},
                                }
                            },
                            new Group()
                            {
                                Name="Group C",
                                Items = new List<ItemBase>()
                                {
                                    new Item()
                                    {
                                        Name="Item",
                                        Parameters=new List<Parameter>()
                                        {
                                            new Parameter(){Name="Param 1",Value="12"},
                                            new Parameter(){Name="Param 2",Value="true"},
                                            new Parameter(){Name="Param 3",Value="0.0"},
                                            new Parameter(){Name="Param 4",Value="off"},
                                        }
                                    },
                                    new Item()
                                    {
                                        Name="Item",
                                        Parameters=new List<Parameter>()
                                        {
                                            new Parameter(){Name="Param 1",Value="12"},
                                            new Parameter(){Name="Param 2",Value="true"},
                                            new Parameter(){Name="Param 3",Value="0.0"},
                                            new Parameter(){Name="Param 4",Value="off"},
                                            new Parameter(){Name="Param 5",Value="2000"},
                                        }
                                    },
                                    new Item()
                                    {
                                        Name="Item",
                                        Parameters=new List<Parameter>()
                                        {
                                            new Parameter(){Name="Param 1",Value="12"},
                                            new Parameter(){Name="Param 2",Value="true"},
                                        }
                                    },
                                }
                            }
                        }
                    }
                }
            }
        };

        InitializeComponent();
    }

そして今、魔法-Window1.xamlでこのコードを使用してください

<Window x:Class="WpfTreeGridWhatever.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:l="clr-namespace:WpfTreeGridWhatever"
    Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <LinearGradientBrush x:Key="Bk" StartPoint="0,0" EndPoint="0,1" >
            <GradientStop Offset="0" Color="DarkGray"/>
            <GradientStop Offset="1" Color="White"/>
        </LinearGradientBrush>
        <DataTemplate DataType="{x:Type l:Parameter}">
            <Border CornerRadius="5" Background="{StaticResource Bk}"
                    BorderThickness="1" BorderBrush="Gray" Margin="2" >
                <StackPanel Margin="5">
                    <TextBlock Height="12" Text="{Binding Name}"/>
                    <TextBox Height="22" Text="{Binding Value}"/>
                </StackPanel>
            </Border>
        </DataTemplate>
        <DataTemplate DataType="{x:Type l:Item}" >
            <StackPanel>
                <Border CornerRadius="5" Background="{StaticResource Bk}"
                    BorderThickness="1" BorderBrush="Gray" Height="25" Margin="3">
                    <TextBlock Height="12" Text="{Binding Name}" VerticalAlignment="Center" Margin="3,0"/>
                </Border>
                <ItemsControl ItemsSource="{Binding Parameters}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>
        <DataTemplate DataType="{x:Type l:Group}">
            <StackPanel>
                <Border CornerRadius="5" Background="{StaticResource Bk}"
                    BorderThickness="1" BorderBrush="Gray" Height="25" Margin="3">
                    <TextBlock Height="12" Text="{Binding Name}" VerticalAlignment="Center" Margin="3,0"/>
                </Border>
                <ItemsControl ItemsSource="{Binding Items}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Horizontal"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </StackPanel>
        </DataTemplate>

    </Window.Resources>
    <Grid>
        <ItemsControl ItemsSource="{Binding}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <StackPanel Orientation="Horizontal"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Window>

これで始められるはずです

Answer 2

質問のタイトルで想定していることを試すことができます-TreeListDataGridViewを作成します。これは、上部のTreeViewと下部のDataGridで構成されるカスタムコントロールになります。または、目的の効果に応じて、通常のグリッドになります。そうすれば、ルックアンドフィールが得られ、データバインディング、コントロールテンプレートなどのすべての利点が維持されます。