主页 / coding / 问题 / 77841635
Accepted
Zonus
Asked: 2024-01-19 02:22:56 +0800 CST

在图像上获取圆角

  • 772

我正在参与另一个 .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>

这给出了结果：

尝试1

图像的角没有被剪掉。

然后我尝试创建一个 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>

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

尝试2

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

我正在寻找的是这样的：

我想要的是

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

在此输入图像描述

特雷弗的理念：

在此输入图像描述

maui

2 个回答

  1. Best Answer

    您现在应该做的是向实际图像控件以及整个控件添加边框，无论您需要添加边框，都必须是该控件的子控件，这样您的 XAML 将如下所示：

             <Border Stroke="Black"
            StrokeShape="RoundRectangle 10"
            StrokeThickness="4"
            BackgroundColor="LightGreen">
        <Grid ColumnSpacing="10" ColumnDefinitions="3*,7*">
            <Border Grid.Column="0"
                    Margin="5"
                    Stroke="Transparent"
                    StrokeThickness="0"
                    StrokeShape="RoundRectangle 10" >
                <Image Source="https://www.shutterstock.com/image-photo/burger-tomateoes-lettuce-pickles-on-600nw-2309539129.jpg"
                       VerticalOptions="Center"/>
            </Border>
            <Label Grid.Column="1"
                   FontSize="20"
                   VerticalTextAlignment="Center"
                   Text="Burger"
                   FontAttributes="Bold"/>
        </Grid>
    </Border>

    在此输入图像描述

    我给您的另一个建议是不要在任何地方使用高度和宽度请求，因为这不会根据设备进行缩放，检查网格并根据您的要求开始使用它。

    如果有任何疑问请告诉我

    • 1

  2. 看起来使用Image.Clipwith 的Xamarin.Forms 方法EllipseGeometry仍然可以用于圆化图像的角。它似乎不能很好地运行Image.BackgroundColor（至少在 Android 上）。这是一个例子：

    <Image
    Source="dotnet_bot.png"
    MaximumHeightRequest="80"
    MaximumWidthRequest="80">
    <Image.Clip>
        <EllipseGeometry RadiusX="40" RadiusY="40" Center="40,40" />
    </Image.Clip>
</Image>
    • 0

相关问题