【问题标题】:How could I implement this strange WPF TreeListDataGridView?我怎么能实现这个奇怪的 WPF TreeListDataGridView?
【发布时间】:2010-09-26 19:38:06
【问题描述】:

正如您在下图中所见,我有一个树数据模型,其中包含可以包含其他组的组以及可以再次保存参数的任意数量的项目。参数本身是全局定义的,并且只会在项目中再次出现。只有参数的实际值可能会因不同项目中的参数用法而异。

下图是一个普通的 WPF 树视图控件,带有自定义控件模板和项目的数据模板。

现在我的目标是删除文本框上方的参数名称并将它们垂直堆叠在树视图最左侧的单独列中,然后将文本框留在那里但也垂直堆叠,以便它们与它们的参数名称对应第一列。

有没有办法通过控制模板和数据模板以及数据绑定到视图模型来解决这个问题? (是的,我使用 MVVM)

treeview image http://img242.imageshack.us/img242/5377/treebh8.th.png image link

这个问题是一个通用的布局问题,必须与数据绑定一起工作。通常我想将对象图绑定到一个看起来像这样的视图(cutout mockup):

treelayout http://img75.imageshack.us/img75/5763/treelayoutjh5.jpg

请注意,ParamX 标头不再是树形布局的一部分。但价值仍然存在。现在这些值必须与它们保持连接(即它们在同一行)。此外,如果树中没有任何项目包含例如 Param1,则 Param1 标题和相应的行必须完全消失。

【问题讨论】:

    标签: wpf treeview datatemplate hierarchicaldatatemplate controltemplates


    【解决方案1】:

    我不是树视图专家,但如果没有树视图,构建类似的东西很容易。

    从一个名为 WpfTreeGridWhatever 的空 VS2008 Wpf 应用程序开始

    首先,让我们定义我们的模型:

    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>
    

    这应该让你开始

    【讨论】:

    • 感谢您的详细解答。很高兴知道即使没有树视图,如何构建分层可视化是多么简单。但我的主要问题出在其他地方。它更多的是与动态数据绑定相结合的一般布局问题。请参阅下面的答案。
    • 抱歉 - 我修改了最初的问题并添加了一些附加信息,而不是答案。
    【解决方案2】:

    您可以尝试问题标题中的假设 - 创建一个 TreeListDataGridView。它将是一个自定义控件,由顶部的 TreeView 和底部的 DataGrid 组成 - 或者可能只是一个普通的 Grid,具体取决于所需的效果。这样,您将拥有自己的外观,并保留数据绑定、控件模板等的所有优势。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-09-21
      • 1970-01-01
      • 2021-10-01
      • 2020-02-07
      • 1970-01-01
      • 2019-11-10
      相关资源
      最近更新 更多