Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Custom Control Issues

I followed this article to create a basic "custom control" for Xamarin... No joy!

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/contentview

Using this article I simplified the whole thing... I need a very simple control for a mobile reporting app. The current app has LETTER designations (so a Label), in a colored circle (each color means a phase for that designation. Essentially this can be RED, YELLOW, or GREEN... go figure!

I designed a XAML page with a FRAME, and within it is a LABEL... I bound it as is in the article... I set the widthrequest and heightrequest to twice the CornerRadius (i.e a circle)... This control will be databound in a FLEXVIEW ItemSource... This should be easy as heck to accomplish... So far I get no errors, but nothing is rendered on screen...

Xamarin.Essentials 1.5.3.2
Xamarin.Forms 4.6.0.800
.NET Standard Library 2.0.3

All the code is in the article... Here is the XAML

    <Frame BindingContext="{x:Reference this}" WidthRequest="42" HeightRequest="42" HasShadow="False" Padding="0,2" Margin="8" VerticalOptions="Center" HorizontalOptions="Center" BackgroundColor="Transparent" BorderColor="Black" CornerRadius="21">
        <Label Text="{Binding Text, FallbackValue='1'}" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand" FontSize="23" FontAttributes="Bold, Italic" />
    </Frame>

public partial class StatusItemControl : ContentView
{
    public static readonly BindableProperty TextProperty = BindableProperty.Create("Text",          // the name of the bindable property
                                                                                typeof(string),         // the bindable property type
                                                                                typeof(StatusItemControl),// the parent object type
                                                                                string.Empty);          // the default value for the property
    public string Text
    {
        get => (string)GetValue(StatusItemControl.TextProperty);
        set => SetValue(StatusItemControl.TextProperty, value);
    }

    public DrawItemControl()
    {
        InitializeComponent();

    }
}

Best Answer

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited June 2 Accepted Answer

    @StewartBasterash said:
    I did this very thing... both with and without text... I get nothing... No circles, not text... Can you provide the code you are using... My control was copied directly from Microsoft doc and changed only for my naming convention... That said, I found other third party documentation that had different code... Just curious what works and what does not.

    Here is the demo file, you could refer to the code.

Answers

  • StewartBasterashStewartBasterash USMember ✭✭

    Here is an update... Well, I was "sort of wrong". The control in fact does kind of work(?)... What I mean is the custom control is a simple frame with an embedded label... In my main view I need to give status on multiple items... So, there is a collection of status displays for any given designation... To test, I manually put the custom control into a FLEXLAYOUT... This code below displays absolutely NOTHING... However, if I insert one more, using static XAML, like the orginal code in the control, manually... then they ALL show... the customs as well as the static... There is something amiss! For some reason, the view will not render unless there is something internally to render... they they all will show...

    <FlexLayout Wrap="Wrap" JustifyContent="SpaceAround" Direction="Row" AlignContent="Start">
    
        <custom:StatusItemControl Text="A" />
        <custom:StatusItemControl Text="R" />
        <custom:StatusItemControl Text="N" />
    

  • StewartBasterashStewartBasterash USMember ✭✭
    Thank you... however, color is not an issue... the problem is within a flexlayout on a contentview, the controls, even this simple one , does not appear without the addition of static content.
  • JarvanJarvan Member, Xamarin Team Xamurai

    There is something amiss! For some reason, the view will not render unless there is something internally to render... they they all will show...

    Do you mean the custom control will not be displayed if don't set a value to the Text property? I created a basic demo to test the code, it works fine.

    <FlexLayout>
        <local:View1/>
        <local:View1/>
        <local:View1/>
    </FlexLayout>
    

  • StewartBasterashStewartBasterash USMember ✭✭

    I did this very thing... both with and without text... I get nothing... No circles, not text... Can you provide the code you are using... My control was copied directly from Microsoft doc and changed only for my naming convention... That said, I found other third party documentation that had different code... Just curious what works and what does not.

  • JarvanJarvan Member, Xamarin Team Xamurai
    edited June 2 Accepted Answer

    @StewartBasterash said:
    I did this very thing... both with and without text... I get nothing... No circles, not text... Can you provide the code you are using... My control was copied directly from Microsoft doc and changed only for my naming convention... That said, I found other third party documentation that had different code... Just curious what works and what does not.

    Here is the demo file, you could refer to the code.

  • StewartBasterashStewartBasterash USMember ✭✭

    I appreciate your effort, but there is no code to refer to...

  • JarvanJarvan Member, Xamarin Team Xamurai

    @StewartBasterash Sorry for the mistake, I've updated the reply.

  • StewartBasterashStewartBasterash USMember ✭✭

    @Jarvan --

    Thank you for helping me resolve the issue... My problem was that I did not define "x:Name=this" in my header of the XAML file... Once that was done everything started to work... having your working code made it clear right away what was going on... thank you.

    I have another question... Now that the control is working, I am having another issue. On a simple page, as your example shows, everything works just fine... My app is a "TABBED" layout. I have a "Start" Page (the tabbed page), and three other tabbed pages. I moved the "FlexLayout" code from the app you built into one of the tabbed pages. Now the control no longer appears... Is there something special I need to do to instantiate the control?

Sign In or Register to comment.