我正在将一个应用程序从Xamarin移植到MAUI。我试图创建一个方形的SkiaSharp SKCanvasView。它位于Grid中,因为我正在oerlaying 2个SVG图像和一个Label。这是我在Xamarin中的操作:
<Grid x:Name="compassGrid" Margin="50,10">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<skia:SKCanvasView x:Name="compassCanvasView" PaintSurface="compassCanvasView_PaintSurface"
HeightRequest="{Binding Width, Source={x:Reference compassGrid}}"
MinimumHeightRequest="{Binding Height, Source={x:Reference compassGrid}}"
WidthRequest="{Binding Height, Source={x:Reference compassGrid}}"
MinimumWidthRequest="{Binding Width, Source={x:Reference compassGrid}}"/>
<skia:SKCanvasView x:Name="arrowCanvasView" PaintSurface="arrowCanvasView_PaintSurface" />
<Label Text="{Binding CompassReading}"
TextColor="{StaticResource Gray-300}"
FontSize="40"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"/>
</Grid>
这很有效,结果是:
现在,使用MAUI,同样不起作用并导致以下结果:
图像基本上是椭圆形而不是圆形。然后当我旋转指南针时,很明显较长的边在画布之外,是矩形而不是正方形。
我怎样才能让它看起来像以前一样?
编辑:
根据@FreakyAli的要求,这里是Xamarin和MAUI(https://github.com/NemesisXB/CompassXamMaui)的示例应用程序。Maui版本最初什么都不显示,直到你旋转屏幕一次,然后它表现出同样的问题。
1条答案
按热度按时间xuo3flqw1#
不知道为什么Xamarin.Forms会这样做,因为你实际上绑定到了Grid的大小,同时你也告诉Grid根据可用的宽度调整自己的大小,并根据内容自动调整行的高度。无论如何,你的方法很可能会导致过多的布局周期。
要解决这个问题,你可以给予Grid的
SKCanvasView
元素一个固定的宽度和高度,或者你需要根据Grid的Width
属性来设置HeightRequest
:XAML语言
请注意,这只在 Portrait 模式下看起来不错。如果您需要同时支持 Landscape 模式,您需要从代码隐藏中设置
WidthRequest
和HeightRequest
,或者您可以使用 OrientationStateTriggers 来响应方向更改。