電網在XAML

Question

我想有childGrid在parentGrid的第二列內網格（我想在chilGrid有兩列：第一爲標籤，第二個用於textboxs）

我怎麼可以做這樣的事情？我嘗試下面的代碼：

<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

基於您的代碼，就搞掂了一點：

<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> 

注意ColumnDefinition沒有高度 - 他們有一個寬度。您還需要分別定義ColumnDefinitions和RowDefinitions - 將它們混合在外部網格中。我從外部網格中刪除了RowDefinitions，因爲您似乎沒有使用它們。你的內部網格有兩列和四行。

Answer 2

Phenevo，今年我已經廣泛地完成了XAML UI設計。試一試，您可以輕鬆地將代碼遷移到Window或UserControl。我對網格和麪板進行了顏色編碼，以便您可以實時確認其佈局 - 當您滿意時吹走背景參數。

<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

您可能會覺得這很有用。嘗試使用Kaxaml將其粘貼到頁面中，並使用外部Grid中對象的各種參數。我發現使用Kaxaml進行原型設計和實驗XAML佈局是必不可少的。

<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>