Chapter 8 Advanced UI Concepts

•\ Locally: These styles are added to a view or page resources property. Styles defined in this way will apply to all controls that are children of the view or page they are defined in.

Your global example refers to the Styles.xaml file. This is a file that comes with a new .NET MAUI project.

Examining the Default Styles

You can view this file under Resources/styles.xaml. Let’s take a look at the style for Border in this file:

<Style TargetType="Border">

<Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />

<Setter Property="StrokeShape" Value="Rectangle"/> <Setter Property="StrokeThickness" Value="1"/>

</Style>

The XAML syntax used to define a style looks rather different to the XAML you have written so far. Let’s break it down to gain a better understanding of what it all means.

TargetType

To start, when defining a Style, you must define the TargetType. This property defines which type of control the style definition targets and therefore applies to. Defining a Style with only the TargetType property set will apply to all controls of that type within the scope it is defined. This is referred to as implicit styling.

232

Chapter 8 Advanced UI Concepts

If you wish to explicitly style a control, you can also add the x:Key property. This is referred to as explicit styling. You are then required to set the Style property on any control that wishes to use this explicit style that you have created. You will be creating an explicit style in the “Creating a style” section following shortly.

ApplyToDerivedTypes

By default, styles created explicitly apply to the type defined in the TargetType property I just covered. If you wish to allow derived classes to also inherit this style, you need to set the ApplyToDerivedTypes property to true.

Setter

This is the part that looks and feels quite a bit different to the previous XAML you have written. Since you are not creating controls but defining how they will look, you must follow this syntax. Let’s look at the following example:

<Style TargetType="Label">

<Setter Property="TextColor" Value="Black" /> </Style>

The above is not a style you would include in an application; however, as an example it allows you to say

The Style for Label controls will set the TextColor property to Black. Now that you have had a look at some of the key concepts that make up

a style in .NET MAUI, let’s create your own style for your overlay.

233

Chapter 8 Advanced UI Concepts

Creating aStyle

Let’s view this in action by adding the following to the Styles.xaml file. Add this just below the existing <Style TargetType=="Border"> entry.

<Style TargetType="Border" x:Key="OverlayBorderStyle"> <Setter Property="BackgroundColor" Value="White"

/> <Setter Property="Stroke" Value="{AppThemeBinding Light={StaticResource Gray200}, Dark={StaticResource Gray500}}" />

<Setter Property="StrokeShape" Value="Rectangle"/> <Setter Property="StrokeThickness" Value="1"/>

</Style>

The above looks very similar to the default Border style already defined with the addition of the BackgroundColor setter.

It is also worth noting that you only need to set the values that you wish to change from the implicit style. Therefore, your explicit style can be reduced down to

<Style TargetType="Border" x:Key="OverlayBorderStyle"> <Setter Property="BackgroundColor" Value="White" />

</Style>

The Stroke, StrokeShape, and StrokeThickness properties will all be inherited from the implicit global style. This provides yet another great way to reduce the amount of code you need to write.

Now you can use this style in your application. Open the FixedBoardPage.xaml file and add the following line to your Border element (change in bold):

<Border

IsVisible="{Binding IsAddingWidget}" HorizontalOptions="Center"

234

Chapter 8 Advanced UI Concepts

VerticalOptions="Center"

Padding="10"

Style="{StaticResource OverlayBorderStyle}">

This will result in your overlay looking far better to the user now because it is no longer transparent. Also, consider moving the

HorizontalOptions, VerticalOptions, and Padding properties over to the style definition. Figure 8-2 shows how much better the overlay now looks.

Figure 8-2.  The overlay with a much clearer background

What you have done here is considered bad practice, though! You have hardcoded the BackgroundColor of your Border control in the style definition so your application will look great on a device running in light mode. However, as soon as the user switches to dark mode, they will have a glaring white border showing.

235