如何在 ListBox 控件中保持 gridsplitter 无缝滚动

Question

我有一个 ListBox ，其数据模板中有 Grid 。在 Grid 中，我有一个 Splitter 控件。现在的问题是：当我绑定列表框的项目源时，会在内部生成多个网格，并且由于这些网格，我的拆分器控件无法工作。它的工作方式是不可预测的。这意味着当我将分离器控件移至左侧时，它会平滑移动，但当我尝试将其从另一行移动时，它不会向后移动。请帮助我解决这个问题。

更多参考请参见示例代码：

<Window x:Class="MultiColumnList.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:MultiColumnList"
Title="Window1" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="400" d:DesignWidth="400" SizeToContent="WidthAndHeight">
<Grid >
    <Grid.Resources>
        <XmlDataProvider x:Key="BlogData" XPath="Blogs/Blog">
            <x:XData>
                <Blogs xmlns="">
                    <Blog>
                        <BlogSite>simplegeek.com</BlogSite>
                        <Blogger OnlineStatus="Offline">Chris Anderson</Blogger>
                        <Url>http://simplegeek.com</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>fortes.com</BlogSite>
                        <Blogger OnlineStatus="Offline">Fil Fortes</Blogger>
                        <Url>http://fortes.com/work</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>Longhorn Blogs</BlogSite>
                        <Blogger OnlineStatus="Online">Rob Relyea</Blogger>
                        <Url>http://www.longhornblogs.com/rrelyea/</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>designerslove.net</BlogSite>
                        <Blogger OnlineStatus="Online">Nathan Dunlap</Blogger>
                        <Url>http://designerslove.net/</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>blogs.msdn.com</BlogSite>
                        <Blogger OnlineStatus="Online">Karsten Januszewski</Blogger>
                        <Url>http://blogs.msdn.com/karstenj</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>weblogs.asp.net</BlogSite>
                        <Blogger OnlineStatus="Online">Greg Schecter</Blogger>
                        <Url>http://weblogs.asp.net/greg_schechter</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>blogs.msdn.com</BlogSite>
                        <Blogger OnlineStatus="Online">Tim Sneath</Blogger>
                        <Url>http://blogs.msdn.com/tims/</Url>
                    </Blog>

                    <Blog>
                        <BlogSite>weblogs.asp.net</BlogSite>
                        <Blogger OnlineStatus="Offline">Marcelo Lopez-Ruiz</Blogger>
                        <Url>http://weblogs.asp.net/marcelolr/</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>blogs.msdn.com</BlogSite>
                        <Blogger OnlineStatus="Online">Kevin Moore</Blogger>
                        <Url>http://blogs.msdn.com/okoboji/default.aspx</Url>
                    </Blog>
                    <Blog>
                        <BlogSite>laurenlavoie.com</BlogSite>
                        <Blogger OnlineStatus="Offline">Lauren Lavoie</Blogger>
                        <Url>http://laurenlavoie.com/</Url>
                    </Blog>
                </Blogs>
            </x:XData>
        </XmlDataProvider>

        <DataTemplate x:Key="BlogDataTemplate">

            <Grid TextBlock.FontSize="12" LayoutUpdated="Grid_LayoutUpdated">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition x:Name="LeftColumn" Width="Auto"   SharedSizeGroup="BloggerColumn"/>
                    <ColumnDefinition  x:Name="Center" Width="*"  SharedSizeGroup="BlogSiteColumn"/>
                    <ColumnDefinition x:Name="Right" Width="*"  SharedSizeGroup="OnlineStatusColumn"/>
                </Grid.ColumnDefinitions>

                <TextBlock Grid.Column="0" Margin="10,0,10,0" Text="{Binding XPath=Blogger}"/>
                <GridSplitter Grid.Column="1" Width="2"  HorizontalAlignment="Center" Background="Black"  DragCompleted="GridSplitter_DragCompleted"/>

                <TextBlock Grid.Column="2" Margin="10,0,10,0" Text="{Binding XPath=Blogger/@OnlineStatus}"/>
            </Grid>
        </DataTemplate>

        <ControlTemplate x:Key="Header" TargetType="{x:Type Button}">
            <Border Background="LightGray" 
                TextBlock.Foreground="white" 
                TextBlock.FontSize="20" 
                Padding="10,3,10,4">
                <ContentPresenter/>
            </Border>
        </ControlTemplate>

        <Grid x:Key="ListHeader" Margin="5" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="BloggerColumn"/>
                <ColumnDefinition Width="*" SharedSizeGroup="BlogSiteColumn"/>
                <ColumnDefinition Width="*" SharedSizeGroup="BloggerOnlineStatusColumn"/>
            </Grid.ColumnDefinitions>
            <Button Grid.Column="0" Template="{StaticResource Header}">Blogger</Button>
            <GridSplitter Grid.Column="1" Width="2"  Background="Black" HorizontalAlignment="Stretch" DragCompleted="GridSplitter_DragCompleted"  />
            <Button Grid.Column="2" Template="{StaticResource Header}">Status</Button>
        </Grid>


        <Style x:Key="HeaderedScrollViewer" TargetType="{x:Type ScrollViewer}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ScrollViewer}">
                        <Grid Background="{TemplateBinding Background}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>

                            <DockPanel Margin="{TemplateBinding Padding}">
                                <ScrollViewer DockPanel.Dock="Top"
                                          local:SetHorizontalOffset.Offset="{Binding 
                                                RelativeSource={RelativeSource TemplatedParent}, 
                                                Path=HorizontalOffset}" 
                                          HorizontalScrollBarVisibility="Hidden"
                                          VerticalScrollBarVisibility="Hidden"
                                          Focusable="false"
                                          Content="{StaticResource ListHeader}">
                                </ScrollViewer>

                                <ScrollContentPresenter Name="PART_ScrollContentPresenter"
                                    KeyboardNavigation.DirectionalNavigation="Local"/>
                            </DockPanel>

                            <ScrollBar Name="PART_HorizontalScrollBar"
                                Orientation="Horizontal"
                                Grid.Row="1"
                                Maximum="{TemplateBinding ScrollableWidth}"
                                ViewportSize="{TemplateBinding ViewportWidth}"
                                Value="{TemplateBinding HorizontalOffset}"
                                Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"/>

                            <ScrollBar Name="PART_VerticalScrollBar"
                                Grid.Column="1"
                                Maximum="{TemplateBinding ScrollableHeight}"
                                ViewportSize="{TemplateBinding ViewportHeight}"
                                Value="{TemplateBinding VerticalOffset}"
                                Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="{x:Type ListBox}" TargetType="{x:Type ListBox}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate>
                        <ScrollViewer Style="{StaticResource HeaderedScrollViewer}" 
                                      Grid.IsSharedSizeScope="True">
                            <StackPanel IsItemsHost="true"/>
                        </ScrollViewer>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </Grid.Resources>

    <ListBox ItemsSource="{Binding Source={StaticResource BlogData}}" 
             ItemTemplate="{StaticResource BlogDataTemplate}" Height="400" Width="600"/>
</Grid>

Answer 1

您遇到的主要问题是包含拆分器的列的列宽的星号。这两列的宽度应为 2，以匹配 GridSplitters 上的宽度 2。第二个问题是左标题与左列数据的最小大小不同。此外，两个 GridSplitter 都应将 Horizo​​ntalAlignment 设置为 Center。