如何在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。第二個問題是左側標題與左側列數據的最小尺寸不同。另外，兩個GridSplitters都應該將Horizo​​ntalAlignment設置爲Center。