Custom UI control not being rendered

Question

I would like to ask a question what am I doing wrong that my custom control is not being rendered correctly?

    class FooterButton : StackLayout  
    {  
        public event EventHandler Clicked;  
        public ImageSource Source { get; set; }  
        public string Text { get; set; }  
        public TextTransform Transform { get; set; }  
        public Color TextColor { get; set; }  
        public FooterButton()  
        {  
            var TapGestureRecognizer = new TapGestureRecognizer();  
            Orientation = StackOrientation.Vertical;  
            Spacing = 0;  
  
            var image = new Image  
            {  
                Margin = new Thickness(1),  
            };  
            image.SetBinding(Image.SourceProperty, "Source");  
            Children.Add(image);  
  
            var label = new Label  
            {  
                FontSize = 10,  
                FontAttributes = FontAttributes.Bold,  
                FontFamily = Utilities.GetFont(Fonts.Arial)  
            };  
            label.SetBinding(Label.TextProperty, "Text");  
            label.SetBinding(Label.TextTransformProperty, "Transform");  
            label.SetBinding(Label.TextColorProperty, "TextColor");  
            Children.Add(label);  
  
            TapGestureRecognizer.Tapped += Clicked;  
            this.GestureRecognizers.Add(TapGestureRecognizer);  
        }  
    }  

and then I call it on some ContentPage like so...

this.Body.Children.Add(new FooterButton  
{  
    Text = "Inquiry",  
    Transform = TextTransform.Uppercase,  
    TextColor = ColorPalette.Red,  
    Source = Utilities.GetGlyph(FontAwesome.FontAwesomeIcons.Envelope, Fonts.FontAwesomeRegular, ColorPalette.Red, 28)  
});  

And this is what I get...

And this is what I get if I hardcode the same code in XAML into the footer...

Also one technical question, how can I assign the property of FlexLayout.SelfAsign in c# code of a custom element that will be in a Flexlayout?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

what am I doing wrong that my custom control is not being rendered correctly

This is because 'FooterButton' is type of StackLayout which cannot display a text or an image directly. As Viorel-1 said, try adding child views to the layout to display the content.

how can I assign the property of FlexLayout.SelfAsign in c# code of a custom element that will be in a Flexlayout

To specify the asign value for a control in code, try using FlexLayout.SetAlignSelf command. Here is the sample code, you could refer to it.

   var footerButton = new FooterButton  
   {  
       Text = "Inquiry",  
       Transform = TextTransform.Uppercase,  
       TextColor = ColorPalette.Red,  
       Source = Utilities.GetGlyph(FontAwesome.FontAwesomeIcons.Envelope, Fonts.FontAwesomeRegular, ColorPalette.Red, 28)  
   }  
     
   FlexLayout.SetAlignSelf(footerButton, FlexAlignSelf.Center);  
   this.Body.Children.Add(FooterButton);  

The related doc: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/flex-layout#the-alignself-property

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.