2011-11-27 43 views
7

我沒有使用DataGrid或ListView,而是使用ScrollViewer和網格創建包含每個單元格列的項目換行面板的單元格。Grid/ScrollViewer-凍結網格標題行垂直滾動,但不是水平滾動

我想要一個類似於datagrid或listview的標題列的行爲,以便在垂直滾動下面的項目時保持其凍結狀態,但讓它水平滾動。

我目前有以下作爲我的主窗口的根,除了有一個垂直滾動條顯示項目的對齊關閉時工作。

注:

  • 的標題列在代碼中動態添加後面到 「mainGrid」下面,對於每一列「1 *」的大小,和被「凍結」 由具有水平滾動條允許但垂直滾動條 已禁用。
  • 然後添加一個內滾動查看器,禁用水平滾動 ,但允許垂直滾動內部「行 分組」。
  • ItemsControl的ItemTemplate爲各個列上的每個「行分組」創建一個網格 。

因此,當「innerScrollViewer」顯示它的垂直滾動條時,項目不再與外部列標題對齊,並且由於右側垂直滾動條,項目向左移動。我如何獲得它動態地與外部列標題爲垂直滾動條顯示或不顯示的兩種情況進行排列?

<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Disabled"> 
     <Grid x:Name="mainGrid" 
       Width="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ScrollViewer}}, Path=ViewportWidth}"> 
    <RowDefinitions> 
     <RowDefinition Height="Auto" />  <!-- Contains Header columns dynamically added to be "frozen" --> 
     <RowDefinition Height="*" />  <!-- "row groupings" --> 
    </RowDefinitions> 

      <ScrollViewer x:Name="innerScrollViewer" 
          HorizontalScrollBarVisibility="Disabled" 
          VerticalScrollBarVisibility="Auto"       
          Grid.Row="1" 
          Grid.ColumnSpan="{Binding Path=NumColumns}"> 

     <ItemsControl Name="mainWorkItemsItemsControl" 
        Width="{Binding ActualWidth, ElementName=mainGrid}" 
            ItemsSource="{Binding MyGroups}" 
            ItemTemplate="{StaticResource groupedTemplate}" />      

      </ScrollViewer> 
    </Grid> 
</ScrollViewer> 


<DataTemplate x:Key="groupedTemplate"> 

    <ItemsControl ItemsSource="{Binding GroupItems}"> 

        <ItemsControl.ItemsPanel> 
         <ItemsPanelTemplate> 
          <!-- Creates a grid with one row and the same number of columns as "mainGrid" above with a star sizing for each column --> 
          <SimpleGrid Rows="Auto" 
             Columns="{p:PyBinding CommaDelimit($[.NumColumns]\, \'*\')}" /> 
         </ItemsPanelTemplate> 
        </ItemsControl.ItemsPanel> 

        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
       <ItemsControl ItemsSource="{Binding Path=GroupedColumnItems}">          
            <ItemsControl.ItemTemplate> 
             <DataTemplate> 
         <MyControl />            
             </DataTemplate> 
            </ItemsControl.ItemTemplate> 
           </ItemsControl> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 

        <ItemsControl.ItemContainerStyle> 
         <Style> 
          <Setter Property="Grid.Column" 
            Value="{Binding Path=Index}" /> 
         </Style> 
        </ItemsControl.ItemContainerStyle> 

    </ItemsControl> 

</DataTemplate> 

回答

1

您有三種選擇。

  1. 使垂直滾動條在默認情況下兩個滾動的觀衆(對標題和內),所以當內滾動瀏覽器需要垂直滾動,垂直滾動條只得到沒有采取任何更多的空間,使可見。

  2. 將標題中每列的寬度屬性與行中的網格中的相應列綁定在一起。所以當一行網格的寬度發生變化時,它也會改變標題對應列的寬度。這也將幫助您爲用戶提供一個設備,通過拖動邊界來重新調整列的大小。但它將需要更多的代碼。

  3. 使內部滾動查看器的垂直條可見並在標題上設置右邊距,該垂直條等於垂直滾動條的寬度。

+0

感謝您的好建議@ makwana.a - 我選擇了類似於#1的選擇,其中滾動條使佈局在滾動條出現並重疊到內容區時不重新排列: http://www.eggheadcafe.com/tutorials/xaml/f51ddf8c-5227-4f1b-a5df-ec3d1b3439ca/styling-the-wpf-scrollviewer.aspx – soundslike