VisualElement extensions
The VisualElement extensions provide a series of extension methods that support configuring the sizing, styling and behaviors of a VisualElement.
The extensions offer the following methods:
Height
The Height method sets the HeightRequest property on the current VisualElement.
The following example will create a Label and set it's HeightRequest to 50.
new Label().Height(50);
MinHeight
The MinHeight method sets the MinimumHeightRequest property on the current VisualElement.
The following example will create a Label and set it's MinimumHeightRequest to 50.
new Label().MinHeight(50);
Width
The Width method sets the WidthRequest property on the current VisualElement.
The following example will create a Label and set it's WidthRequest to 50.
new Label().Width(50);
MinWidth
The MinWidth method sets the MinimumWidthRequest property on the current VisualElement.
The following example will create a Label and set it's MinimumWidthRequest to 50.
new Label().MinWidth(50);
Size
The Size method sets the WidthRequest and HeightRequest properties on the current VisualElement.
The following example will create a Label and set it's WidthRequest and HeightRequest to 50.
new Label().Size(50);
Note
You can also supply the widthRequest and heightRequest separately to the Size method.
MinSize
The MinSize method sets the MinimumWidthRequest and MinimumHeightRequest properties on the current VisualElement.
The following example will create a Label and set it's MinimumWidthRequest and MinimumHeightRequest to 50.
new Label().MinSize(50);
Note
You can also supply the minimumWidthRequest and minimumHeightRequest separately to the MinSize method.
Style
The Style method sets the supplied style on the current VisualElement.
The following example will create a Label and set it's Style property.
var labelStyle = new Style<Label>();
new Label().Style(labelStyle);
Behaviors
The Behaviors method adds the supplied behaviors to the Behaviors collection on the current VisualElement.
The follow example will create an Entry and add a MaxLengthReachedBehavior to it.
new Entry().Behaviors(new MaxLengthReachedBehavior());
AutomationId
The AutomationId method sets the AutomationId property for the supplied VisualElement.
The following example will create an Entry and set the AutomationId to "PasswordEntry":
new Entry().AutomationId("PasswordEntry");
AnchorX
The AnchorX method sets the AnchorX property for the supplied VisualElement.
The following example will create an Entry and set the X component of the center point for any transform, relative to the bounds of the element to 0:
new Entry().AnchorX(0.0);
AnchorY
The AnchorY method sets the AnchorY property for the supplied VisualElement.
The following example will create an Entry and set the Y component of the center point for any transform, relative to the bounds of the element to 0.75:
new Entry().AnchorY(0.75);
Anchor
The Anchor method sets the AnchorX and AnchorY properties for the supplied VisualElement.
The following example will create a Button and set the X and Y components of the center point for any transform, relative to the bounds of the element to be 0.25 and 0.75:
new Button().Anchor(0.25, 0.75);
Background
The Background method sets the Background property for the supplied VisualElement.
The following example will create a Button and set the background of the element to be Blue:
new Button().Background(new SolidColorBrush(Colors.Blue));
BackgroundColor
The BackgroundColor method sets the BackgroundColor property for the supplied VisualElement.
The following example will create a Button and set the background of the element to be Red:
new Button().BackgroundColor(Colors.Red);
Clip
The Clip method sets the Clip property for the supplied VisualElement.
The following example will create a Image and apply a circular Clip:
var ellipse = new EllipseGeometry { Center = new Point(50, 50), RadiusX = 50, RadiusY = 50 };
new Image().Clip(ellipse);
FlowDirection
The FlowDirection method sets the FlowDirection property for the supplied VisualElement.
The following example will create an Entry and sets the FLowDirection to be RightToLeft:
new Entry().FlowDirection(Microsoft.Maui.FlowDirection.RightToLeft);
InputTransparent
The InputTransparent method sets the InputTransparent property for the supplied VisualElement.
The following example will create a Label that should be involved in the user interaction cycle:
new Label().InputTransparent(false);
IsEnabled
The IsEnabled method sets the IsEnabled property for the supplied VisualElement.
The following example will create a Button and set it to be disabled:
new Button().IsEnabled(false);
IsVisible
The IsVisible method sets the IsVisible property for the supplied VisualElement.
The following example will create a Label and set it to be invisible:
new Label().IsVisible(false);
Opacity
The Opacity method sets the Opacity property for the supplied VisualElement.
The following example will create a Label and set the opacity of the element to be 0.5:
new Label().Opacity(0.5);
Rotation
The Rotation method sets the Rotation property for the supplied VisualElement.
The following example will create a Label and set the rotation (in degrees) about the Z-axis (affine rotation) to a value of 45:
new Label().Rotation(45);
RotationX
The RotationX method sets the RotationX property for the supplied VisualElement.
The following example will create a Label and set the rotation (in degrees) about the X-axis (perspective rotation) to a value of 60:
new Label().RotationX(60);
RotationY
The RotationY method sets the RotationY property for the supplied VisualElement.
The following example will create a Label and set the rotation (in degrees) about the Y-axis (perspective rotation) to a value of 180:
new Label().RotationY(180);
Scale
The Scale method sets the ScaleX and ScaleY properties for the supplied VisualElement.
The following example will create a Label and scale the element to be one and a half times its size:
new Label().Scale(1.5);
The following example will create a Label and scale the element to be twice as wide (X direction) and three times as high (Y direction).
new Label().Scale(2, 3);
ScaleX
The ScaleX method sets the ScaleX property for the supplied VisualElement.
The following example will create a Label and scale the element to be one and a half times (1.5x) as wide (X direction):
new Label().ScaleX(1.5);
ScaleY
The ScaleY method sets the ScaleY property for the supplied VisualElement.
The following example will create a Label and scale the element to be two times (2x) as high (Y direction):
new Label().ScaleY(2.0);
TranslationX
The TranslationX method sets the TranslationX property for the supplied VisualElement.
The following example will create a Label and set the X translation delta to 1.5:
new Label().TranslationX(1.5);
TranslationY
The TranslationY method sets the TranslationY property for the supplied VisualElement.
The following example will create a Label and set the Y translation delta to 2:
new Label().TranslationY(2.0);
ZIndex
The ZIndex method sets the ZIndex property for the supplied VisualElement.
The following example will create a Label and set the ZIndex to the value of 100:
new Label().ZIndex(100);
Examples
You can find an example of these extension methods in action throughout the .NET MAUI Community Toolkit Sample Application.
API
You can find the source code for the VisualElement extension methods over on the .NET MAUI Community Toolkit GitHub repository.
.NET MAUI Community Toolkit
Feedback
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see: https://aka.ms/ContentUserFeedback.
Submit and view feedback for