Wie Raster-Layout dynamisch für XAML

Question

In meiner App erstelle ich ein Raster-Layout dynamisch zu erstellen versuchen aber nicht erwartete Ausgabe bekommen:

Unten ist der Code, den ich versuchte:

 Grid LayoutGrid = new Grid(); 


     //Created Two Columns 
     ColumnDefinition gridCol1 = new ColumnDefinition(); 
     ColumnDefinition gridCol2 = new ColumnDefinition(); 

     LayoutGrid.ColumnDefinitions.Add(gridCol1); 
     LayoutGrid.ColumnDefinitions.Add(gridCol2); 

     Grid Col1Grid = new Grid(); 
     //Create Two Rows 
     RowDefinition gridRow1 = new RowDefinition(); 
     RowDefinition gridRow2 = new RowDefinition(); 

     Col1Grid.RowDefinitions.Add(gridRow1); 
     Col1Grid.RowDefinitions.Add(gridRow2); 

     Grid.SetColumn(Col1Grid, 1); 

     return LayoutGrid; 

Das Layout ich versuche, wie diese zu erstellen ist:

Answer 1

ich einige Farben hinzugefügt leichter zu verstehen

private Grid CreateGrid() 
    { 
     var LayoutGrid = new Grid { Background = new SolidColorBrush(Colors.Yellow) }; 

     //Created Two Columns 
     LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition()); 
     LayoutGrid.ColumnDefinitions.Add(new ColumnDefinition()); 

     //Created Two Rows 
     LayoutGrid.RowDefinitions.Add(new RowDefinition()); 
     LayoutGrid.RowDefinitions.Add(new RowDefinition()); 

     // region 1 - vertical left 
     var stack1 = new StackPanel { 
      Background = new SolidColorBrush(Colors.Red) 
     }; 
     Grid.SetColumn(stack1, 0); 
     Grid.SetRowSpan(stack1, 2); 
     LayoutGrid.Children.Add(stack1); 

     // region 2 - top right 
     var stack2 = new StackPanel 
     { 
      Background = new SolidColorBrush(Colors.Green) 
     }; 
     Grid.SetColumn(stack2, 1); 
     LayoutGrid.Children.Add(stack2); 

     // region 3 - bottom right 
     var stack3 = new StackPanel 
     { 
      Background = new SolidColorBrush(Colors.Blue) 
     }; 
     Grid.SetColumn(stack3, 1); 
     Grid.SetRow(stack3, 1); 
     LayoutGrid.Children.Add(stack3); 

     return LayoutGrid; 
    } 

XAML:

<Grid> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition/> 
     <ColumnDefinition/> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition/> 
     <RowDefinition/> 
    </Grid.RowDefinitions> 
    <StackPanel Background="Red" Grid.RowSpan="2"></StackPanel> 
    <StackPanel Background="Blue" Grid.Column="1"></StackPanel> 
    <StackPanel Background="Green" Grid.Column="1" Grid.Row="1"></StackPanel> 
</Grid>