Search code examples
c#xamluser-interfacexamarin.formsdevexpress

Unwanted space between username and password edittext at Login Page in xamarin forms app


That's my login page. "Kullanıcı kodu" means user code, "Şifre" means password. I don't want these space between user code and password edittext. I used devexpress ComboboxEdit and TextEdit. I tried to change margin, padding, layout's padding, grid's height, textedit height request... but there is no change. Those space still remain there!

enter image description here

XAML

<ContentPage.Content>
    <StackLayout  
        VerticalOptions="Center" 
            HorizontalOptions="CenterAndExpand"
                  Margin="15" Padding="5">
        <Image Source="@drawable/ida_logo" />
        <Label x:Name="denemeText"
               Text="Çözüm Ortağınız" 
               FontSize="Title" 
               TextColor="Black" 
               FontFamily = "LobsterTwoItalic"   
               xct:ShadowEffect.Color="SlateGray"   
               xct:ShadowEffect.Opacity="0.8"
               VerticalOptions="CenterAndExpand" 
               HorizontalOptions="CenterAndExpand" />
        
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="60" />
                <RowDefinition Height="80" />
                <RowDefinition  Height="80"/>
                
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                
            </Grid.ColumnDefinitions>
            
            <dxe:ComboBoxEdit  
                            
                            x:Name="databasePicker"
                            BackgroundColor="White"
                            LabelText="Veritabanı"
                            Grid.Row="0" Grid.Column="0" 
                            LabelColor="Black"  
                            TextFontSize="18"
                            LabelFontSize="18"
                            DropDownItemFontSize="18"
                            BottomTextFontSize="18"
                            AffixFontSize="18"
                            HorizontalOptions="FillAndExpand"
                            BorderColor="Black"
                            BorderThickness="1"
                            TextFontFamily="Roboto"
                            AffixFontFamily="Roboto"
                            BottomTextFontFamily="Roboto"
                            DropDownItemFontFamily="Roboto"
                            DropDownItemTextColor="Black"
                            DropDownSelectedItemTextColor="Black"                                 
                            TextHorizontalAlignment="Center"
                            VerticalOptions="FillAndExpand"
                            HeightRequest="60"
                            TextColor="Black"  />



            
            <dxe:TextEdit
                x:Name="loginCustomEntryKullanici"
                 
                
                 LabelText="Kullanıcı Kodu"
                 TextFontSize="18"
                 LabelFontSize="18"
                 BottomTextFontSize="18"
                 AffixFontSize="18"
                 LabelColor="Black"
                 BackgroundColor="White"
                 BorderColor="Black"
                 ReserveBottomTextLine="True"
                 AutofillContentType="None"
                 IsLabelFloating="True"
                 AffixFontFamily="Roboto"
                 BottomTextFontFamily="Roboto"
                 TextFontFamily="Roboto"
                 Grid.Row="1" Grid.Column="0"
                 HeightRequest="90"
                VerticalOptions="FillAndExpand"
            
            />
            <dxe:PasswordEdit
               x:Name="loginCustomEntryPass"
                
                 LabelText="Şifre"
                 TextFontSize="18"
                 LabelFontSize="18"
                 BottomTextFontSize="18"
                 LabelColor="Black"
                 BackgroundColor="White"
                 BorderColor="Black"
                 ReserveBottomTextLine="True"
                 IsLabelFloating="True"
                 BottomTextFontFamily="Roboto"
                 TextFontFamily="Roboto"
                 Grid.Row="2" Grid.Column="0"
                 VerticalOptions="FillAndExpand"
                HeightRequest="80"
            
            />
                 

        </Grid>
        <Button x:Name="giris_Button" 
                Text="Giriş Yap" 
                TextColor="Black"
                FontSize="Medium"
                Clicked="giris_Button_Clicked1" 
                VerticalOptions="Center" 
                BackgroundColor="Transparent" 
                BorderColor="Black"  
                BorderWidth="1"
                CornerRadius="8"
                xct:TouchEffect.AnimationDuration="250"
                xct:TouchEffect.AnimationEasing="{x:Static Easing.CubicInOut}"
                xct:TouchEffect.PressedScale="1.25"
                xct:TouchEffect.PressedBackgroundColor="AliceBlue"
                xct:TouchEffect.NormalBackgroundColor="Transparent"
                />
        
        


    </StackLayout>
</ContentPage.Content>

Solution

  • You have different row heights defined and if the heights of the controls inside the rows don't match with the row heights, you'll see gaps.

    I'm almost certain that the differences between the row heights and the actual heights of the controls are causing this.

    Try changing the RowDefinitions from this:

    <Grid.RowDefinitions>
        <RowDefinition Height="60" />
        <RowDefinition Height="80" />
        <RowDefinition Height="80"/>
    </Grid.RowDefinitions>
    

    to this:

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
        <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    

    Note: Usually, it's not recommended to have several RowDefinitions with the Auto setting, but I believe that's the root of the issue here, so you might want to give that a try.

    You may also need to change or remove the HeightRequest settings from the ComboBoxEdit, TextEdit and PasswordEdit controls.

    Alternatively, you can also give each row the same height:

    <Grid.RowDefinitions>
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
        <RowDefinition Height="60" />
    </Grid.RowDefinitions>
    

    and then also make sure to give your controls the same HeightRequest="60":

    <dxe:ComboBoxEdit
        HeightRequest="60" />
    
    <dxe:TextEdit
        HeightRequest="60" />
    
    <dxe:PasswordEdit
        HeightRequest="60" />