CODEWITHSUNDEEP
c#wpfxamlxamarinxamarin.forms
skt
skt

Reputation: 599

How to Add buttons or Label on existing Grid programmatically using Xamarin Form?

I am new to Xamarin Form. My requirement is that. I would like to add the button or like Custom Button or labels etc dynamically (Code behind) on demand bases on existing Grid (as code below) Xamarin.Form. But I do not know the way to add the items on existing Grid like. I have tried a lot to find any sample but no success.

My XAML Code as below..

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                      xmlns:Status="clr-namespace:SourceCode.Mobile.UI.StatusDetails"                
                     x:Class="SourceCode.Mobile.UI.ConsumableScreen">
    <ContentPage.Content>

        <Grid x:Name="MainGrid" Padding="0" Margin="0,0,0,0" RowSpacing="1" ColumnSpacing="1" BackgroundColor="White">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>

            <!--   These below button should be from code behind dynamically -->

            <Button  Grid.Row="0" Grid.Column="0" Text="Device A" WidthRequest="150" HeightRequest="50" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="White" Clicked="Button_1_Clicked"></Button>
            <Button  Grid.Row="0" Grid.Column="1" Text="Device B" WidthRequest="150" HeightRequest="50" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="White" Clicked="Button_2_Clicked"></Button>
            <Button  Grid.Row="0" Grid.Column="2" Text="Device C" WidthRequest="150" HeightRequest="50" HorizontalOptions="Center" VerticalOptions="Center" BackgroundColor="White" Clicked="Button_3_Clicked"></Button>
        </Grid>

    </ContentPage.Content>
</ContentPage>

Code behind 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

using Xamarin.Forms;
using Xamarin.Forms.Xaml;

namespace SourceCode.Mobile.UI
{
    [XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class ConsumableScreen : ContentPage
    {            

        public ConsumableScreen( )
        {
            InitializeComponent();  
        }   

    }
}

Can anybody can help me how to create the Button or any other control like Label, TextBox etc on existing cell of Grid from code behind.

Thanks in advance.

Susheel

Upvotes: 2

Views: 7645

Answers (3)

Sayo Komolafe
Sayo Komolafe

Reputation: 1008

You can also use this to add a label to your existing Grid

Label label = new Label();
label.Text = $"Hello World";

MainGrid.Children.Add(label);

Upvotes: 0

mm8
mm8

Reputation: 169400

Try this:

Button button = new Button();
button.Text = "Device B";
button.Clicked = Button_2_Clicked;
button.WidthRequest = 150.0;
button.HeightRequest = 50.0;
button.HorizontalOptions = Xamarin.Forms.LayoutOptions.Center;
button.VerticalOptions = Xamarin.Forms.LayoutOptions.Center;
button.Color = Xamarin.Forms.Color.White;
Grid.SetRow(button, 0);
Grid.SetColumn(button, 1);
MainGrid.Children.Add(button);

Upvotes: 5

Dan Banasiak
Dan Banasiak

Reputation: 106

Add this code in e.g. constructor of xaml.cs class

MainGrid.Children.Add(new Label()
        {
            Text = "My new label"
        },0,0);

0, 0 on the end is number of column and row in grid.

MainGrid is name of Grid, which you added in xaml file

More information is in documentation: https://learn.microsoft.com/en-au/xamarin/xamarin-forms/creating-mobile-apps-xamarin-forms/summaries/chapter17

Upvotes: 3

Related Questions