Maui.Toolbox is a collection of useful utilities used in various Xamarin.Forms projects.
- Auto scale views based on device screen resolution.
Install the nuget package to Maui project
add in MauiProgram.cs
builder
.UseMauiApp<App>()
.UseMauiToolkit("Sample") protected override void OnCreate(Bundle savedInstanceState)
{
...
Xamarin.Forms.Forms.Init(this, savedInstanceState);
Xamarin.Essentials.Platform.Init(this, savedInstanceState);
Maui.Toolbox.Platform.Init([KEY], this, savedInstanceState);
...
} public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
...
Xamarin.Forms.Forms.Init();
Maui.Toolbox.Platform.Init([KEY]);
...
}| DataType | Property | Description |
|---|---|---|
| float | ScreenWidth | The screen width available for the app to use. |
| float | ScreenHeight | The screen height available for the app to use. |
| float | AdjustedHeight | The new screen height after adjusting base on 16/9 ratio. |
| float | AdjustedWidth | The new screen width after adjusting base on 16/9 ratio. |
| float | OrigScreenWidth | The original screen height before adjusting base on 16/9 ratio. |
| float | OrigScreenHeight | The original screen width before adjusting base on 16/9 ratio. |
| float | AppScale | The screen scale for iOS and screen density for Android. |
| float | StatusBarHeight | The height of the status bar. |
| float | TopInsets | The height of the status bar and notch height |
| float | BottomInsets | The height covered by the bezel, navigation bar. Useful for bottom aligned contents. |
Sample:
using Maui.Toolbox;
...
var screenWidth = Scaler.ScreenWidth;
...| Return Type | Method |
|---|---|
| float | ScaleHeight |
| float | ScaleWidth |
| double | ScaleFont |
| Thickness | ScaleThickness |
| Thickness | ScaleThicknessWidth |
| Thickness | ScaleThicknessHeight |
| CornerRadius | ScaleCornerRadius |
| CornerRadius | ScaleCornerRadiusWidth |
| double | GetMinSize |
Sample:
using Maui.Toolbox;
...
var width = 50.ScaleWidth();
var height = 50.ScaleHeight(40); // 50 for Android, 40 for iOS
...| Return Type | Method |
|---|---|
| int/double/single | ScaleHeight |
| int | ScaleHeightInt |
| double | ScaleHeightDouble |
| float | ScaleHeightFloat |
| int/double/single | ScaleWidth |
| int | ScaleWidthInt |
| double | ScaleWidthDouble |
| float | ScaleWidthFloat |
| GridLength | ScaleGridHeight |
| GridLength | ScaleGridWidth |
| Thickness | ScaleThickness |
| Thickness | ScaleThicknessWidth |
| Thickness | ScaleThicknessHeight |
| double | ScaleFontSize |
| CornerRadius | ScaleCornerRadius |
| CornerRadius | ScaleCornerRadiusWidth |
Sample: Same value for both platforms.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ToolboxDemo.ScalePage"
xmlns:toolbox="clr-namespace:Maui.Toolbox;assembly=Maui.Toolbox"
Title="Scale Test">
<StackLayout Spacing="0" Orientation="Vertical">
<BoxView HorizontalOptions="Start"
WidthRequest="{toolbox:ScaleWidth Value=320}"
HeightRequest="{toolbox:ScaleHeight Value=20}"
Margin="{toolbox:ScaleThickness Value='5,5,5,5'}">
</BoxView>
</StackLayout>
</ContentPage>Sample: Different values for the two platforms.
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ToolboxDemo.ScalePage"
xmlns:toolbox="clr-namespace:Maui.Toolbox;assembly=Maui.Toolbox"
Title="Scale Test">
<StackLayout Spacing="0" Orientation="Vertical">
<BoxView HorizontalOptions="Start"
WidthRequest="{toolbox:ScaleWidth Value=320, Android=160}"
HeightRequest="{toolbox:ScaleHeight Value=20, Android=40}"
Margin="{toolbox:ScaleThickness Value='5,5,5,5', Android='10,10,10,10'}">
</BoxView>
</StackLayout>
</ContentPage>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent