英文:
Rounded frame renders differently for each platform
问题
我开始使用MAUI创建应用程序，因为我以前使用Xamarin并且非常喜欢它。现在，我有一个简单的ListView，我想在其中显示一个包含名称、描述和字典标志的模型。在ListView.ItemTemplate中，我有一个DataTemplate和一个ViewCell。
<ListView x:Name="listDictionaries" ItemsSource="{Binding Dictionaries}"
SelectionMode="Single" HasUnevenRows="True"
CachingStrategy="RecycleElement"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="10" ColumnSpacing="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame BorderColor="White"
CornerRadius="50"
HeightRequest="50"
WidthRequest="50"
IsClippedToBounds="True"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Image Source="uk.png"
Aspect="AspectFill"
HeightRequest="50"
WidthRequest="50" />
</Frame>
<Frame BorderColor="White"
CornerRadius="30"
HeightRequest="30"
WidthRequest="30"
IsClippedToBounds="True"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
TranslationX="-15"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Image Source="it.png"
Aspect="AspectFill"
HeightRequest="30"
WidthRequest="30" />
</Frame>
<Label Text="{Binding Name}"
FontSize="18"
FontAttributes="Bold"
Grid.Column="1" />
<Label Text="{Binding Description}"
FontSize="12"
Grid.Column="1" Grid.Row="1" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
我的想法是在一个圆形框架中显示一个大的国旗SVG图像，然后在主图像的右下方显示另一个较小的国旗SVG图像。为此，我使用了TranslationX。
在Android上，页面的渲染是我期望的（如下面的截图中间部分），iOS上是封闭的，Windows上完全错误。
是否可能在每个平台上获得相同的渲染效果？
英文:
I'm starting to create apps with MAUI because I used to work with Xamarin and I loved it. Now, I have a simple ListView where I want to display a model that contains a name, description and flags for a dictionary. In the ListView.ItemTemplate I have a DataTemplate and a ViewCell.
<ListView x:Name="listDictionaries" ItemsSource="{Binding Dictionaries}"
SelectionMode="Single" HasUnevenRows="True"
CachingStrategy="RecycleElement"
HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<Grid RowSpacing="10" ColumnSpacing="10"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Frame BorderColor="White"
CornerRadius="50"
HeightRequest="50"
WidthRequest="50"
IsClippedToBounds="True"
HorizontalOptions="Center"
VerticalOptions="Center"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Image Source="uk.png"
Aspect="AspectFill"
HeightRequest="50"
WidthRequest="50" />
</Frame>
<Frame BorderColor="White"
CornerRadius="30"
HeightRequest="30"
WidthRequest="30"
IsClippedToBounds="True"
HorizontalOptions="EndAndExpand"
VerticalOptions="EndAndExpand"
TranslationX="-15"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Image Source="it.png"
Aspect="AspectFill"
HeightRequest="30"
WidthRequest="30" />
</Frame>
<Label Text="{Binding Name}"
FontSize="18"
FontAttributes="Bold"
Grid.Column="1" />
<Label Text="{Binding Description}"
FontSize="12"
Grid.Column="1" Grid.Row="1" />
</Grid>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
My idea is to display a big flag SVG image in a round frame and another flag SVG image smaller on the bottom right of the main image. For that, I use TranslationX.
The render of the page in Android is what I expect (in the middle in the screenshot below), iOS is closed and Windows is completely wrong.
Is it possible to obtain the same render for every platform?
答案1
得分: 2
谢谢 Jason，问题是 Frame 在 MAUI 中已被弃用。
所以，使用以下代码，渲染在 Windows 和 Android 上是正确的，但在 iOS 上不正确。为了修复 iOS，你必须将图像包装在一个网格中。
<Border HeightRequest="50"
WidthRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center"
StrokeShape="RoundRectangle 50"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Grid>
<Image Source="uk.png"
Aspect="AspectFill"
HeightRequest="50"
WidthRequest="50" />
</Grid>
</Border>
<Border HeightRequest="30"
WidthRequest="30"
HorizontalOptions="End"
VerticalOptions="End"
TranslationX="-15"
StrokeShape="RoundRectangle 30"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Grid>
<Image Source="it.png"
Aspect="AspectFill"
HeightRequest="30"
WidthRequest="30" />
</Grid>
</Border>
iOS 的解决方法
要解决 iOS 的问题，必须将 Image 包装在一个 Grid 中。
英文:
Thank you to Jason, the problem was that Frame is deprecated in MAUI.
So, with the following code, the render is correct for Windows and Android but not for iOS. In order to fix iOS, you have to wrap the image in a grid.
<Border HeightRequest="50"
WidthRequest="50"
HorizontalOptions="Center"
VerticalOptions="Center"
StrokeShape="RoundRectangle 50"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Grid>
<Image Source="uk.png"
Aspect="AspectFill"
HeightRequest="50"
WidthRequest="50" />
</Grid>
</Border>
<Border HeightRequest="30"
WidthRequest="30"
HorizontalOptions="End"
VerticalOptions="End"
TranslationX="-15"
StrokeShape="RoundRectangle 30"
Grid.RowSpan="2" Grid.Column="0" Grid.Row="0">
<Grid>
<Image Source="it.png"
Aspect="AspectFill"
HeightRequest="30"
WidthRequest="30" />
</Grid>
</Border>
Workaround for iOS
To fix the issue with iOS, the Image has to be wrapped in a Grid.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论