.NET MAUI 图像元素中断网格比率-解网

问：

我有一个网格，在第一个边框内有一些边框和图像：

    <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>

我想要的是这样的：

但是，如果我在网格的第一行添加图像，我会得到这张照片：

有人可以告诉我为什么图像会破坏布局吗？整个布局，如果你想玩：

    <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>

.NET XAML 用户界面 MAUI

<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>

这就是效果。

更新

创建一个新的干净项目，并且还与其他图像（如果它自己这样做的图像一样）可以修复它。

.NET MAUI 图像元素中断网格比率

.NET MAUI image element break Grid ratio

评论

评论