Can't change label text in Xamarin forms code behind - xamarin

Question

I'm a beginner of Xamarin Forms. I add label and button control with C# code. I hope click button and it can change label text at the same time on app. But it can't now.
Part of my code as below.
Label lblPanel = new Label ();
public MainPage()
{
InitializeComponent();
Grid grid = new Grid()
{
RowSpacing = 10,
ColumnSpacing = 10
};
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(1, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { });
grid.ColumnDefinitions.Add(new ColumnDefinition { });
grid.ColumnDefinitions.Add(new ColumnDefinition { });
grid.ColumnDefinitions.Add(new ColumnDefinition { });
Label lblPanel = new Label { Text = "0", FontSize = 50, HorizontalOptions = LayoutOptions.End, VerticalOptions = LayoutOptions.End };
grid.Children.Add(lblPanel, 0, 0);
Grid.SetColumnSpan(lblPanel, 4);
Grid.SetRow(lblPanel, 0);
var btn01 = new Button { Text = "1", BackgroundColor = Color.CadetBlue };
btn01.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn01, 0, 0);
Grid.SetRow(btn01, 4);
Grid.SetColumn(btn01, 2);
var btn02 = new Button { Text = "2", BackgroundColor = Color.CadetBlue };
btn02.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn02, 0, 0);
Grid.SetRow(btn02, 4);
Grid.SetColumn(btn02, 1);
var btn03 = new Button { Text = "3", BackgroundColor = Color.CadetBlue };
btn03.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn03, 0, 0);
Grid.SetRow(btn03, 4);
Grid.SetColumn(btn03, 0);
var btn04 = new Button { Text = "4", BackgroundColor = Color.CadetBlue };
btn04.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn04, 0, 0);
Grid.SetRow(btn04, 3);
Grid.SetColumn(btn04, 2);
var btn05 = new Button { Text = "5", BackgroundColor = Color.CadetBlue };
btn05.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn05, 0, 0);
Grid.SetRow(btn05, 3);
Grid.SetColumn(btn05, 1);
var btn06 = new Button { Text = "6", BackgroundColor = Color.CadetBlue };
btn06.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn06, 0, 0);
Grid.SetRow(btn06, 3);
Grid.SetColumn(btn06, 0);
var btn07 = new Button { Text = "7", BackgroundColor = Color.CadetBlue };
btn07.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn07, 0, 0);
Grid.SetRow(btn07, 2);
Grid.SetColumn(btn07, 2);
var btn08 = new Button { Text = "8", BackgroundColor = Color.CadetBlue };
btn08.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn08, 0, 0);
Grid.SetRow(btn08, 2);
Grid.SetColumn(btn08, 1);
var btn09 = new Button { Text = "9", BackgroundColor = Color.CadetBlue };
btn09.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn09, 0, 0);
Grid.SetRow(btn09, 2);
Grid.SetColumn(btn09, 0);
var btn0 = new Button { Text = "0", BackgroundColor = Color.CadetBlue };
btn0.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btn0, 0, 0);
Grid.SetColumnSpan(btn0, 3);
Grid.SetRow(btn0, 5);
var btnClear = new Button { Text = "C", BackgroundColor = Color.CadetBlue };
btnClear.Clicked += (object sender, EventArgs e) =>
{
Clear_Click(sender, e);
};
grid.Children.Add(btnClear, 0, 0);
Grid.SetRowSpan(btnClear, 2);
Grid.SetRow(btnClear, 3);
Grid.SetColumn(btnClear, 3);
var btnEqual = new Button { Text = "=", BackgroundColor = Color.CadetBlue };
btnEqual.Clicked += (object sender, EventArgs e) =>
{
Caculate_Click(sender, e);
};
grid.Children.Add(btnEqual, 0, 0);
Grid.SetRow(btnEqual, 2);
Grid.SetColumn(btnEqual, 3);
var btnDivision = new Button { Text = "/", BackgroundColor = Color.CadetBlue };
btnDivision.Clicked += (object sender, EventArgs e) =>
{
Caculate_Click(sender, e);
};
grid.Children.Add(btnDivision, 0, 0);
Grid.SetRow(btnDivision, 1);
Grid.SetColumn(btnDivision, 0);
var btnTimes = new Button { Text = "*", BackgroundColor = Color.CadetBlue };
btnTimes.Clicked += (object sender, EventArgs e) =>
{
Caculate_Click(sender, e);
};
grid.Children.Add(btnTimes, 0, 0);
Grid.SetRow(btnTimes, 1);
Grid.SetColumn(btnTimes, 1);
var btnCut = new Button { Text = "-", BackgroundColor = Color.CadetBlue };
btnCut.Clicked += (object sender, EventArgs e) =>
{
Caculate_Click(sender, e);
};
grid.Children.Add(btnCut, 0, 0);
Grid.SetRow(btnCut, 1);
Grid.SetColumn(btnCut, 2);
var btnPlus = new Button { Text = "+", BackgroundColor = Color.CadetBlue };
btnPlus.Clicked += (object sender, EventArgs e) =>
{
Caculate_Click(sender, e);
};
grid.Children.Add(btnPlus, 0, 0);
Grid.SetRow(btnPlus, 1);
Grid.SetColumn(btnPlus, 3);
var btnDot = new Button { Text = ".", BackgroundColor = Color.CadetBlue };
btnDot.Clicked += (object sender, EventArgs e) =>
{
BtnNumber_Click(sender, e);
};
grid.Children.Add(btnDot, 0, 0);
Grid.SetRow(btnDot, 5);
Grid.SetColumn(btnDot, 3);
Content = grid;
}
And button click event.
private void BtnNumber_Click(object sender, EventArgs e)
{
var numButton = (sender as Button);
var keyInNumber = numButton.Text;
if (lblPanel.Text == "0")
lblPanel.Text = keyInNumber;
else
lblPanel.Text += keyInNumber;
}
I can see lblPanel.text was changed in debug mode but it isn't changed on app. Could anyone help me? Thanks!

Answer 1

You define lblPanel twice, inside and outside the constructor, which makes the inner one local to the MainPage, while BtnNumber_Click works on the global one...
It should be like
public Label lblPanel; // <-- here you define it..
public MainPage() {
...
// Here you assign it..
lblPanel = new Label { Text = "0",...