Reputation: 222
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:
But if I add the Image in the first row of the grid I get this picture:
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
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
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