We Keep Coding

How to access components created in Xamarin.Forms C# code behind?

So, I'm doing an app in Xamarin.Forms that creates some components and layouts when a button is clicked.
My problem is that I need to access these components afterwards so I can change the text in some labels, get values from editors and remove them later if necessary...
This is the piece of code that creates the components:
private void newItem()
{
StackLayout add = new StackLayout { };
add.StyleId = "add_" + posicio;
elements.Children.Add(add);
StackLayout grupInical = new StackLayout
{
Orientation = StackOrientation.Horizontal
};
add.Children.Add(grupInical);
Label number = new Label
{
VerticalOptions = LayoutOptions.End,
HorizontalOptions = LayoutOptions.StartAndExpand,
Text = "Element" + posicio.ToString(),
FontAttributes = FontAttributes.Bold,
Margin = new Thickness(5, 0, 0, 0)
};
Button tancar = new Button
{
Padding = new Thickness(5),
Text = "✕",
HorizontalOptions = LayoutOptions.End,
BackgroundColor = Color.Transparent,
WidthRequest = 30,
HeightRequest = 30
};
number.StyleId = "number_" + posicio;
tancar.StyleId = "tancar_" + posicio;
tancar.Clicked += Eliminar_clicked;
grupInical.Children.Add(number_);
grupInical.Children.Add(tancar);
StackLayout values = new StackLayout
{
Orientation = StackOrientation.Horizontal
};
values.StyleId = "values" + posicio;
add.Children.Add(values);
Button elegir = new Button
{
Text = "Element"
};
Editor percentage = new Editor { MaxLength = 2, WidthRequest = 30 };
Label desc = new Label
{
VerticalOptions = LayoutOptions.Center,
FontSize = 20,
FontAttributes = FontAttributes.Bold,
Text = "%"
};
Picker picker = new Picker
{
IsVisible = false
};
elegir.Clicked += Elegir_Clicked;
elegir.StyleId = "elegir_"+posicio;
percentatge.StyleId = "percentatge_" + posicio;
desc.StyleId = "desc_" + posicio;
picker.StyleId = "picker_" + posicio;
values.Children.Add(elegir);
values.Children.Add(percentatge);
values.Children.Add(desc);
values.Children.Add(picker);
posicio += 1;
scroll.ScrollToAsync(0, elements.Height, true);
}
As you can see, I'm trying to access the components by assigning them a styleid value but I can't access the component.
Have you got any suggestions on how to identify the items so I can reference them later on?

Declare these components at the class level and then you can access them in the other place in your project.
public partial class MainPage : ContentPage
{
Label numberLabel;
StackLayout myAddStackLayout;
public MainPage()
{
InitializeComponent();
newItem()
numberLabel.Text = "updateValue";
myAddStackLayout.Children.Add(...);
}
public void test() {
numberLabel.Text = "updateValue";
myAddStackLayout.Children.Add(...);
}
private void newItem()
{
StackLayout add = new StackLayout { };
Label number = new Label ();
}
}

Entry control expands beyond StackLayout container

I'm using the following (test) code to dynamically create a Page Content. I'm expecting the Entry control to stay within the StackLayout bounds and clip its large Text value. Somehow this doesn't work like I want.
What am I doing wrong here?
public MyPage() {
InitializeComponent();
var stackMain = new StackLayout() {
Orientation = StackOrientation.Vertical,
Spacing = 2,
BackgroundColor = Color.Yellow
};
Content = stackMain;
Padding = new Thickness(15, Device.OnPlatform(25, 5, 5), 15, 10);
var label = new Label() {
Text = "Test:"
};
stackMain.Children.Add(label);
var stackEntry = new StackLayout() {
Orientation = StackOrientation.Horizontal
};
stackMain.Children.Add(stackEntry);
var entry = new Entry() {
Text = "Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
IsEnabled = false,
HorizontalOptions = LayoutOptions.FillAndExpand
};
stackEntry.Children.Add(entry);
var button = new Button() {
Text = "Click me"
};
stackEntry.Children.Add(button);
}

What you need is an editor, Entries are one line only, the code below is tested and it fixes the Height by the size of the text:
public class App : Application
{
public App()
{
// The root page of your application
var content = new ContentPage
{
Padding = new Thickness(15, Device.OnPlatform(25, 5, 5), 15, 10),
Title = "test",
Content = new StackLayout
{
Spacing = 2,
BackgroundColor = Color.Yellow,
Children = {
new Label {
Text = "Test:"
},
new Editor {
Text = "Blaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
IsEnabled = false,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill
},
}
}
};
MainPage = new NavigationPage(content);
}
}
Hope this helps.

I just solved the same problem on an editor control!
The problem is here Orientation = StackOrientation.Horizontal,
you need to set orientation as StackOrientation.Vertical and it will wrap properly.
Note that I'm using Editor instead of Entry.

How to create click event on label in xamarin forms dynamically

I am working on cross platform xamarin application and I want to create hyperlink label for "Forgot password?" on login page.
I have used following code to create label but I don't know how to create onclick event on it.
MainPage = new ContentPage
{
BackgroundImage = "background.png",
Content = new StackLayout
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Spacing = 50,
Children = {
new Label {
HorizontalTextAlignment = TextAlignment.Center,
Text = "Welcome, Please Sign in!",
FontSize=50,
TextColor=Color.Gray,
},
new Entry
{
Placeholder="Username",
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Text,
HorizontalOptions = LayoutOptions.Center,
WidthRequest = 350,
HeightRequest = 50,
FontSize=20,
TextColor=Color.Gray,
PlaceholderColor=Color.Gray,
},
new Entry
{
Placeholder="Password",
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Text,
HorizontalOptions = LayoutOptions.Center,
WidthRequest = 350,
HeightRequest = 50,
FontSize=25,
TextColor=Color.Gray,
IsPassword=true,
PlaceholderColor =Color.Gray,
},
new Button
{
Text="Login",
FontSize=Device.GetNamedSize(NamedSize.Large,typeof(Button)),
HorizontalOptions=LayoutOptions.Center,
VerticalOptions=LayoutOptions.Fill,
WidthRequest=350,
TextColor=Color.Silver,
BackgroundColor=Color.Red,
BorderColor=Color.Red,
},
new Label //for this label I want to create click event to open new page
{
Text="Forgot Password?",
FontSize=20,
TextColor=Color.Blue,
HorizontalOptions=LayoutOptions.Center,
},
}
}
};

For people who prefer to use XAML and who like to bind Command directly to the ViewModel, you can use this:
<Label HorizontalOptions="Center"
TextColor="Blue"
FontSize="20"
Text="Forgot Password?">
<Label.GestureRecognizers>
<TapGestureRecognizer Command="{Binding ForgotPasswordCommand}" />
</Label.GestureRecognizers>
</Label>
And then in your ViewModel, you'll just assign the command to your function:
public ICommand ForgotPasswordCommand => new Command(OnForgotPassword);
And then define the function with all the work get done:
private async void OnForgotPassword()
{ ... }
PS: You will need to declare that you are using System.Windows.Input;

Try this :
var forgetPasswordLabel = new Label // Your Forget Password Label
{
Text = "Forgot Password?",
FontSize = 20,
TextColor = Color.Blue,
HorizontalOptions = LayoutOptions.Center,
};
// Your label tap event
var forgetPassword_tap = new TapGestureRecognizer();
forgetPassword_tap.Tapped += (s,e) =>
{
//
// Do your work here.
//
};
forgetPasswordLabel.GestureRecognizers.Add(forgetPassword_tap);
Sample :
var forgetPasswordLabel = new Label // Your Forget Password Label
{
Text = "Forgot Password?",
FontSize = 20,
TextColor = Color.Blue,
HorizontalOptions = LayoutOptions.Center,
};
MainPage = new ContentPage
{
BackgroundImage = "background.png",
Content = new StackLayout
{
VerticalOptions = LayoutOptions.CenterAndExpand,
HorizontalOptions = LayoutOptions.CenterAndExpand,
Spacing = 50,
Children = {
new Label {
//HorizontalTextAlignment = TextAlignment.Center,
Text = "Welcome, Please Sign in!",
FontSize=50,
TextColor=Color.Gray,
},
new Entry
{
Placeholder="Username",
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Text,
HorizontalOptions = LayoutOptions.Center,
WidthRequest = 350,
HeightRequest = 50,
FontSize=20,
TextColor=Color.Gray,
PlaceholderColor=Color.Gray,
},
new Entry
{
Placeholder="Password",
VerticalOptions = LayoutOptions.Center,
Keyboard = Keyboard.Text,
HorizontalOptions = LayoutOptions.Center,
WidthRequest = 350,
HeightRequest = 50,
FontSize=25,
TextColor=Color.Gray,
IsPassword=true,
PlaceholderColor =Color.Gray,
},
new Button
{
Text="Login",
FontSize=Device.GetNamedSize(NamedSize.Large,typeof(Button)),
HorizontalOptions=LayoutOptions.Center,
VerticalOptions=LayoutOptions.Fill,
WidthRequest=350,
TextColor=Color.Silver,
BackgroundColor=Color.Red,
BorderColor=Color.Red,
},
forgetPasswordLabel
}
}
};
var forgetPassword_tap = new TapGestureRecognizer();
forgetPassword_tap.Tapped += (s,e) =>
{
//
// Do your work here.
//
};
forgetPasswordLabel.GestureRecognizers.Add(forgetPassword_tap);

If the're several places with clickable Label, it makes sense to create a control inheriting from Xamarin.Forms Label and DO NOT PUT TapGestureRecognizer everywhere the label is required.
public class ExtendedLabel : Label
{
private event EventHandler click;
public string Name
{
get; set;
}
public void DoClick()
{
click?.Invoke(this, null);
}
public event EventHandler Clicked
{
add
{
lock (this)
{
click += value;
var g = new TapGestureRecognizer();
g.Tapped += (s, e) => click?.Invoke(s, e);
GestureRecognizers.Add(g);
}
}
remove
{
lock (this)
{
click -= value;
GestureRecognizers.Clear();
}
}
}
}
In your XAML file you import the namespace where the control is defined, e.g.
<ContentPage xmlns:ctrl="clr-namespace:UICore.Controls" ...
And use it as ordinary control:
<ctrl:ExtendedLabel x:Name="quitButton" Clicked="OnQuit">

MyClickyLabel.GestureRecognizers.Add(
new TapGestureRecognizer() {
Command = new Command(() => {
/* Handle the click here */
} )
}
);

xamarin.forms scrollview keyboard appears and button also scroll

Hi i have a weird problem.
I defined few labels and textbox for data entry purpose using xamarin.forms.
I wrapped them into scroll view so that when keyboard appears, they should scroll.
It is working fine. The control which has focus scroll to top and the keyboard appears when it get focus. but i also have couple of buttons at the bottom of my form. Now, the problem is, whenever keyboard appears, my bottom buttons are also scrolled. which looks weird. As button are for submit or cancel, it should be stay there in bottom.
following is my code:
var firstNameLabel = new Label { HorizontalOptions = LayoutOptions.Fill };
firstNameLabel.Text = "First Name";
var firstName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand };
firstName.SetBinding (Entry.TextProperty,MyViewModel.FirstNamePropertyName);
var lastNameLabel = new Label { HorizontalOptions = LayoutOptions.Fill};
lastNameLabel.Text = "Last Name";
var lastName = new Entry() { HorizontalOptions = LayoutOptions.FillAndExpand };
lastName.SetBinding (Entry.TextProperty, MyViewModel.LastNamePropertyName);
---- other fields
Button btnSubmit = new Button
{
HorizontalOptions = LayoutOptions.Fill,
BackgroundColor = Color.FromHex("#22498a"),
TextColor = Color.White,
Text = "Submit"
};
var cancelButton = new Button { Text = Cancel", BackgroundColor = Color.FromHex("0d9c00"), TextColor = Color.White };
contactUsButton.Clicked += (object sender, EventArgs e) =>
{
// cancel operation
};
var cotrolStakeLayout = new StackLayout () {
Padding = new Thickness(Device.OnPlatform(5, 5, 5),0 , Device.OnPlatform(5, 5, 5), 0), //new Thickness(5,0,5,0),
VerticalOptions = LayoutOptions.FillAndExpand,
HorizontalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = { firstNameLabel, firstName, lastNameLabel, lastName, -- and other fields}
};
var scrollableContentLayout = new ScrollView (){
Content = cotrolStakeLayout,
Orientation = ScrollOrientation.Vertical,
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill
};
var buttonLayout = new StackLayout (){
Padding = new Thickness(Device.OnPlatform(5, 5, 5),0 , Device.OnPlatform(5, 5, 5), 0), //new Thickness(5,0,5,0),
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children= { btnSubmit , cancelButton }
};
var nameLayout = new StackLayout()
{
HorizontalOptions = LayoutOptions.Fill,
VerticalOptions = LayoutOptions.Fill,
Orientation = StackOrientation.Vertical,
Children = {scrollableContentLayout,buttonLayout}
};
return nameLayout;
Any ideas what is wrong with it?

You have to change your layout to reach your target:
- Define a "Main-StackLayout"
- Create a "Button-StackLayout" for your Buttons (that should stay on top)
- Add your Buttons to the "Button-StackLayout"
- Add the "button-StackLayout to the "Main-StackLayout"
- Add the ScrollView to to "Main-StackLayout"
- Set content of the page to the "Main-StackLayout"
This should work: buttons stays on top, where (only) the ScrollView can be scrolled.

Xamarin Forms Automatic Image SlideShow/Carousel

I'm completely new to Xamarin Forms but I've managed to create a simple app that has multiple pages and I am able to navigate between pages.
I've added images, buttons and other basic controls successfully and it looks pretty good.
My problem is that I cannot figure out how to create an automatic carousel of multiple images on a page. Any google searches return the CarouselPage which enables a user to swipe the screen to change pages.
I'm considering a horizontal scroller with the 3 images but it doesn't really have the same effect - the user will have to move themselves through the images!
Has anyone found a way of doing this? Any hints or tips would be great!

You can code a combination of a c# timer, a carrousel page, and contentPage's with images on the background I have done something similar but using buttons to navigate the carrousel page:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Xamarin.Forms;
namespace SEEForgeX.Views
{
class CarouselView : CarouselPage
{
ContentPage image1,image2,image3,image4;
public CarouselView()
{
NavigationPage.SetHasNavigationBar(this, false);
string btnPrevTitle = "< Prev";
string btnNextTitle = "Next >";
Color btnColor = Color.FromRgba(0, 0, 0, 0.5);
Color btnTextColor = Color.White;
LayoutOptions btnPosY = LayoutOptions.EndAndExpand;
LayoutOptions btnPrevPosX = LayoutOptions.StartAndExpand;
LayoutOptions btnNextPosX = LayoutOptions.EndAndExpand;
Font buttonFont = Font.SystemFontOfSize(16, FontAttributes.Bold);
int btnWidth = 100;
string exitBtnImg = "close.png";
Button nextBtn1 = new Button
{
Text = btnNextTitle,
BackgroundColor = btnColor,
TextColor = btnTextColor,
VerticalOptions = btnPosY,
HorizontalOptions = btnNextPosX,
Font = buttonFont,
WidthRequest = btnWidth
};
Button prevBtn2 = new Button
{
Text = btnPrevTitle,
BackgroundColor = btnColor,
TextColor = btnTextColor,
VerticalOptions = btnPosY,
HorizontalOptions = btnPrevPosX,
Font = buttonFont,
WidthRequest = btnWidth
};
image1 = new ContentPage
{
BackgroundImage = "slide_01.jpg",
Content = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical,
Padding = 0,
Children = {
new StackLayout
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.StartAndExpand,
Padding = new Thickness(0,10,10,0),
Children = { exitBtn1 }
},
new StackLayout
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.EndAndExpand,
Padding = 20,
Children = { nextBtn1 }
}
}
},
};
image2 = new ContentPage
{
BackgroundImage = "slide_02.jpg",
Content = new StackLayout
{
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Orientation = StackOrientation.Vertical,
Padding = 0,
Children = {
new StackLayout
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.StartAndExpand,
Padding = new Thickness(0,10,10,0),
Children = { exitBtn2 }
},
new StackLayout
{
Orientation = StackOrientation.Horizontal,
VerticalOptions = LayoutOptions.EndAndExpand,
Padding = 20,
Children = {prevBtn2, nextBtn2}
}
}
},
};
//This is the children of the parent view is like adding stacklayout.children.add(foo) but since my parent class is a CarouselPage I can access Children its children
Children.Add(image1);
Children.Add(image2);
void prevBtn2_Clicked(object sender, EventArgs e)
{
this.CurrentPage = image1;
}
void nextBtn1_Clicked(object sender, EventArgs e)
{
this.CurrentPage = image2;
}
private async void exitBtn_Clicked(object sender, EventArgs e)
{
//await Navigation.PopModalAsync();
await Navigation.PopModalAsync();
}
I am not implementing the timer but it should not be difficult, maybe you can even use a loop.