请教大牛，如何在两个不同的容器中同步显示同一个Item的不同部分。

[woncomp]

我要实现一个时间轴的控件，控件是一个自上而下的列表，每一行是一个时间线。
但是又要分成左右两部分，左边是所有时间线的Header，右边是实际时间线的操作区。

参考这个界面。


我自己的考虑是有两种方案。

一个方案是左右使用两个StackPanel。这里要处理的是，从我的自定义控件外部上看，肯定每一行对我来说是一条数据的，那么在WPF里如何把这一条数据同时维护在两个StackPanel里显示，并且位置和尺寸还是要对齐的（这个统一的高度又如何算）。而且好像用这样的方法不是很遵循WPF的VisualTree结构。

另一个方案是就用一个StackPanel来做，然后我自己做一个假的Splitter来代码控制Header区域的宽度。但是我的右侧部分是需要可以独立的进行左右滚动的。

这里希望大牛可以指点一下在WPF中这种需求应该使用何种思路实现
新手一枚，对于WPF的很多处理思想都不是很熟悉，请大牛指点！

[exception92]

控制Header区域的宽度。但是我的右侧部分是需要可以独立的进行左右滚动的。 -》完全可以使用一个ListBoxItem，修改它的ItemContainerStyle 控件模板，就像你贴出的第二次布局样式一样。 不过既要控制左侧宽度，又要右侧进行滚动，除非你把右侧设置一个最小的宽度值，当splitter移动 到这个最小宽度值时，用ScrollViewer来包含显示的内容。

[exception92]

WPF里如何把这一条数据同时维护在两个StackPanel里显示 -》指定到各自的DataContext，绑定要显示的字段就可以显示。 第二种方案 可行，因为你的“右侧部分需要滚动“。不过不要使用stackpanel，最好使用grid分2列布局，用Splitter 来控制第二列的宽度 就可以实现”右侧滚动“。

[woncomp]

引用 1 楼 duanzi_peng 的回复:

WPF里如何把这一条数据同时维护在两个StackPanel里显示 -》指定到各自的DataContext，绑定要显示的字段就可以显示。 第二种方案 可行，因为你的“右侧部分需要滚动“。不过不要使用stackpanel，最好使用grid分2列布局，用Splitter 来控制第二列的宽度 就可以实现”右侧滚动“。

关于右侧滚动的事情，可以说详细些吗？ 我现在的布局类似于这样

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition Width="5" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />
    <ListBox Grid.Column="0" x:Name="leftList">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Name}" />
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <ScrollViewer>
        <ListBox Grid.Column="1" x:Name="rightList">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding Desc}" />
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </ScrollViewer>
</Grid>

如果是左右共用一个list，我要针对每条ListViewItem来拆分两个Grid吗？就像这样：

        <ListBox>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="5" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <GridSplitter Grid.Column="1" HorizontalAlignment="Stretch" />

                        <TextBlock Grid.Column="0" Text="{Binding Path=Name}" />
                        <TextBlock Grid.Column="2" Text="{Binding Path=Desc}" />
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

但是我还是不明白这样做的话如何实现右侧的GridCell滚动 = =