How can I animate a MAUI Border from a fixed width to full width (HorizontalOptions=Fill) ?

[RedEye-Developers]

2025-12-08.18-52-47.mp4

I am trying to animate a Border the same way as shown in this video.
The minimum width of the border is 50, which I already know.

The problem is that I don’t know the maximum width, because the border is inside a Grid where I use margins to control its final size. Since the layout width is determined dynamically at runtime, I cannot calculate the exact value.

How can I animate the border from WidthRequest = 50 to the equivalent of HorizontalOptions="Fill" when the actual “fill width” is unknown?

[MerSpyro]

Well, I guess you know the width of its parent and the size of Margin. So the final would be, for example, Parent.Width - Margin.Right.

[RedEye-Developers]

i tryed Parent.Width it is always return -1, if i set the Width to Ui Element it is return the width, but i am not using fix width for any Ui Element.

[jingliancui]

try widthrequest

[RedEye-Developers]

i tryed that also it is also returing -1 value.

[jingliancui]

try get them from sizechanged or override onsizeallocate

[RedEye-Developers]

sry i made a small mistake, i get the UiElement.Width before the UiElement was fully loaded on screen, so it is always return -1 Value, after the UiElement Fully Loaded on Screen i get perfect value, thanks for the help.

[RedEye-Developers]

UiElement.Width return perfect value after the UiElement Fully Loaded on Screen.

<Border Loaded="GoogleLoginBorder_OnLoaded"/>

private async void GoogleLoginBorder_OnLoaded(object? sender, EventArgs e)
{
    await Task.Delay(500);
    var border = (Border)sender;
    Console.WriteLine(border.Width);
    Console.WriteLine(border.Height);
}