Nhúng một ItemsControl trong ScrollViewer

Question

Có một số câu hỏi liên quan đến ScrollViewer mà tôi đã nghiên cứu, nhưng không có câu hỏi nào trong số đó có hiệu quả đối với tôi. Điều này gần như chắc chắn đi xuống đến sự thiếu hiểu biết của tôi về kích thước của một nguyên tố. Đầu tiên, XAML của tôi (ngoài định nghĩa UserControl, đây là toàn quyền kiểm soát):

<DockPanel Width="Auto"> 
      <ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}"> 
      <ItemsControl Focusable="false" Width="Auto" MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <DockPanel /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Grid Margin="3,0,3,3"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="110"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/> 
          <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/> 
         </Grid> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     </ScrollViewer> 
     </DockPanel> 

Điều khiển này được tải trong một tab làm nội dung. Cửa sổ lưu trữ tab có thể thay đổi kích thước và kích thước tối thiểu của nội dung tab là 60. Những gì tôi đang cố gắng thực hiện là trình cuộn ảnh điền vào tab, nhưng không đẩy tab qua các giới hạn của cửa sổ. Với XAML ở trên, nội dung dư thừa dẫn đến chiều cao tab mở rộng và thanh cuộn xuất hiện trên Cửa sổ, không phải là Tab.

Trình xem cuộn đang mở rộng thành kích thước của con, do đó đẩy độ cao của tab ra ngoài. Những gì tôi muốn, là scrollviewer được cố định với kích thước của tab, và có nội dung trong scrollviewer phát triển trong giới hạn của scrollviewer, do đó một thanh cuộn được trình bày khi có quá nhiều nội dung.

Tôi sẽ làm gì sai?

Chỉnh sửa:

Sự cố là Chiều cao, không phải Chiều rộng. Chiều rộng là hành xử như nó phải. Tôi đã thay đổi trình bao bọc thành lưới như được đề xuất, nhưng trừ khi tôi đặt thuộc tính Độ cao, lưới sẽ mở rộng để vừa với nội dung của trình xem ảnh được mở rộng, gây ra cùng một vấn đề như trước đây.

XAML Cập nhật:

<Grid MinHeight="60" VerticalAlignment="Top"> 
     <Border BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1"> 
     <ScrollViewer 
      HorizontalScrollBarVisibility="Auto" 
      VerticalScrollBarVisibility="Visible" 
      CanContentScroll="True" 
      BorderBrush="{DynamicResource PanelBorder}" 
      BorderThickness="1,1,1,1" 
      Background="{DynamicResource LightGradientBackgroundBrush}" 
      > 
      <ItemsControl Focusable="false" Width="Auto" MinHeight="30" ItemsSource="{Binding RequiredFields}" OverridesDefaultStyle="False"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Vertical" /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Grid Margin="3,0,3,3"> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="110"/> 
           <ColumnDefinition Width="*"/> 
          </Grid.ColumnDefinitions> 
          <Label Content="{Binding Path=Header, Mode=OneTime}" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="0"/> 
          <TextBox Text="{Binding Path=Value}" HorizontalAlignment="Stretch" Foreground="{DynamicResource SilverBorderColorBrush}" Grid.Column="1"/> 
         </Grid> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
       <ItemsControl.ItemContainerStyle> 
        <Style> 
         <Setter Property="DockPanel.Dock" Value="Top"/> 
        </Style> 
       </ItemsControl.ItemContainerStyle> 
      </ItemsControl> 
     </ScrollViewer> 
     </Border> 
    </Grid> 

Không ai trong số các câu trả lời dưới đây đã giúp làm cho công việc này, nhưng tôi khá tự tin rằng câu trả lời sẽ làm việc trong phần lớn các trường hợp.

Điều khiển của tôi được lưu trữ trong trang tab. Nó được nạp động và tôi không thể kiểm soát cách trang tab được thiết kế. Cảm giác ruột của tôi là điều khiển tab cho phép nhiều không gian như nội dung bên trong nó. Bởi vì lưới trong điều khiển của tôi nói rằng sử dụng hết dung lượng trống và trang tab cung cấp nhiều không gian như vùng chứa con cần và mục kiểm soát mục đang cố gắng sử dụng nhiều không gian như lưới cung cấp; nó lên đến đỉnh điểm trong trang tab mở rộng để chứa toàn bộ nội dung ItemsControl.

Nếu trang tab được tạo để không mở rộng để vừa với nội dung của nó, các giải pháp bên dưới sẽ hoạt động. Thật không may, tôi không tin rằng đây là trường hợp.

Một ngày lãng phí cho việc này. Thời gian để di chuyển trên.

Answer 1

Ah có những phức tạp của WPF bố trí là một nỗi đau đôi khi. Điều gì đang giết bạn là sự kết hợp của DockPanel và Width = "Auto" trên ItemsControl của bạn. DockPanel nói với trẻ em rằng chúng có thể có nhiều không gian như chúng muốn cho bố cục. ItemsControl của bạn sau đó nói với trẻ em của nó điều tương tự. Cuối cùng, cửa sổ tạo ra một ScrollViewer để xử lý nội dung quá khổ.

Thay thế DockPanel bên ngoài bằng lưới và tất cả sẽ tốt.

Answer 2

Để có ScrollViewer không sức mạnh, bạn cần phải sử dụng lưới chứa

<Grid>    
<ScrollViewer DockPanel.Dock="Top" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Visible" CanContentScroll="True" BorderBrush="{DynamicResource PanelBorder}" BorderThickness="1,1,1,1" Background="{DynamicResource LightGradientBackgroundBrush}"> 
... 
</ScrollViewer>   
</Grid> 

DockPanel và StackPanel luôn căng để phù hợp với nó là trẻ em

Ngoài ra nhìn vào ghi chú này (tôi đã sao chép từ here)

Bảng điều chỉnh X Dimension Y Dimension

Canvas Không Không

Dock Có Có

StackPanel (Vertical) Có Không

StackPanel (Ngang) Không Có

Lưới Có * Có *

WrapPanel Không Không

• Ngoại trừ khi sử dụng các hàng và cột "Tự động"

Yes trong bảng trên có nghĩa là "Trẻ em được kéo dài đến kích thước có sẵn"

Không trong bảng trên có nghĩa là "Trẻ em là kích thước mong muốn của họ"