WPF: ListView bên trong Scrollviewer; Câu hỏi bố cục

Question

tôi có câu hỏi về cách bố trí với một listview bên trong một trình xem ảnh. Khi listview nằm bên trong một scrollviewer nó sử dụng kích thước tối đa của nó và không di chuyển chính nó gây ra scrollviewer cung cấp không giới hạn số lượng không gian cho các điều khiển bên trong của nó. Vấn đề là, các điều khiển dưới một danh sách dài chỉ hiển thị nếu người dùng cuộn xuống và tôi muốn làm cho listview chỉ sử dụng không gian cần thiết và sử dụng thanh cuộn. Hình ảnh làm cho biết thêm thông tin hơn từ (liên kết cho hình ảnh cũng làm cho nhiều như danh tiếng của tôi không phải là 10 chưa. Edit2: tôi cũng có thể sử dụng chỉ một liên kết vì vậy tôi sao chép tất cả hình ảnh vào một). không Nếu bảng kê được lâu mọi thứ đều ổn:

Hình 1:

Bây giờ nếu danh sách dài các điều khiển bên dưới di chuyển xuống đất vô hình:

Ảnh 2: xem liên kết từ hình ảnh 1

Những gì tôi muốn xảy ra bây giờ là thế này:

hình 3: xem liên kết từ hình ảnh 1

Điều đó không thực sự là một vấn đề khiến chúng ta có thể đặt mọi thứ vào một dockpanal và làm dock các điều khiển dưới đây để Dock.Below và Top to Top và để listview điền vào trung tâm với "lastchildfill". Bây giờ cho vấn đề thực sự. Điều gì sẽ xảy ra nếu cửa sổ nhỏ hơn? Sau đó, lúc đầu listview biến mất và sau đó cũng tất cả mọi thứ khác mà không có một thanh cuộn để di chuyển đến các điều khiển ở phía dưới.

Hình 4: xem liên kết từ hình ảnh 1

Các giải pháp lý tưởng tôi đang tìm kiếm là phải có thanh cuộn trên cửa sổ (hoặc một ScrollViewer root) mà sẽ cho phép chúng tôi di chuyển đến tất cả các phần của cửa sổ như thế này và chỉ có các thanh cuộn bên ngoài được hiển thị khi mọi thứ là kích thước tối thiểu.

Hình 5: xem liên kết từ hình ảnh 1

BẤT CỨ LÝ DO? quá nhiều hình ảnh? đây là một chút XAML cho mọi người cố gắng làm cho nó hoạt động (nó chỉ là một ví dụ nhanh cửa sổ ...)

<Window x:Class="WpfTest1.ScrollTestWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
Title="ScrollTestWindow" Height="400" Width="700"> 
    <ScrollViewer > 
     <DockPanel LastChildFill="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible"> 
      <Grid DockPanel.Dock="Top"> 
       <TextBlock Text="Example controls above listview" Background="LightGray" FontSize="30"></TextBlock> 
      </Grid> 
      <Grid DockPanel.Dock="Bottom"> 
       <TextBlock Text="Example controls below listview" Background="LightGray" FontSize="30"></TextBlock> 
      </Grid> 
      <ListView FontSize="30"> 
       <ListView.View> 
        <GridView> 
         <GridViewColumn Width="190" Header="Date" /> 
         <GridViewColumn Width="200" Header="Day Of Week" DisplayMemberBinding="{Binding DayOfWeek}" /> 
         <GridViewColumn Width="120" Header="Year" DisplayMemberBinding="{Binding Year}" /> 
        </GridView> 
       </ListView.View> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
       <sys:DateTime>1/1/1</sys:DateTime> 
      </ListView> 
     </DockPanel> 

    </ScrollViewer> 

Answer 1

Ok. Vì vậy, tôi đã có cùng một vấn đề, nhưng bây giờ đã quản lý để giải quyết nó!

Dự án của tôi trông hơi khác với dự án của bạn, nhưng tôi nghĩ rằng dự án đó sẽ phù hợp với bạn. Giải pháp mà tôi trình bày cũng có một số hạn chế đối với nó. Ví dụ: nó sẽ chỉ hoạt động nếu bạn chỉ thêm một ListView! Trong ví dụ của bạn, bạn chỉ có một, do đó sẽ không có vấn đề gì ở đó.Nhưng đối với bất kỳ ai có thể muốn thêm ListViews, bạn sẽ phải thêm nhiều chức năng hơn để quyết định kích thước của Chế độ xem và vị trí đặt chúng.

Bạn cũng sẽ phải có một thiết lập MinHeight cho Chế độ xem danh sách .

Giải pháp của tôi là tạo ra bạn lớp panel riêng mà kéo dài một StackPanel, ghi đè lên MeasureOverride và ArrangeOverride chức năng. Và thêm ListView vào Bảng điều chỉnh tạo

CustomPanel:

public class ScrollablePanel : StackPanel 
{ 
    protected override Size MeasureOverride(Size constraint) 
    { 
     Size tmpSize = base.MeasureOverride(constraint); 
     tmpSize.Height = (double)(this.Children[0] as UIElement).GetValue(MinHeightProperty); 
     return tmpSize; 
    } 

    protected override System.Windows.Size ArrangeOverride(System.Windows.Size finalSize) 
    { 
     Size tmpSize = new Size(0, 0); 

     //Width stays the same 
     tmpSize.Width = finalSize.Width; 

     //Height is changed 
     tmpSize.Height = finalSize.Height; 

     //This works only for one child! 
     this.Children[0].SetCurrentValue(HeightProperty, tmpSize.Height); 
     this.Children[0].Arrange(new Rect(new Point(0, 0), tmpSize)); 

     return tmpSize; 
    } 
} 

Các XAML

<Window x:Class="WpfTest1.ScrollTestWindow" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:sys="clr-namespace:System;assembly=mscorlib" 
xmlns:local="clr-namespace:WpfTest1" 
Title="ScrollTestWindow" Height="400" Width="700"> 
    <ScrollViewer > 
     <DockPanel LastChildFill="True" ScrollViewer.CanContentScroll="True" ScrollViewer.HorizontalScrollBarVisibility="Visible"> 
      <Grid DockPanel.Dock="Top"> 
       <TextBlock Text="Example controls above listview" Background="LightGray" FontSize="30"></TextBlock> 
      </Grid> 
      <Grid DockPanel.Dock="Bottom"> 
       <TextBlock Text="Example controls below listview" Background="LightGray" FontSize="30"></TextBlock> 
      </Grid> 
      <local:ScrollablePanel> 
       <ListView FontSize="30" MinHeight="80"> 
        <ListView.View> 
         <GridView> 
          <GridViewColumn Width="190" Header="Date" /> 
          <GridViewColumn Width="200" Header="Day Of Week" DisplayMemberBinding="{Binding DayOfWeek}" /> 
          <GridViewColumn Width="120" Header="Year" DisplayMemberBinding="{Binding Year}" /> 
         </GridView> 
        </ListView.View> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
        <sys:DateTime>1/1/1</sys:DateTime> 
       </ListView> 
      </local:ScrollablePanel> 
     </DockPanel> 

    </ScrollViewer> 
</Window> 

Đó là một thời gian dài trước câu hỏi này được hỏi, nhưng tôi hy vọng rằng câu trả lời này sẽ giúp ít nhất một ai đó!

Tôi cũng muốn cảm ơn @sisyphe cho tất cả sự giúp đỡ cần thiết để giải quyết vấn đề này :)

Answer 2

Không chắc chắn nếu điều này thực sự là giải pháp lý tưởng của bạn, nhưng tôi personnally làm điều này khá khác nhau:

Tôi sử dụng lưới đơn giản, có n hàng cho những gì phải ở trên hàng listvew, m cho nội dung bên dưới và hàng cho listview với height = *. Vì vậy, mọi thứ ở trên và bên dưới hiển thị, thanh cuộn xuất hiện trong chế độ xem danh sách khi không có đủ chỗ.

Tôi có một ví dụ làm việc về điều này, nhưng với một DataGrid. Nó sẽ khá giống với một ListView.