WPF listview/gridsplitter/scrollviewer thay đổi kích thước vấn đề

Question

Tôi gặp sự cố với trình tạo hình ảnh đẩy chế độ xem danh sách của tôi ra khỏi chế độ xem trong kết hợp này. Các bước để tạo:

• chương trình bắt đầu, kéo kích thước cửa sổ lớn
• Kéo splitter đỏ tất cả các cách còn lại để hạn chế tối đa các cột màu xanh
• Mở rộng cả hai cột ListView cho đến khi họ nằm ngoài khung nhìn và ngang cuộn xuất hiện
• Kéo kích thước cửa sổ nhỏ hơn một lần nữa

Đối với tôi, điều này từ từ đẩy ListView bên ngoài cửa sổ. Lưu ý ScrollViewer thực sự đang giảm kích thước với Window, nhưng không phải ở cùng tốc độ và từ từ đi ra khỏi tầm nhìn. Khi trình thu phóng bắt đầu trượt khỏi chế độ xem, trình tách không thể được sử dụng nữa!

Rất kỳ lạ, nếu tôi không giảm thiểu bảng điều khiển bên trái trước, tôi không nhận được hành vi này!

Điều gì sẽ khắc phục vấn đề này?

<Window x:Class="LayoutTest3.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="600" Width="800" MinHeight="600" MinWidth="800" > 
    <Window.Resources> 
     <XmlDataProvider XPath="/Celebrities/Celebrity" x:Key="celebs"> 
      <x:XData> 
       <Celebrities xmlns=""> 
        <Celebrity Name="Jimmy"> 
         <LastName>Page</LastName> 
        </Celebrity> 
        <Celebrity Name="Johnny"> 
         <LastName>Depp</LastName> 
        </Celebrity> 
        <Celebrity Name="Britney"> 
         <LastName>Spears</LastName> 
        </Celebrity> 
       </Celebrities> 
      </x:XData> 
     </XmlDataProvider> 

     <DataTemplate x:Key="NameTemplate"> 
      <TextBlock Text="{Binding XPath=@Name}" /> 
     </DataTemplate> 
    </Window.Resources> 

    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="*" MinWidth="100" /> 
      <ColumnDefinition Width="Auto" /> 
      <ColumnDefinition Width="*" MinWidth="400" /> 
     </Grid.ColumnDefinitions> 
     <Border Grid.Column="0" Background="Blue" /> 
     <GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Center" ResizeBehavior="PreviousAndNext" VerticalAlignment="Stretch" Background="Red" /> 
     <Border Grid.Column="2" Background="Green"> 
      <ListView ItemsSource="{Binding Source={StaticResource celebs}}"> 
       <ListView.View> 
        <GridView> 
         <GridView.Columns> 
          <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}" Width="150" /> 
          <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding XPath=LastName}" /> 
         </GridView.Columns> 
        </GridView> 
       </ListView.View> 
      </ListView> 
     </Border> 
    </Grid> 
</Window> 

Answer 1

Có sự cố đã biết với GridSplitter và cột với MinWidth, GridSplitter vẫn được đổi kích thước lưới bỏ qua cột MinWidth. Kết quả của việc đó là con của cột đang phát triển có kích thước lớn hơn. Nhưng Grid bố trí trẻ em xem xét MinWidth và do đó cột Shrinking của bạn vẫn ở MinWidth nhưng Growing Column của đứa trẻ đi ra khỏi xem kích thước mà GridSplitter đã vượt xa MinWidth cột thu hẹp.

Tôi sẽ tìm hiểu cách tôi giải quyết vấn đề này trong dự án của mình và tôi sẽ đăng mã. Trong khi đó, bạn có thể thử các tùy chọn sau.

1. Di MinWidth từ ColumnDefinition
2. Thêm MinWidth để Child

Biết trước rằng Kích thước tối thiểu của Lưới của bạn nên được 500 + Kích thước của Splitter, bạn có thể đặt MinWidth của toàn bộ Grid.

Answer 2

Đây là cách tôi đã làm nó:

<Grid Name="container" SizeChanged="container_SizeChanged"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition Name="rightPanel" Width="*" MinWidth="100"/> 
    </Grid.ColumnDefinitions> 
    <TextBlock Grid.Column="0" Background="Red" Foreground="White">Test</TextBlock> 
    <GridSplitter Grid.Column="0" VerticalAlignment="Stretch" HorizontalAlignment="Right" Width="2" Height="Auto" ResizeDirection="Columns"/> 
    <Border Grid.Column="1" Background="Green" Margin="0 0 0 0"> 
     <ListView ItemsSource="{Binding Source={StaticResource celebs}}"> 
      <ListView.View> 
       <GridView> 
        <GridView.Columns> 
         <GridViewColumn Header="Name" CellTemplate="{StaticResource NameTemplate}" Width="150" /> 
         <GridViewColumn Header="LastName" DisplayMemberBinding="{Binding XPath=LastName}" /> 
        </GridView.Columns> 
       </GridView> 
      </ListView.View> 
     </ListView> 
    </Border> 
</Grid> 

và mã đằng sau (yuck!):

private void container_SizeChanged(object sender, SizeChangedEventArgs e) 
{ 
    rightPanel.MaxWidth = container.ActualWidth - 150; 
} 

Về cơ bản bạn đưa ra chiều rộng tối thiểu và thực hiện một tính toán tương tự để thiết lập MaxWidth mặt khác bảng điều khiển.

Answer 3

Có thể điều này có thể hữu ích, bạn luôn phải sử dụng cùng một loại đơn vị cho chiều rộng/chiều cao hoặc bộ chia sẽ không hoạt động chính xác.

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="1*" MinWidth="150"/> 
     <ColumnDefinition Width="4*" MinWidth="150"/> 
    </Grid.ColumnDefinitions> 

    <ListView Grid.Column="0" BorderBrush="#FF005BFF" Margin="0,0,5,0"> 
     <ListView.View> 
      <GridView> 
       <GridViewColumn /> 
      </GridView> 
     </ListView.View> 
    </ListView> 

    <GridSplitter Grid.Column="1" 
        HorizontalAlignment="Left" VerticalAlignment="Stretch" 
        Background="Black" 
        ShowsPreview="true" 
        Width="2" /> 

    <ListView Grid.Column="1" BorderBrush="#FFFF5100" Margin="5,0,0,0"> 
     <ListView.View> 
      <GridView> 
       <GridViewColumn /> 
      </GridView> 
     </ListView.View> 
    </ListView> 
</Grid>