Silverlight Grid Splitter Hành vi bất ngờ

Question

Tôi chỉ mới bắt đầu sử dụng Silverlight bằng phiên bản 2.0. Tôi muốn hiển thị một vài lưới dữ liệu trên trang và nhận được điều này sẽ OK bằng cách thả từng ô vào ô lưới. Sau đó tôi nghĩ rằng tôi sẽ thử thêm một bộ chia lưới bằng cách sử dụng đánh dấu sau:

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" x:Class="SilverlightApplication1.Page" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Loaded="UserControl_Loaded"> 
    <Grid x:Name="LayoutRoot" Background="White"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition></ColumnDefinition> 
      <ColumnDefinition Width="Auto"></ColumnDefinition> 
      <ColumnDefinition></ColumnDefinition> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition></RowDefinition> 
      <RowDefinition></RowDefinition> 
     </Grid.RowDefinitions> 
     <basics:GridSplitter Grid.RowSpan="2" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left" Width="5" VerticalAlignment="Stretch" ></basics:GridSplitter> 
     <data:DataGrid Name="TLGrid" Grid.Row="0" Grid.Column="0"> 
     </data:DataGrid> 
     <data:DataGrid Name="TRGrid" Grid.Row="0" Grid.Column="2"> 
     </data:DataGrid> 
     <data:DataGrid Name="BLGrid" Grid.Row="1" Grid.Column="0"> 
     </data:DataGrid> 
     <data:DataGrid Name="BRGrid" Grid.Row="1" Grid.Column="2"> 
     </data:DataGrid> 
    </Grid> 
</UserControl> 

Tôi hy vọng có thể kéo bộ chia xung quanh để đổi kích thước hai cột còn lại. Khi tôi kéo thanh, cả hai cột khác đều co lại. Bất cứ ai có thể giải thích lý do tại sao?

Answer 1

Bạn không cần cột giữa cho bộ tạo lưới. Gridsplitter sẽ liên kết với cạnh phải của cột 0 nếu bạn đặt bộ tách trong cột 0. Bạn có thể thêm một lề nhỏ vào lưới ở phía bên trái để bạn không bị mất 5 pixel cuối cùng.

<Grid x:Name="LayoutRoot" Background="White"> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="1*"/> 
     <!--<ColumnDefinition Width="Auto"/>--> 
     <ColumnDefinition Width="1*"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="1*"/> 
     <RowDefinition Height="1*"/> 
    </Grid.RowDefinitions> 

    <data:DataGrid Name="TLGrid" Grid.Row="0" Grid.Column="0" /> 
    <data:DataGrid Name="BLGrid" Grid.Row="1" Grid.Column="0"/> 

    <!-- Moved the grid splitter to column 0 --> 
    <basics:GridSplitter Grid.RowSpan="2" Grid.Row="0" Grid.Column="0" Width="5" /> 

    <data:DataGrid Name="TRGrid" Grid.Row="0" Grid.Column="2" /> 
    <data:DataGrid Name="BRGrid" Grid.Row="1" Grid.Column="2" />   
</Grid> 

Answer 2

Lý do các tế bào thay đổi kích thước theo cách mà bạn đã có kinh nghiệm là xuống ColumnDefinition giá trị và HorizontalAlignment của GridSplitter. Vì bạn chưa chỉ định chiều cao, chiều rộng cột mặc định là Gắn dấu sao. Điều này có nghĩa là chúng có khoảng cách bằng nhau. GridSplitterHorizontalAlignment sau đó chỉ định hướng mà nó thay đổi kích thước. Nếu bạn căn giữa hoặc kéo dài nó, bạn sẽ có cả hai mặt thay đổi kích thước, nhưng nếu bạn căn chỉnh nó sang cạnh này hay cạnh kia, nó sẽ chỉ thay đổi kích cỡ cạnh đó, nhưng vì các ô chia sẻ không gian bằng nhau, cả hai mặt co lại thay vì chỉ một.

Mặc dù câu trả lời được chấp nhận cung cấp một cách tiếp cận thay thế để làm việc này, nó không thực sự giải thích tại sao vấn đề xảy ra. Nó là hoàn toàn chấp nhận được để đặt một splitter trong các tế bào riêng của nó - trên thực tế, nó thường được khuyến khích.