Estou em outro projeto .Net Maui e estou tentando fazer com que as coisas fiquem como eu quero. Quero que a imagem apareça como um retângulo com belos cantos arredondados. Isso está sendo testado/depurado no iOS; especificamente o simulador.
Criei uma nova página para mostrar o que estou vivenciando.
Tentativa nº 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>
E isso dá o resultado disso:
A imagem não tem os cantos cortados.
Tentei então criar um imageButton porque eles tocariam na seleção de qualquer maneira e haveria texto com ele.
<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>
O resultado que obtive desse código é este:
O imageButton tem cantos arredondados e bonitos, mas a imagem não. Eu brinquei com o raio do canto no imageButton, mas isso faz as coisas parecerem estranhas. Também parece que está arredondando os lados esquerdo e direito em relação aos cantos. O botão em si parece exatamente do jeito que eu quero. A imagem nem tanto.
O que estou procurando é algo assim:
O código do FreakyAli forneceu isto:
O conceito de Trevor:
