I don't want my elements to be reassigned when the element set as IsVisible="false" has been changed to IsVisible="false"

Question

I'm creating a mobile app using .net MAUI I'm hiding one element and making it visible in button action. That time other elements got rearrange.

<VerticalStackLayout
    VerticalOptions="Center"
    Padding="30,0"
    Spacing="25">
    <Image
        x:Name="ThinkWing"
        Source="pngwing.png"
        WidthRequest="200"
        IsVisible="false"
        Aspect="AspectFit"
        VerticalOptions="Center"/>
   <Label
       Text="Welcome! "
       Style="{StaticResource Headline}"
       SemanticProperties.HeadingLevel="Level1" />
   <Button
        x:Name="CounterBtn"
        Text="Hit me if you can" 
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="OnCounterClicked"
        BorderColor="Black"
        BorderWidth="3"
        BackgroundColor="CadetBlue"
        TextColor="Black"
        HorizontalOptions="Fill" />
</VerticalStackLayout>

This is in my XAML file and I change IsVisible="true" when the button is clicked.

So what happens is. When my app loaded I can see the Label and Button center of my screen. When the button clicked, the hidden image has appeared in top so that other two elements got pushed down. But I don't want this to be happen like this unless it can allocate the space for hidden element when the screen loaded.

Thanks :)

Answer 1

As I understand it, you have a "hidden image" that should be superimposed on top of another element in response to Clicked without changing the VerticalStackLayout.

One basic strategy would be to use a Grid control to reserve the vertical space. The behavior of Grid is that the the elements you add to a row or column will "layer up" on each other instead of "flow" as is the case with VerticalStackLayout.

<VerticalStackLayout
    VerticalOptions="Center"
    Padding="30,0"
    Spacing="25">
    <Grid HeightRequest="60">
        <Label
            x:Name="labelWelcome"
                Text="Welcome! "
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />
        <Frame                    
            x:Name="ThinkWing"
            BorderColor="Transparent"
            Padding="1"
            IsVisible="False"
            BackgroundColor="White">
            <Image Source="dotnet_bot.png" />
        </Frame>
    </Grid>
    <Button
        x:Name="CounterBtn"
        Text="Hit me if you can" 
        SemanticProperties.Hint="Counts the number of times you click"
        Clicked="OnCounterClicked"
        BorderColor="Black"
        BorderWidth="3"
        BackgroundColor="CadetBlue"
        TextColor="Black"
        HorizontalOptions="Fill" />
</VerticalStackLayout>