在两个不同的控件中连接单元格的宽度/高度？

Question

我需要创建两个包含相同项目（动态数量）的控件，第一个控件代表键，第二个控件代表值。

我需要它，以便当用户调整上列宽度时，它应该影响（值的下行）中的同一列。

这是我想要的例子：

<Window 
  DataContext="{Binding RelativeSource={RelativeSource Self}}"
  x:Class="MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Window.Resources>
    <ItemsPanelTemplate x:Key="ItemsPanelTemplate">
      <VirtualizingStackPanel Orientation="Horizontal"/>
    </ItemsPanelTemplate>
  </Window.Resources>
  <StackPanel>
    <ItemsControl ItemsSource="{Binding Keys}" 
                  ItemsPanel="{StaticResource ItemsPanelTemplate}"/>
    <ItemsControl Grid.Row="1" ItemsSource="{Binding Values}" 
                  ItemsPanel="{StaticResource ItemsPanelTemplate}"/>
  </StackPanel>
</Window>

---

Imports System.Collections.Specialized
Class MainWindow
  Private Sub Window_Loaded(ByVal sender As Object,
                            ByVal e As RoutedEventArgs) Handles MyBase.Loaded
    DataContext =
      New StringDictionary From
      {
        {"key1", "value1"},
        {"key2", "value2"},
        {"key3", "value3"},
        {"key4", "value4"}
      }
  End Sub
End Class

结果：

同样，我希望能够创建一个类似DataGrid的控件，即使支持单元边界，并且应该将单元格宽度和高度连接到其他控件的宽度 +允许调整大小。

我更喜欢做到这一点。注意：这是一个自定义控件，因此我可以在必要时声明适当的属性。但是请记住，细胞的高度和宽度必须是动态的，并且对特定的列/行必须具有动态性和个体。

在参照 这 问题，我以略有不同的方式创建了它（对单元格具有第三个控制），但是问题仍然相同，我希望列和单元格的高度宽度是动态的，并赋予用户能够调整它们大小的能力。彼此。

更新

迪克隆的答案 是我想实施的东西，但是我尝试了他提供的示例 ItemsControlS' Grid.IsSharedSizeScope 属性为true，但它不起作用，这是结果（裁剪）：

是否可以在两个不同的控件之间应用共享尺寸范围？

Answer 1

我尝试了一些东西，似乎有效：

XAML：

<Window x:Class="WpfApplication2.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication2"
        Title="MainWindow"
        Height="350"
        Width="525">
    <Window.Resources>
        <local:GroupNameGenerator x:Key="GroupNameGenerator1" />
        <local:GroupNameGenerator x:Key="GroupNameGenerator2" />
    </Window.Resources>
    <Grid>
        <StackPanel Grid.IsSharedSizeScope="True">
            <ItemsControl Name="ItemsControl1">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="{Binding Converter={StaticResource GroupNameGenerator1}}" />
                            </Grid.ColumnDefinitions>
                            <Border BorderBrush="Black"
                                    BorderThickness="1"
                                    Margin="5"
                                    Padding="5">
                                <TextBlock Text="{Binding}" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
            <ItemsControl Name="ItemsControl2">
                <ItemsControl.ItemsPanel>
                    <ItemsPanelTemplate>
                        <StackPanel Orientation="Horizontal" />
                    </ItemsPanelTemplate>
                </ItemsControl.ItemsPanel>
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition SharedSizeGroup="{Binding Converter={StaticResource GroupNameGenerator2}}" />
                            </Grid.ColumnDefinitions>
                            <Border BorderBrush="Black"
                                    BorderThickness="1"
                                    Margin="5"
                                    Padding="5">
                                <TextBlock Text="{Binding}" />
                            </Border>
                        </Grid>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Grid>
</Window>

代码 ：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace WpfApplication2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ObservableCollection<Int32> list1 = new ObservableCollection<Int32>();
        ObservableCollection<String> list2 = new ObservableCollection<String>();

        public MainWindow()
        {
            InitializeComponent();

            for (int i = 0; i < 25; i++)
            {
                list1.Add(i + 1);
                list2.Add(new String('0', ((i + 1) / 3)));
            }

            ItemsControl1.ItemsSource = list1;
            ItemsControl2.ItemsSource = list2;
        }
    }

    public class GroupNameGenerator : IValueConverter
    {
        public Int32 Index { get; set; }

        public GroupNameGenerator()
        {
            Index = 0;
        }

        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            return String.Format("Group{0}", ++Index);
        }

        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }
}

Answer 2

嗨，请检查以下链接的样本。sites.google.com/site/html5tutorials/paralleldatabinding.zip

连接的样品是优化的。即，大量的列和较少的行数。样品包含50k列和10行。渲染少于一秒钟。