Zonus's questions

我正在参与另一个 .Net Maui 项目，并试图让事情看起来像我想要的那样。我希望图片显示为带有漂亮圆角的矩形。正在 iOS 中测试/调试；特别是模拟器。

我创建了一个新页面来展示我正在经历的事情。

尝试#1：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TestApp.TestPage"
         Title="Test">

<Grid BackgroundColor="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    
    <VerticalStackLayout Margin="20,20">
                <Border Stroke="Black" StrokeShape="RoundRectangle 10,10,10,10" StrokeThickness="2" BackgroundColor="LightBlue" HorizontalOptions="Start" VerticalOptions="Center" HeightRequest="75">
                    <Image Source="hamburger.jpg"  HeightRequest="75" WidthRequest="80" Aspect="AspectFill"></Image>
                </Border>
    </VerticalStackLayout>
    
    
</Grid>

</ContentPage>

这给出了结果：

图像的角没有被剪掉。

然后我尝试创建一个 imageButton，因为无论如何它们都会触摸所选内容并且其中会有文本。

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="TestApp.TestPage"
         Title="Test">

<Grid BackgroundColor="LightGray">
    <Grid.RowDefinitions>
        <RowDefinition Height="100"></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>

    <Border Stroke="Black" StrokeShape="RoundRectangle 10,10,10,10" StrokeThickness="4" BackgroundColor="LightGreen" Margin="10,10,10">
    <HorizontalStackLayout HeightRequest="80" WidthRequest="225" Spacing="15"  VerticalOptions="Start" HorizontalOptions="Start" >
        <ImageButton Source="hamburger.jpg" Margin="8" HeightRequest="100" WidthRequest="80" CornerRadius="10" HorizontalOptions="Start" VerticalOptions="Center"></ImageButton>
        <Label FontSize="20" FontAttributes="Bold" HorizontalOptions="Start" VerticalOptions="Center" BackgroundColor="Transparent">burger</Label>
    </HorizontalStackLayout>
    </Border>

</Grid>

</ContentPage>

我从该代码得到的结果是这样的：

imageButton 有漂亮的圆角，但图像没有。我在 imageButton 中使用了圆角半径，但这让事情看起来很奇怪。它看起来也像是将左侧和右侧与角落进行了圆化。按钮本身看起来正是我想要的样子。形象没那么多。

我正在寻找的是这样的：

FreakyAli 的代码提供了以下内容：

特雷弗的理念：