CODEWITHSUNDEEP
iosxamlxamarinxamarin.forms
Torben
Torben

Reputation: 478

Xamarin Forms Entry Field is scaling larger then screen size in iOS

I have a ContentPage which displays E-Mail adresses. The Page is opened, when it got pushed on the Navigation Stack.

var contextToBind = new WorkOrderEMailViewModel(tempBoundItem.No, tempBoundItem.Name, tempBoundItem.Description1);
var page = new WorkOrderEMailPage() { BindingContext = contextToBind };
await Navigation.PushAsync(page);

The Object WorkOrderEMailViewModel has a property called To, which stores the mail adresses.

The Xaml look like this. The Entry field stores the mail adress.

<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" >
   <Entry Text="{Binding BoundItem.To}" HorizontalOptions="FillAndExpand"></Entry>
   <Button Text="..." VerticalOptions="EndAndExpand" Command="{Binding ListItemsButtonTappedCommand}"></Button>
</StackLayout>

So here is where the problem starts. When the To has a very long value, the entry field scales greater then the screen is, so you could not see the end and the button next to the Entry field.

Following Screenshots will make it clear what i want. It is the first Entry.

This is how it looks like with short text and how it should look like with very long text.

Pic1

And this is how it actually looks like.

Pic2

I tried playing around with the HorizontalOption, but with no success.

Update

Based on the recommendation from Clint Landry I changed the xaml to:

<Grid>
     <Grid.RowDefinitions>
          <RowDefinition Height="40" />
     </Grid.RowDefinitions>
     <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*" />
          <ColumnDefinition Width="30" />
     </Grid.ColumnDefinitions>
     <Entry Text="{Binding BoundItem.To}" Grid.Row="0" Grid.Column="0"></Entry>
     <Button Text="..." Command="{Binding ListItemsButtonTappedCommand}" Grid.Row="0" Grid.Column="1"></Button>
</Grid>

Upvotes: 0

Views: 1456

Answers (1)

ClintL
ClintL

Reputation: 1453

Wrap the page in a parent stacklayout with settings of VerticalOptions="FillAndExpand" HorizontalOptions="Fill". Change the children to either a grid (recommended) or HorizontalOptions="Fill" Orientation="Horizontal". The full xaml would be helpful as it feels like other parent xaml tags are affecting this.

<StackLayout x:Name="stackContent" VerticalOptions="FillAndExpand"    HorizontalOptions="Fill">
<StackLayout HorizontalOptions="FillAndExpand" Orientation="Horizontal" >
   <Entry Text="{Binding BoundItem.To}" HorizontalOptions="FillAndExpand"></Entry>
   <Button Text="..." VerticalOptions="EndAndExpand" Command="{Binding ListItemsButtonTappedCommand}"></Button>
</StackLayout>
</Stacklayout>

Upvotes: 2

Related Questions