CODEWITHSUNDEEP
xamarin.forms
dotnetdevcsharp
dotnetdevcsharp

Reputation: 3980

Xamarin's forms Date Picker android icon a bit out of way

I am trying to place a synfcusion button that has a calendar image near a xarmain forms entry box.

But its a bit out of alignment what I have tried so far is.

<Label Text="Please select a start date below"></Label>
 <StackLayout Orientation="Horizontal">
 <Entry x:Name="txtDateStartEntry" WidthRequest="200" ></Entry>
 <syncfusion:SfButton x:Name="btnPickStartDate" CornerRadius="10"  HorizontalTextAlignment="Start" ShowIcon="True" Clicked="btnPickStartDate_Clicked"  FontSize="24" BorderThickness="2" TextColor="White"  BackgroundColor="White"  Text="..."  >
<syncfusion:SfButton.Content>
  <Grid ColumnDefinitions="Auto, *, Auto"  ColumnSpacing="16" Padding="16">
  <Image Grid.Column="1" HorizontalOptions="End" WidthRequest="30" HeightRequest="30" Source="cal16.png" VerticalOptions="End"/>
   </Grid>
  </syncfusion:SfButton.Content>
  </syncfusion:SfButton>
</StackLayout>

What I have eneded up with is this.

enter image description here

As you can see its a bit far away from the entry field and doesnt look like it belongs.

Upvotes: 0

Views: 207

Answers (1)

Andrew H
Andrew H

Reputation: 931

If you're using Syncfusion, you should make use of SfTextInputLayout which provides leading/trailing view functionality for the express purpose of adding descriptive iconography to an input view.

Code example assumes importing the following xmlns:

xmlns:sftl="clr-namespace:Syncfusion.XForms.TextInputLayout;assembly=Syncfusion.Core.XForms"

<sftl:SfTextInputLayout TrailingViewPosition="Inside">
  <Entry x:Name="txtDateStartEntry" WidthRequest="200" />
  <sftl:SfTextInputLayout.TrailingView>
    <Image HeightRequest="30" Source="cal16.png">
      <Image.GestureRecognizers>
        <TapGestureRecognizer Tapped="btnPickStartDate_Clicked" />
      </Image.GestureRecognizers>
    </Image>
  <sftl:SfTextInputLayout.TrailingView>
</sftl:SfTextInputLayout>

Note: when using LeadingView or TrailingView, it's recommended to not assign a Width value as Syncfusion will calculate the width based on the height you request to maintain aspect ratio of the specified view. Therefore I have intentionally excluded HeightRequest from the Image.

Upvotes: 1

Related Questions