XAML .NET MAUI Create square SKCanvasView

bvn4nwqk  于 2023-03-27  发布在  .NET
关注(0)|答案(1)|浏览(138)

我正在将一个应用程序从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版本最初什么都不显示,直到你旋转屏幕一次,然后它表现出同样的问题。

xuo3flqw

xuo3flqw1#

不知道为什么Xamarin.Forms会这样做,因为你实际上绑定到了Grid的大小,同时你也告诉Grid根据可用的宽度调整自己的大小,并根据内容自动调整行的高度。无论如何,你的方法很可能会导致过多的布局周期。
要解决这个问题,你可以给予Grid的SKCanvasView元素一个固定的宽度和高度,或者你需要根据Grid的Width属性来设置HeightRequest

XAML语言

<Grid x:Name="compassGrid"
      Margin="50,10"
      HorizontalOptions="Fill"
      HeightRequest="{Binding Width, Source={RelativeSource Self}}">
    <skia:SKCanvasView x:Name="compassCanvasView" PaintSurface="compassCanvasView_PaintSurface"
                       HeightRequest="{Binding Height, Source={x:Reference compassGrid}}"
                       WidthRequest="{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>

请注意,这只在 Portrait 模式下看起来不错。如果您需要同时支持 Landscape 模式,您需要从代码隐藏中设置WidthRequestHeightRequest,或者您可以使用 OrientationStateTriggers 来响应方向更改。

相关问题