How can I force a .NET MAUI ContentView to fill the entire remaining space of its FlexLayout parent?

Question

I have the following custom control XAML in a .NET Core MAUI project:

<?xml version="1.0" encoding="UTF-8"?>
<ContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyNamespace.LabelledEntry"
    x:Name="this">
    <VerticalStackLayout BindingContext="{x:Reference this}">
        <Border Stroke="Red" StrokeThickness="2">
            <FlexLayout>
                <Label Text="{Binding LabelText}" />
                <Border Stroke="Black" StrokeThickness="1">
                    <!-- This is the main line that seems to not be working as expected -->
                    <ContentView FlexLayout.Grow="1">
                        <ContentView.Triggers>
                            <DataTrigger Binding="{Binding IsRightAligned}" TargetType="ContentView" Value="True">
                                <Setter Property="Content">
                                    <Setter.Value>
                                        <!-- The HorizontalTextAlignment attribute on this element is all that I
                                        *really* want to work, and the only reason that I'm using this whole over-
                                        complicated inner ContentView -->
                                        <Entry Margin="{Binding EntryMargin}" Text="{Binding EntryText}" HorizontalTextAlignment="End" />
                                    </Setter.Value>
                                </Setter>
                            </DataTrigger>
                        </ContentView.Triggers>
                        <Entry Margin="{Binding EntryMargin}" Text="{Binding EntryText}" HorizontalTextAlignment="Start" />
                    </ContentView>
                </Border>
            </FlexLayout>
        </Border>
        <Line Margin="0, -5, 0, 0" Stroke="Black" StrokeThickness="2" X2="{Binding Width, Source={RelativeSource Self}}" />
    </VerticalStackLayout>
</ContentView>

And here's how it's used:

<Grid Colum<?xml version="1.0" encoding="utf-8" ?>
<ContentPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:converters="clr-namespace:Microsoft.Maui.Converters;assembly=Microsoft.Maui"
    xmlns:local="clr-namespace:MyNamespace"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyNamespace.MainPage"
    x:Name="TestView">
    <Grid ColumnDefinitions="0.7*, 0.3*">
        <VerticalStackLayout Grid.Column="0" Grid.Row="0" Margin="15, 25, 0, 0" Spacing="10">
            <Grid ColumnDefinitions="0.75*, 0.25*">
                <local:LabelledEntry EntryText="vdsvdsvdfsvfvsdfv" Grid.Column="0" LabelText="Email:" />
                <local:LabelledEntry EntryText="vfdvdfbvdfb" Grid.Column="1" LabelText="Attn:" />
            </Grid>
            <local:LabelledEntry EntryText="fdfbfdbbdfb" LabelText="To:" />
            <local:LabelledEntry EntryMargin="38, -10, 0, 0" EntryText="vdsvdsvdsvdsvdsvds" LabelText="" />
        </VerticalStackLayout>
        <VerticalStackLayout Grid.Column="1" Grid.Row="0" Margin="50, 25, 0, 0" Spacing="10">
            <local:LabelledEntry EntryText="{Binding Source={x:Static system:DateTime.Now}, StringFormat='{0:d/MM/yyyy}'}" LabelText="Date:" IsRightAligned="True" />
            <local:LabelledEntry EntryText="(00) 0000 0000" LabelText="Phone No. 1:" IsRightAligned="True" />
            <local:LabelledEntry EntryText="ujhghjbvjkgv" LabelText="Contact Name:" />
        </VerticalStackLayout>
    </Grid>
</ContentPage>

There is no code behind for this control, and it looks like the red-bordered elements in this screenshot¹:

As mentioned in the code's comments, all I really want to be able to do is right-align the text of some of these <LabelledEntry> controls, while defaulting to left alignment. So if I'm over-complicating this, please let me know, but from all of my research it really seems as though this level of complexity is necessary.

The inner black-bordered ContentViews are what I'm trying to make grow. According to this docs page from Microsoft:

The Grow property, of type float, specifies the amount of available space the child should use on the main axis. The default value of this property is 0.0, and its value must be greater than or equal to 0.

The Grow property is used when the Wrap property is set to NoWrap and a row of children has a total width less than the width of the FlexLayout, or a column of children has a shorter height than the FlexLayout. The Grow property indicates how to apportion the leftover space among the children. If a single child is given a positive Grow value, then that child takes up all the remaining space. Alternatively, the remaining space can also be allocated among two or more children.

So if I'm understanding that correctly, my code should do what I expect - make the inner <ContentView>s expand to fill their parent, so that the HorizontalTextAlignment attribute does what it suggests - but obviously this is not the case, since the date and phone number aren't right-aligned, and their borders show that they aren't full-width either.

So what am I doing wrong here? MTIA :-)

¹: In case it's not obvious, the borders and margins are just to help visualise the width of all relevant elements and were added purely for this demonstration.

Answer 1

Here is what the screenshot above should look like:

Perhaps I should have been clearer/more concise, but the point of my question was "How can I make the controls grow to fill the available space AND right-align their text, based upon an attribute".

I suspect this was caused by the Hot Reload feature in .NET Core/Visual Studio being very buggy and not actually reloading various parts of an (or an entire) element(s) immediately after the code has changed.

But even after several stop/start cycles of debugging the project, an entire rebuild was necessary to correctly show my changes after adding the IsRightAligned attribute to my LabelledEntry.