[Xamarin Forms] Entry with rounded borders in your app


Entry with rounded borders in your app

(Xamarin Forms, NET MAUI)


I know for some people it will be obvious, but I always seepeople asking how to make a custom Entry control with rounded borders... 

To add rounded corners globally to Entry controls in a Xamarin Forms or .NET MAUI application, you can define a Style in the App.xaml (or Styles.xaml for .NET MAUI). This style will automatically apply to all Entry controls in your app, saving you from having to manually style each one.

Example

  1. Define the global style in App.xaml:

<Application.Resources>
    <ResourceDictionary>
        <Style TargetType="Entry">
            <Setter Property="BackgroundColor" Value="White"/>
            <Setter Property="TextColor" Value="Black"/>
            <Setter Property="CornerRadius" Value="10"/>
            <Setter Property="HeightRequest" Value="50"/>
            <Setter Property="Padding" Value="10"/>
            <Setter Property="Margin" Value="10"/>
        </Style>
    </ResourceDictionary>
</Application.Resources>

Now you can make all your pages using 'Entry' controls and all Entry controls in your app will have rounded corners without needing to specify the style manually on each control.


Description of the previous style:

  • CornerRadius: This property sets the curvature radius of the corners of the Entry control, creating a rounded effect.
  • HeightRequest and Padding: These properties control the height and internal spacing of the control, ensuring a visually appealing design.
ℹ️> Remember that, as you define your style in the application's resource dictionary, it will be applied automatically to all Entry controls in your app, ensuring consistency and efficiency in style management.


Here is an example of what you can get:



Comments

Popular posts from this blog

EMGU with Xamarin Forms guide [part 1]

[Xamarin Forms] Custom bottom bordered entry (iOS & Android)

Set your browser on Fire with P5.js