lưới bên trong Grid trong XAML

Question

Tôi muốn có childGrid trong cột thứ hai của parentGrid (trong chilGrid Tôi muốn có hai cột: đầu tiên cho nhãn, thứ hai cho textboxs)

Làm thế nào tôi có thể làm điều gì đó như thế? Tôi đã thử các mã sau:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Height="*"/> 
     <ColumnDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
     <RowDefinition Height="*"/> 
    </Grid.ColumnDefinitions> 
    <Grid Grid.Column=1> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Height="*"/> 
      <ColumnDefinition Height="*"/> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
    </Grid> 
</Grid> 

Answer 1

Dựa trên mã của bạn, chỉ cần cố định lên một chút:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid Grid.Column="1"> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
      <RowDefinition Height="*"/> 
     </Grid.RowDefinitions> 
    </Grid> 
</Grid> 

Lưu ý rằng ColumnDefinition không có một Chiều cao - họ có một Width. Bạn cũng cần phải định nghĩa riêng các ColumnDefinition và RowDefinitions - bạn có chúng trộn lẫn với nhau trong lưới ngoài của bạn. Tôi đã loại bỏ RowDefinitions khỏi lưới ngoài vì bạn dường như không sử dụng chúng. Lưới bên trong của bạn có hai cột và bốn hàng.

Answer 2

Phenevo, tôi đã thiết kế XAML UI rộng rãi trong năm nay. Hãy thử điều này, bạn có thể dễ dàng di chuyển mã đến một cửa sổ hoặc một UserControl. Tôi đã mã hóa màu lưới và bảng để bạn có thể xác nhận bố cục của họ trong thời gian thực - thổi đi các thông số nền khi bạn hài lòng.

<UserControl 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    x:Class="UatControlLibrary.sampleChilGrid" 
    x:Name="UserControl" 
    MinWidth="400" 
    MinHeight="300" 
    Width="auto" 
    Height="auto"> 
    <Grid 
     x:Name="LayoutRoot"> 
     <Grid 
      x:Name="parentGrid" 
      Width="auto" 
      Height="auto" 
      Background="Red"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition 
        Width="1*" /> 
       <ColumnDefinition 
        Width="1*" /> 
      </Grid.ColumnDefinitions> 
      <Grid 
       x:Name="chilGrid" 
       Width="auto" 
       Height="auto" 
       Background="Black" 
       Grid.Column="1" 
       Grid.Row="0"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition 
         Width="1*" /> 
        <ColumnDefinition 
         Width="1*" /> 
       </Grid.ColumnDefinitions> 
       <StackPanel 
        x:Name="stkpnlLabels" 
        Background="White" 
        Grid.Column="0" 
        Grid.Row="0" /> 
       <StackPanel 
        x:Name="stkpnlTextboxes" 
        Background="Blue" 
        Grid.Column="1" 
        Grid.Row="0" /> 
      </Grid> 
     </Grid> 
    </Grid> 
</UserControl> 

Answer 3

Bạn có thể thấy điều này hữu ích. Hãy thử dán nó vào một trang bằng cách sử dụng Kaxaml và chơi xung quanh với các thông số khác nhau của các đối tượng trong lưới ngoài. Tôi tìm thấy bằng cách sử dụng Kaxaml cho prototyping và thử nghiệm với bố trí XAML không thể thiếu.

<Grid> 
    <Grid.ColumnDefinitions> 
    <ColumnDefinition Width="Auto"/> 
    <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
    <RowDefinition/> 
    <RowDefinition/> 
    <RowDefinition/> 
    </Grid.RowDefinitions> 

    <!-- 
    When I'm composing grids in XAML, I group things together by type, not by where 
    they live in the grid. This turns out to make a lot of maintenance tasks 
    easier. 

    Also, since Grid.Row and Grid.Column default to 0, a lot of people (and tools) 
    omit them if that's their value. Not me. It lets me quickly check to make 
    sure that content is where I think it is, just by looking at how it's organized 
    in the XAML. 
    --> 

    <TextBlock Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Background="Lavender" Padding="10" HorizontalAlignment="Stretch">Here's the first row of the outer grid.</TextBlock> 
    <TextBlock Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2" Background="Lavender" Padding="10" HorizontalAlignment="Stretch">Here's the third row of the outer grid.</TextBlock> 

    <TextBlock Grid.Row="1" Grid.Column="0" Background="AliceBlue" Padding="10">Here's the first column of the second row.</TextBlock> 

    <Grid Grid.Row="1" Grid.Column="1"> 
    <Grid.ColumnDefinitions> 
     <!-- 
     This part's pretty important. Setting up the SharedSizeGroups for these 
     two columns keeps the labels and text boxes neatly arranged irrespective of 
     their length. 
     --> 
     <ColumnDefinition SharedSizeGroup="Label"/> 
     <ColumnDefinition SharedSizeGroup="TextBox"/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 

    <Label Grid.Row="0" Grid.Column="0">First label</Label> 
    <Label Grid.Row="1" Grid.Column="0">Second label</Label> 
    <Label Grid.Row="2" Grid.Column="0">Third label, containing unusually long content</Label> 

    <TextBox Grid.Row="0" Grid.Column="1">First text box, containing unusually long content</TextBox> 
    <TextBox Grid.Row="1" Grid.Column="1">Second text box</TextBox> 
    <TextBox Grid.Row="2" Grid.Column="1">Third text box</TextBox> 

    </Grid> 

</Grid>