We Keep Coding

Grid column to occupy entire screen

I'm doing a little project in Xamarin forms and I want the itens in the columns of my grid to space eachother so that they occupy the entire screen. I tried messing with the vertical layout options and it doesn't work (the best so far is using Fill/Fill and expand, but they simply stretch the hell out of the third row so it fills the gap). I'm using VStudio 2019 if that matters.
Also, if u can explain what u did instead of simply writing a code that works, I would be grateful.
public MainPage()
{
this.Padding = new Thickness(20);
var deviceWidht = DeviceDisplay.MainDisplayInfo.Width;
double buttonWidthandHeight = deviceWidht / 9;
int buttonCornerRadius = Convert.ToInt32(deviceWidht / 20);
Grid panel1 = new Grid();
panel1.HorizontalOptions = LayoutOptions.CenterAndExpand;
panel1.VerticalOptions = LayoutOptions.CenterAndExpand;
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
panel1.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
panel1.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
panel1.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
Button r1c1 = SetButton(1, 1);
Button r1c2 = SetButton(1, 2);
Button r1c3 = SetButton(1, 3);
Button r2c1 = SetButton(2, 1);
Button r2c2 = SetButton(2, 2);
Button r2c3 = SetButton(2, 3);
Button r3c1 = SetButton(3, 1);
Button r3c2 = SetButton(3, 2);
Button r3c3 = SetButton(3, 3);
Button SetButton (int row, int column)
{
Button createdButton = CreateButton(row, column);
Grid.SetRow(createdButton, row);
Grid.SetColumn(createdButton, column);
panel1.Children.Add(createdButton);
return createdButton;
}
Button CreateButton(int row, int column)
{
return new Button
{
Text = "Row " + row + " Column " + column,
WidthRequest = buttonWidthandHeight,
HeightRequest = buttonWidthandHeight,
CornerRadius = buttonCornerRadius
};
}
this.Content = panel1;
}

First,you could change the ColumnDefinitions and RowDefinitions like below:
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1,GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
The three ColumnDefinition objects both set the Width to 1, meaning that the width of the screen is divided equally beneath the three columns (the same goes for rows).
Second,when you add the button,you should start from the position 0 ,not 1.
Button r1c1 = SetButton(0, 0);
Button r1c2 = SetButton(0, 1);
Button r1c3 = SetButton(0, 2);
Button r2c1 = SetButton(1, 0);
Button r2c2 = SetButton(1, 1);
Button r2c3 = SetButton(1, 2);
Button r3c1 = SetButton(2, 0);
Button r3c2 = SetButton(2, 1);
Button r3c3 = SetButton(2, 2);
Finally the codes you could check :
this.Padding = new Thickness(20);
var deviceWidht = DeviceDisplay.MainDisplayInfo.Width;
double buttonWidthandHeight = deviceWidht / 9;
int buttonCornerRadius = Convert.ToInt32(deviceWidht / 20);
Grid panel1 = new Grid();
panel1.HorizontalOptions = LayoutOptions.FillAndExpand;
panel1.VerticalOptions = LayoutOptions.FillAndExpand;
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1,GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
panel1.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
Button r1c1 = SetButton(0, 0);
Button r1c2 = SetButton(0, 1);
Button r1c3 = SetButton(0, 2);
Button r2c1 = SetButton(1, 0);
Button r2c2 = SetButton(1, 1);
Button r2c3 = SetButton(1, 2);
Button r3c1 = SetButton(2, 0);
Button r3c2 = SetButton(2, 1);
Button r3c3 = SetButton(2, 2);
Button SetButton(int row, int column)
{
Button createdButton = CreateButton(row, column);
Grid.SetRow(createdButton, row);
Grid.SetColumn(createdButton, column);
panel1.Children.Add(createdButton);
return createdButton;
}
Button CreateButton(int row, int column)
{
return new Button
{
Text = "Row " + row + " Column " + column,
WidthRequest = buttonWidthandHeight,
HeightRequest = buttonWidthandHeight,
CornerRadius = buttonCornerRadius
};
}
this.Content = panel1;

Assigning multiple Children to Grid and visualizing them

I'm setting up an Xamarin.Forms app where i am trying to add a "Module", saving it in a list and then visualizing it on Android via grid cells.
The problem is within the visualization. The problem is that i am trying to add multiple children to the same grid cell, but they are overlaying with each other.
public void CreateModuleGrids()
{
foreach (Module item in _mm.ModulesList)
{
gOut.RowDefinitions.Add(new RowDefinition() { Height = new GridLength(100) });
gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
gOut.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(100) });
Label lblBez = new Label();
lblBez.Text = item.Name.ToString();
lblBez.VerticalOptions = LayoutOptions.Center;
lblBez.HorizontalOptions = LayoutOptions.Center;
lblBez.WidthRequest = 151;
lblBez.HeightRequest = 25;
Label lblStatus = new Label();
lblStatus.WidthRequest = 151;
lblStatus.HeightRequest = 25;
if (item.Type == "blind")
{
lblStatus.Text = "100 %";
lblStatus.VerticalOptions = LayoutOptions.Center;
lblStatus.HorizontalOptions = LayoutOptions.Center;
}
else
{
lblStatus.Text = "Closed";
lblStatus.VerticalOptions = LayoutOptions.Center;
lblStatus.HorizontalOptions = LayoutOptions.Center;
}
if (item.Type == "blind")
{
bmp100.WidthRequest = (119);
bmp100.HeightRequest = (117);
bmp100.Aspect = Aspect.AspectFit;
bmp100.VerticalOptions = LayoutOptions.Center;
bmp100.HorizontalOptions = LayoutOptions.Center;
gOut.Children.Add(bmp100, 0, 0);
}
else
{
bmpClosed.WidthRequest = (119);
bmpClosed.HeightRequest = (117);
gOut.Children.Add(bmpClosed, 0, 0);
}
if (item.Type == "blind")
{
ImageButton btnArrowUp = new ImageButton();
btnArrowUp.WidthRequest = 37;
btnArrowUp.HeightRequest = 50;
btnArrowUp.Source = "ArrowUp.png";
btnArrowUp.Aspect = Aspect.AspectFit;
btnArrowUp.VerticalOptions = LayoutOptions.Start;
btnArrowUp.HorizontalOptions = LayoutOptions.Start;
btnArrowUp.Clicked += new EventHandler(this.btnArrowUp_click);
ImageButton btnArrowDown = new ImageButton();
btnArrowDown.WidthRequest = 37;
btnArrowDown.HeightRequest = 50;
btnArrowDown.Source = "ArrowDown.png";
btnArrowDown.Aspect = Aspect.AspectFit;
btnArrowDown.VerticalOptions = LayoutOptions.End;
btnArrowDown.HorizontalOptions = LayoutOptions.End;
btnArrowDown.Clicked += new EventHandler(this.btnArrowDown_click);
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnArrowDown, 0, 0);
gOut.Children.Add(btnArrowUp, 0, 0);
}
else
{
ImageButton btnOut = new ImageButton();
btnOut.Measure(37, 50);
btnOut.Source = "ArrowLeft.png";
btnOut.Clicked += new EventHandler(this.btnTipOpen_click);
ImageButton btnIn = new ImageButton();
btnIn.Measure(37, 50);
btnIn.Source = "ArrowRight.png";
btnIn.Clicked += new EventHandler(this.btnTipClose_click);
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);
}
}
My expectation is having a grid instance that contains a label with the name of the module on the upper part, an imagebutton on the left side, an imagebutton on the right side, an image in the center and last a label under the image that shows the status. Thanks in advance!

The problem is that i am trying to add multiple children to the same
grid cell, but they are overlaying with each other.
The items are overlaying with each other because you add them to the same position in Grid.
To place views in a Grid you'll need to add them as children to the grid, then specify which row and column they belong in.
The last two parameter in function grid.Children.Add specify the position of the item in Grid. For example, there is a Grid with two rows and two Columns, then (0,0) means top left, and (1,1) means bottom right.
// left, top
grid.Children.Add(topLeft, 0, 0);
grid.Children.Add(topRight, 1, 0);
grid.Children.Add(bottomLeft, 0, 1);
grid.Children.Add(bottomRight, 1, 1);
Back to your code, you add all your elements to (0,0), so they will appear in the same position.
gOut.Children.Add(lblBez, 0, 0);
gOut.Children.Add(lblStatus, 0, 0);
gOut.Children.Add(btnIn, 0, 0);
gOut.Children.Add(btnOut, 0, 0);
Another problem in your code is you need a Layout container(Like stacklayout or other layouts) as Jason said to manage your elements. Because you create them in a foreach loop, and in each loop you add the same thing with same position to the gOut.
I think the RIGHT way is create a Grid with your labels and imageButtons with right position in each loop.Then add this Grid to a Layout container(This layout container is use to layout the Grid created in each loop). At last, set this layout container as ContentPage's content, Content = layout container to display your elements.
Have a look at this document may help you and there is also a sample there.

Pass Parameters to Tap Gesture Xamarin Forms

I am trying to pass parameters from a page to another page. These passed parameters will be used to select from an SQL table.
The page is built as follows: (The code behind)
private MainRoutePageViewModel mainroutepageviewmodel;
private List<RouteInfo> routeinfo;
Constructor:
public MainRoutePageViewDetail(MessagDatabase database)
{
InitializeComponent();
BindingContext = mainroutepageviewmodel = new MainRoutePageViewModel(database,Navigation);
//_listOfProperties = mainroutepageviewmodel.GetLabelInfo();
ScrollView scrollview = new ScrollView();
StackLayout mainstack = new StackLayout();
mainstack.Spacing = 0;
mainstack.Padding = 0;
//mainstack.HeightRequest = 2000;
routeinfo = mainroutepageviewmodel.GetLabelInfo();
string _routePlacer = "";
foreach (var i in routeinfo)
{
mainstack.Children.Add(NewRouteName(i.RouteName));
mainstack.Children.Add(BuildNewRoute(i.RouteStops,i));
_routePlacer = i.RouteName;
}
scrollview.Content = mainstack;
Content = scrollview;
}// end of constructor
The BuildNewRoute method:
public StackLayout BuildNewRoute(List<string> location, RouteInfo routeinfo)
{
StackLayout stackLayout = new StackLayout();
//stackLayout.HeightRequest = 1000;
foreach (var i in location) {
StackLayout stackLayout2 = new StackLayout();
stackLayout2.HeightRequest = 200;
Grid grid = new Grid();
grid.ColumnSpacing = 0;
grid.RowSpacing = 0;
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(15, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(20, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(55, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(18, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(18, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(18, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(40, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(30, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(10, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(15, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(5, GridUnitType.Star) });
TapGestureRecognizer ArrowtapGesture = new TapGestureRecognizer();
ArrowtapGesture.Tapped += ArrowtapGesture_Tapped;
// Arrow icon
Image arrowimage = new Image();
arrowimage.Source = "Resources/arrow.png";
arrowimage.VerticalOptions = LayoutOptions.Center;
arrowimage.HorizontalOptions = LayoutOptions.Center;
arrowimage.GestureRecognizers.Add(ArrowtapGesture);
grid.Children.Add(arrowimage,7,6);
// total weight labels
Label weightlabel = new Label();
weightlabel.Text = "Total Weight [kg]: ";
grid.Children.Add(weightlabel,1,5,3,4);
// total items labels
Label itemsLabel = new Label();
itemsLabel.Text = "Total Items: ";
grid.Children.Add(itemsLabel, 1, 5, 4, 5);
// underline labels
Label firstunderline = new Label();
Label secondunderline = new Label();
firstunderline.BackgroundColor = Color.Black;
secondunderline.BackgroundColor = Color.Black;
grid.Children.Add(firstunderline,0,9,0,1);
grid.Children.Add(secondunderline,0,9,2,3);
// address label
Label labelLocation = new Label();
labelLocation.Text = i;
grid.Children.Add(labelLocation, 0, 3);
//sequence label
Label sequencelable = new Label();
sequencelable.Text = "Sequence: ";
sequencelable.VerticalTextAlignment = TextAlignment.Center;
grid.Children.Add(sequencelable, 0, 1);
// slot label
Label slotlabel = new Label();
slotlabel.Text = "ETA/Slot: ";
slotlabel.VerticalTextAlignment = TextAlignment.Center;
grid.Children.Add(slotlabel,1,4,1,2);
// time label
Label timelabel = new Label();
timelabel.Text = "Time: ";
timelabel.VerticalTextAlignment = TextAlignment.Center;
grid.Children.Add(timelabel, 4, 5,1,2);
// Status label
Label statuslabel = new Label();
statuslabel.Text = "Status: ";
statuslabel.VerticalTextAlignment = TextAlignment.Center;
grid.Children.Add(statuslabel, 5, 6,1,2);
//start button
Button startbutton = new Button();
startbutton.Text = "Pending";
startbutton.BackgroundColor = Color.Gray;
grid.Children.Add(startbutton,5,8,4,6);
// Phone book image
Image bookImage = new Image();
//bookImage.BackgroundColor = Color.White;
bookImage.Source = "Resources/phoneWithBook.png";
bookImage.VerticalOptions = LayoutOptions.Center;
bookImage.HorizontalOptions = LayoutOptions.Center;
grid.Children.Add(bookImage,1,2,6,7);
//Globe image
Image GlobeImage = new Image();
// GlobeImage.BackgroundColor = Color.White;
GlobeImage.Source = "Resources/globe.png";
GlobeImage.VerticalOptions = LayoutOptions.Center;
GlobeImage.HorizontalOptions = LayoutOptions.Center;
grid.Children.Add(GlobeImage, 2, 3, 6, 7);
stackLayout2.Children.Add(grid);
stackLayout.Children.Add(stackLayout2);
}
return stackLayout;
}
As you can probably see it loops through a list of collected data and adds grids and labels to a main StackLayout.
This is not the issue the page building works fine.
What you can see is the arrow icon image that has a tap gesture attached to it. This tap gesture uses the view model to open the next page.
The tap gesture:
private async void ArrowtapGesture_Tapped(object sender, EventArgs e)
{
await mainroutepageviewmodel.OpenStopDetail();
}
And the OpenStopDetail method:
public async Task OpenStopDetail()
{
await Navigation.PushAsync(new StopDetailPageView());
}
I want to know how to pass parameters from the tap event through to the StopDetailView page.
Specifically the text from the sequence label.
Some things I have tried, have been using the casting in the tap event but this seems to be bound to the item that is selected. In other words its giving me access to image properties. Which is no good for my situation.
I cant seem to find a way to access each label property individually to pass as a parameter. Sorry if this isn't clear, it was tough to explain. Let me know if more detail is needed.

You should be able to use the CommandParameter of the TapGestureRecognizer.
In XAML:-
<TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"
CommandParameter="Value"/>
e.Parameter will be whatever you set in the CommandParameter.
private async void TapGestureRecognizer_Tapped(object sender, TappedEventArgs e)
Edit:
It has been pointed out that the above is not the right signature, the param, needs to be EventArgs and cast to TappedEventArgs.
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
var param = ((TappedEventArgs)e).Parameter;
}

The sender of the Tapped event will be the control the gesture recognizer is attached to - in your case, an Image. So you can add your data to one of the Image's properties in order to access it from your event handler.
// assign parameter to ClassId (must be a string)
arrowimage.ClassId = "blah";
arrowimage.GestureRecognizers.Add(ArrowtapGesture);
private async void ArrowtapGesture_Tapped(object sender, EventArgs e)
{
// retrieve parameter from sender's ClassId
var parm = ((Image)sender).ClassId;
await mainroutepageviewmodel.OpenStopDetail();
}

<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Share_Tapped" CommandParameter="{Binding .}"/>
</Image.GestureRecognizers>
enter code here
private void Share_Tapped(object sender, TappedEventArgs e)
{
var contact = (e.Parameter) as DetailList;
}
Result

Windows App can't use Grid MemberFunction

Ihave some Problems to attach Textblocks in my Grid.
I cant use SetRow(Frameworkelement,index);
The ErrorMessage is something like that I cant access the MemberFunction with an instance reference.
Instead i should use a TypeName, but how?
private FrameworkElement CreateGrid(int i)
{
double w = 775;
double l = 1105;
TextBlock header = CreateHeader("someRndStuffHeader");
RowDefinition headerRowDefinition = new RowDefinition
{
MinHeight = header.ActualHeight,
MaxHeight = header.ActualHeight,
};
TextBlock footer = CreateFooter("someRndStuffFooter");
RowDefinition footerRowDefinition = new RowDefinition
{
MinHeight = footer.ActualHeight,
MaxHeight = footer.ActualHeight
};
double contentHeight = l- header.ActualHeight - footer.ActualHeight;
RowDefinition contentRowDefinition = new RowDefinition
{
MinHeight = contentHeight,
MaxHeight = contentHeight,
};
ColumnDefinition gridColumnDefinition = new ColumnDefinition()
{
MaxWidth = w,
MinWidth = w,
};
Grid page = new Grid();
string name = "printPage" + i.ToString();
page.Name = name;
page.RowDefinitions.Add(headerRowDefinition);
page.RowDefinitions.Add(contentRowDefinition);
page.RowDefinitions.Add(footerRowDefinition);
page.ColumnDefinitions.Add(gridColumnDefinition);
// I CANT USE THIS
page.SetRow(header, 1);
return page;
}

SetRow(FrameworkElement framework,int value) is a static method. Instance members cannot use it.
Use like this :-
Grid.SetRow(header,1);
However, before you can achieve that, you have to make header and footer TextBlocks children of the newly formed grid because SetRow method sets the row of framework element only when it is a child of any grid.
So you will have to add these two statements :-
page.Children.Add(header);
page.Children.Add(footer);
Further, here the new grid i.e page, it has to be also assigned a parent grid. When you create a new AppPage (BlankPage.xaml) then by default a parent grid is already rendered by the system. Name this parent grid as say x:Name="Layout" and then add grid 'page' to this 'Layout' grid. I am giving here full code, both xaml and .cs. I have created a button and then when i press the button, new grid is created
In XAMl :-
<Grid x:Name="layout" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Button" HorizontalAlignment="Left" Margin="587,475,0,0" VerticalAlignment="Top" Click="Button_Click"/>
</Grid>
In .cs :-
private FrameworkElement CreateGrid(int i)
{
double w = 775;
double l = 1105;
TextBlock header = CreateHeader("someRndStuffHeader");
RowDefinition headerRowDefinition = new RowDefinition
{
MinHeight = header.ActualHeight,
MaxHeight = header.ActualHeight,
};
TextBlock footer = CreateFooter("someRndStuffFooter");
RowDefinition footerRowDefinition = new RowDefinition
{
MinHeight = footer.ActualHeight,
MaxHeight = footer.ActualHeight
};
double contentHeight = l - header.ActualHeight - footer.ActualHeight;
RowDefinition contentRowDefinition = new RowDefinition
{
MinHeight = contentHeight,
MaxHeight = contentHeight,
};
ColumnDefinition gridColumnDefinition = new ColumnDefinition()
{
MaxWidth = w,
MinWidth = w,
};
Grid page = new Grid();
string name = "printPage" + i.ToString();
page.Name = name;
page.RowDefinitions.Add(headerRowDefinition);
page.RowDefinitions.Add(contentRowDefinition);
page.RowDefinitions.Add(footerRowDefinition);
page.ColumnDefinitions.Add(gridColumnDefinition);
**Grid.SetRow(header, 1);
page.Children.Add(header);
page.Children.Add(footer);**
return page;
}
private TextBlock CreateFooter(string p)
{
return new TextBlock() { Width=300,Height=300,Text=p};
}
private TextBlock CreateHeader(string p)
{
return new TextBlock() { Width = 300, Height = 300, Text = p };
}
private void Button_Click(object sender, RoutedEventArgs e)
{
layout.Children.Add(CreateGrid(1));
}

Grid layout in SilverLight

I want a grid layout for displaying search results. The grids should have headlines Beneficial Owner, Commercial Operator and Registered Owner. The results should then be displayed under the right headline.
I am trying to achieve this layout:
But this is what i get:
My C#/SilverLight code:
// Create a 3 column grid
StackPanel deptStackPanel = new StackPanel();
deptStackPanel.Margin = new Thickness(10);
stackPanelSearchResults.Children.Add(deptStackPanel);
Grid.SetColumn(deptStackPanel, 3);
Grid.SetRow(deptStackPanel, 3);
// Add headlines for theese columns
TextBlock deptListHeadingBeneficialOwner = new TextBlock();
deptListHeadingBeneficialOwner.Text = "Beneficial Owner";
TextBlock deptListHeadingCommercialOperator = new TextBlock();
deptListHeadingCommercialOperator.Text = "Commercial Operator";
TextBlock deptListHeadingRegisteredOwnerName = new TextBlock();
deptListHeadingRegisteredOwnerName.Text = "Registered Owner";
deptStackPanel.Children.Add(deptListHeadingBeneficialOwner);
deptStackPanel.Children.Add(deptListHeadingCommercialOperator);
deptStackPanel.Children.Add(deptListHeadingRegisteredOwnerName);
Grid.SetColumn(deptListHeadingBeneficialOwner, 0);
Grid.SetColumn(deptListHeadingCommercialOperator, 1);
Grid.SetColumn(deptListHeadingRegisteredOwnerName, 2);

Add three grids inside the layout grid from your xaml file or from the back end. Put a stack panel inside that and then add the text blocks for your data. You are just adding text blocks one below the other.

I found the solution my self:
// Create the Grid
Grid myGrid = new Grid();
myGrid.Width = 400;
myGrid.Margin = new Thickness(9, 0, 0, 0);
myGrid.HorizontalAlignment = HorizontalAlignment.Left;
myGrid.VerticalAlignment = VerticalAlignment.Top;
myGrid.ShowGridLines = true;
// Define the Columns
ColumnDefinition colDef1 = new ColumnDefinition();
ColumnDefinition colDef2 = new ColumnDefinition();
ColumnDefinition colDef3 = new ColumnDefinition();
myGrid.ColumnDefinitions.Add(colDef1);
myGrid.ColumnDefinitions.Add(colDef2);
myGrid.ColumnDefinitions.Add(colDef3);
// Define the Rows
RowDefinition rowDef1 = new RowDefinition();
RowDefinition rowDef2 = new RowDefinition();
RowDefinition rowDef3 = new RowDefinition();
RowDefinition rowDef4 = new RowDefinition();
myGrid.RowDefinitions.Add(rowDef1);
myGrid.RowDefinitions.Add(rowDef2);
myGrid.RowDefinitions.Add(rowDef3);
myGrid.RowDefinitions.Add(rowDef4);
// Add the second text cell to the Grid
TextBlock txtBeneficialOwner = new TextBlock();
txtBeneficialOwner.Text = "Beneficial Owner";
txtBeneficialOwner.FontWeight = FontWeights.Bold;
Grid.SetRow(txtBeneficialOwner, 0);
Grid.SetColumn(txtBeneficialOwner, 0);
// Add the third text cell to the Grid
TextBlock txtCommercialOperator = new TextBlock();
txtCommercialOperator.Text = "Commercial Operator";
txtCommercialOperator.FontWeight = FontWeights.Bold;
txtCommercialOperator.Margin = new Thickness(9, 0, 0, 4);
Grid.SetRow(txtCommercialOperator, 0);
Grid.SetColumn(txtCommercialOperator, 1);
// Add the fourth text cell to the Grid
TextBlock txtRegisteredOwnerName = new TextBlock();
txtRegisteredOwnerName.Text = "Registered Owner";
txtRegisteredOwnerName.FontWeight = FontWeights.Bold;
txtRegisteredOwnerName.Margin = new Thickness(9, 0, 0, 4);
Grid.SetRow(txtRegisteredOwnerName, 0);
Grid.SetColumn(txtRegisteredOwnerName, 2);
// Add the TextBlock elements to the Grid Children collection
myGrid.Children.Add(txtBeneficialOwner);
myGrid.Children.Add(txtCommercialOperator);
myGrid.Children.Add(txtRegisteredOwnerName);
stackPanelSearchResults.Children.Add(myGrid);