ListBox 컨트롤에서 그리드 스플리터 모양 스크롤을 유지하는 방법

Question

데이터 템플릿에 Grid이있는 ListBox이 있습니다. 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

이 발생하는 가장 큰 문제는 스플리터를 포함하는 열의 폭의 별이다. 이 두 열은 GridSplitters의 너비 2와 일치하도록 너비가 2 여야합니다. 두 번째 문제는 왼쪽 열 데이터와 왼쪽 열 데이터의 최소 크기가 다르다는 것입니다. 또한 두 GridSplitter의 HorizontalAlignment가 Center로 설정되어 있어야합니다.