We’ve had a look at the basics of C# programming, next we’re going to have a closer look at .NET MAUI user interface controls and layouts. This is what the app looks like so far:
User Interface Controls
In ContentPage we can change the BackgroundColor=“SteelBlue”
Buttons: in .NET MAUI they come with loads of customization options.
We can change the background colour, by adding BackgroundColor=”Black”
We can change the where the button is on the screen using HorizontalOptions=”Center” or we could use ”Fill” which would put it across the app to fill it
TextColor="White" can be used to change the colour of the text to white or choose any other colour from the menu
FontAttributes="Bold" can be used to make the font bold
FontSize="20"changes the size of the font
Padding="20" increases the room around the font inside the button
BorderColor="Aquamarine" can be used to change the colour of the border of the button and you can change the width with BorderWidth="5"
CornerRadius="15" can be used to make the corners more rounded
This is what the code looks like and what the button will look like:
You can also add an image into the button. I’m going to just use the one we have here already to demonstrate: ImageSource=”dotnet_bot.png”. If this was added to the button, this is what the Button would then look like:
Next we will have a look at labels. Labels display single-line and multi-line text and can be used creatively for varied purposes in your app.
Text can be changed in the label Text="Example Text"
The colour of text can be changed with TextColor="Black"
TextDecorations="Underline" (or “Strikethrough”)
The size of your font can be set with FontSize="20"
FontAttributes="Italic" (Or Bold)
TextTransform="Uppercase" (or “Lowercase”)
CharacterSpacing="10" sets the spacing between letters
This is what the code looks like and the label in the app:
You can also place a text box with a placeholder for your name, black coloured text and a white background <Entry Placeholder="Enter your username" TextColor="Black" BackgroundColor="White" />
This is what the app would look like with these changes:
These are just a few of the things you can do to change what your app looks like.