iwanlenin
iwanlenin

Reputation: 222

.NET MAUI image element break Grid ratio

I have a Grid, with some border and image inside first border:

    <Grid Margin="15" RowDefinitions=".4*,.1*,.1*,.4*">
    <Border
        Grid.Row="0"
        Grid.RowSpan="2"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>
        <Image               
            Aspect="AspectFill"
            Source="cup.jpg" />
    </Border>
What I want is something like that:

Layout without Image Element

But if I add the Image in the first row of the grid I get this picture:

Same layout with Image Element

Can someone tell me why the Image breaks the layout? Whole Layout if you want to play with:

    <Grid
    Margin="15"
    RowDefinitions=".4*,.1*,.1*,.4*">
    <Border
        Grid.Row="0"
        Grid.RowSpan="2"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>
        <Image               
            Aspect="AspectFill"
            Source="cup.jpg" />
    </Border>


    <Border
        Grid.Row="1"
        Grid.RowSpan="1"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>

    </Border>
    <Border
        Grid.Row="2"
        Grid.RowSpan="1"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>

    </Border>
    <Border
        Grid.Row="3"
        Grid.RowSpan="1"
        Stroke="{StaticResource DarkGray}">
        <Border.StrokeShape>
            <RoundRectangle
                CornerRadius="35,35,35,35" />
        </Border.StrokeShape>

    </Border>
</Grid>

Upvotes: 0

Views: 95

Answers (2)

iwanlenin
iwanlenin

Reputation: 222

Did not get to the root cause of the issue, but after multiple restart and clean of the solution it somehow displayed the elements in the right way: Final Result

Upvotes: 0

Jianwei Sun - MSFT
Jianwei Sun - MSFT

Reputation: 4332

I test the code you provided but it works well. Here is the whole .xaml code:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp3.MainPage"
             BackgroundColor="Black">
    <Grid Margin="15"
          RowDefinitions=".4*,.1*,.1*,.4*">
        <Border Grid.Row="0"
                Grid.RowSpan="2"
                Stroke="Black">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="35,35,35,35" />
            </Border.StrokeShape>
            
            <Image Aspect="AspectFill"
                   Source="sum.jpg" />
        </Border>


       <Border Grid.Row="1" Grid.RowSpan="1" Stroke="{StaticResource DarkGray}">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="35,35,35,35" />
            </Border.StrokeShape>


       </Border>


       <Border Grid.Row="2" Grid.RowSpan="1" Stroke="{StaticResource DarkGray}">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="35,35,35,35" />
            </Border.StrokeShape>
        </Border>


       <Border Grid.Row="3" Grid.RowSpan="1" Stroke="{StaticResource DarkGray}">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="35,35,35,35" />
            </Border.StrokeShape>
            <Image Aspect="AspectFill" Source="sss.png" />
        </Border>
    </Grid>
</ContentPage>

This is the effect.

Update

Creating a new clean project and also with other images (in case the image it self do so effect) can fix it.

Upvotes: 1

Related Questions