ScrollViewer Chiều cao để tự động cuộn khi nội dung tràn qua trang

Question

Ok, điều này nghe có vẻ ngớ ngẩn, nhưng tôi không thể tải ScrollViewer hoạt động bình thường. Những gì tôi cần làm là

1. Có sử dụng trang Silverlight 100% chiều rộng/chiều cao của trang HTML

2. Có một Height = 160px điều khiển trên phần trên cùng của trang Sliverlight, sau đó có phần còn lại (100% - 160px) là một ScrollViewer với nội dung thay đổi động.

như vậy trong trang HTML Tôi có:

<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%"> 

sau đó trong XAML:

<Grid x:Name="LayoutRoot" Height="Auto"> 
     <StackPanel Orientation="Vertical" Height="Auto">   
      <App:ASilverlightControl x:Name="Header" Height="160"/> 
      <ScrollViewer Name="svw" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" Height="Auto" > 
       <StackPanel Orientation="Vertical" x:Name="DynamicContentHere"> 
       </StackPanel>             
      </ScrollViewer> 
     </StackPanel>  
    </Grid> 

Bây giờ, không có vấn đề gì tôi cố gắng, ScrollViewer sẽ nhất luôn mở rộng/hợp đồng chứa tất cả các phần tử trong StackPanel, ngay cả khi điều đó có nghĩa là tràn theo màn hình nhưng không có thanh cuộn dọc.

Cách duy nhất tôi có thể làm việc này là đặt Chiều cao = 800 thành ScrollViewer.

Answer 1

Nếu bạn đặt một ScrollViewer bên trong một StackPanel nó sẽ không bao giờ hoạt động. StackPanel sẽ luôn cho phép tất cả không gian mà nội dung của ScrollViewer yêu cầu.

Bạn nên sử dụng một lưới với hai hàng thay vì:

<Grid x:Name="LayoutRoot" Height="Auto"> 
    <Grid.RowDefinitions> 
    <RowDefinition Height="160"/> 
    <RowDefinition Height="*"/> 
    </Grid.RowDefinitions> 
    <App:ASilverlightControl x:Name="Header" Grid.Row="0"/> 
    <ScrollViewer Name="svw" Grid.Row="1" 
    HorizontalScrollBarVisibility="Disabled" 
    VerticalScrollBarVisibility="Visible"> 
    <StackPanel Orientation="Vertical" x:Name="DynamicContentHere"> 
     ... 
    </StackPanel>             
    </ScrollViewer> 
</Grid> 

Các * trong RowDefinition thứ hai sẽ tự động thực ScrollViewer điền càng nhiều càng tốt nhưng vẫn giữ nó bên trong khu vực thị giác của bạn và do đó làm cho ScrollViewer của bạn công việc.