CODEWITHSUNDEEP
c#xamlxamarin.forms
Coffee
Coffee

Reputation: 402

Align label and entry, make entry autosize width and align right in xamarin forms

I'm trying to create a label with entry next to it, I'm trying to achieve the effect below (My entry has the border set to transparent which is why there's no lines under it):

enter image description here

Where the entry text and label text are both aligned, the entry should "grow" to the left as more numbers are typed and move the "£" symbol to the left, this is the best Ive been able to do so far though:

enter image description here

This is using the code:

<StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="1">
      <Label HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand" Text="£" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="0"/>
      <controls:BorderlessEntry Text="{Binding Income.MonthlyIncome}" WidthRequest="80" HorizontalOptions="EndAndExpand" PlaceholderColor="#C7C7C7" Placeholder="0" VerticalOptions="CenterAndExpand" FontSize="20" FontFamily="{StaticResource RobotoLight}" TextColor="#C7C7C7" Grid.Column="1"/>
 </StackLayout>

But despite both being centred, the entry text is just slightly above the label text, I also cant figure out how to make the Entry extend the width depending on the text, or how to align it to the right (or stacklayout end).

I know I've bundled 3 questions into one here, so if anyone can help with even just 1 part of it it'd be a big help.

Upvotes: 2

Views: 5252

Answers (2)

Leo Zhu
Leo Zhu

Reputation: 14956

i test with a simple Entry and Label,you could use HorizontalOptions property and set to EndAndExpand or End to let the label and Entry align right like :

<StackLayout Orientation="Horizontal">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

        </Grid>
        <StackLayout Grid.Column="0"   VerticalOptions="Start" HeightRequest="60">
            <Label  Text="Monthly Income" VerticalOptions="CenterAndExpand"></Label>
        </StackLayout>

        <StackLayout Grid.Column="1"  Orientation="Horizontal"  HorizontalOptions="FillAndExpand" VerticalOptions="Start"  HeightRequest="60" >
            <Label HorizontalOptions="EndAndExpand" VerticalOptions="Center" Text="£" FontSize="20"  TextColor="#C7C7C7" />
            <Entry  PlaceholderColor="#C7C7C7" HorizontalOptions="End" WidthRequest="100" VerticalOptions="Center" FontSize="18"  TextColor="#C7C7C7" />
        </StackLayout>

</StackLayout>

and the effect like :

enter image description here

and make entry autosize width,maybe you should use custom renderer to achive it

Upvotes: 7

Nikhil
Nikhil

Reputation: 3387

So for the entry to grow on the left side as you mentioned, you can try giving HorizontalOptions as EndAndExpand to the StackLayout, Label and Entry.

Also for "entry text is just slightly above the label text" you can give some Margin from the bottom to the Label. Like Margin="0,0,0,5" you can try with 3,4,5 which works the best for the Margin. This is happening because the Entry Border is set to transparent so it is there but not visible.

Let me know if you have further issues.

Upvotes: 0

Related Questions