Data Entry - sizing controls

I am designing a data entry screen in XAMARIN using their new control - FlexLayout. I am trying to ensure that this data entry form will display on small screens and big screens e.g.on a small screen - each control will be one per row. On a large screen, one row for all controls.

I am using Flexlayout which allows wrapping. But I am having a problem with the Entry boxes. I have 4 controls

Alpha Numeric box - 20 characters (Batch Number place holder)
Alpha Numeric box - 30 characters (Serial Number place holder)
Numeric box - I have this set to use the numeric keyboard so can't put a place holder beside it. So I have to put a label beside this box.
Data Picker - I have to put a label beside this box too
I have tried various properties belonging to the FlexLayout. All of the samples online that I can find relate to labels and images which I can get to work the way I want my Entry controls to work.




I get the Entry boxes with about size for two characters. I tried Flexlayout.Grow="1" but it doesn't make any difference. I was also trying to get the labels beside the "Quantity" and the date picker field to be centered beside the entry and date picker controls but that's not working either.

Any help - much appreciated.

Posts

  • AnnRAnnR Member ✭✭

    How do I add in the XAML code - it just disappears from my post!

  • JohnHardmanJohnHardman GBUniversity mod

    @AnnR said:
    How do I add in the XAML code - it just disappears from my post!

    Put three back ticks on the line before the XAML and three more on the line after the XAML. There is one back tick at the end of this line, in case you cannot find it on your keyboard (on mine it's on the key to the left of the number 1 above the Qwerty keyboard) - `

  • AnnRAnnR Member ✭✭

    John

    thank you - here is my XAML now.

      <FlexLayout Direction="Row" 
        AlignItems="Start" 
         AlignContent="Start" 
         JustifyContent="SpaceAround"  
           Wrap="Wrap" >
       <Entry Placeholder="Batch Number" FlexLayout.Grow="1"/>
       <Entry Placeholder="Serial Number" FlexLayout.Grow="1"/>
       <Label Text="Quantity" VerticalOptions="Center" VerticalTextAlignment="Center" />
        <Entry Keyboard="Numeric" FlexLayout.Grow="1" />
        <Label Text="Purchased"  VerticalOptions="Center"  />
        <DatePicker  IsEnabled="False"  />
        </FlexLayout>
    
    
    
  • AnnRAnnR Member ✭✭
    edited May 7

    This is what I would like if the screen is wide enough but if not, then it should move the entry boxes down to the next row.

    This is what I am getting.

    Sorry for all the posts - first time poster and very new to Xamarin and xaml !

  • JohnHardmanJohnHardman GBUniversity mod

    @AnnR

    I found FlexLayout a little "unfinished" when I tried it recently. Being used to doing similar things in Java, I was surprised at how many problems I hit with FlexLayout. Hopefully, it's improved since I tried it, but it might not be quite right yet - it's quite new and hasn't had as much time to mature as most other Views/Layouts.

    In terms of what you are trying to do, I suggest putting

    <Label Text="Quantity" />
    <Entry Keyboard="Numeric" />
    

    into it's own Layout (probably a horizontal StackLayout, or possibly it's own FlexLayout)

    and putting

    <Label Text="Purchased" />
    <DatePicker  IsEnabled="False"  />
    

    into it's own Layout (probably a horizontal StackLayout, or possibly it's own FlexLayout)

    Then use those two nested Layouts in your current FlexLayout in place of the four lines now in the nested Layouts.
    Once that is done, then look at the VerticalOptions to see if they need tweaking. With FlexLayout, I suggest starting with VerticalOptions="Start", and then adjust as required.

  • AnnRAnnR Member ✭✭

    John

    Thanks for comment but I have given up. I just could not get my flexible layout to work.
    I went back to a grid layout. Hopefully someone will post a sample in the future :)

  • JohnHardmanJohnHardman GBUniversity mod

    @AnnR said:
    John

    Thanks for comment but I have given up. I just could not get my flexible layout to work.
    I went back to a grid layout. Hopefully someone will post a sample in the future :)

    If you want to try an alternative to FlexLayout, take a look at
    https://github.com/XLabs/Xamarin-Forms-Labs/blob/master/src/Forms/XLabs.Forms/Controls/WrapLayout.cs
    and
    https://forums.xamarin.com/discussion/comment/57486/#Comment_57486

    Again, it's not perfect, but that's what I base my code on currently.

  • AnnRAnnR Member ✭✭

    Thanks - will try that.

Sign In or Register to comment.