Xamarin.Forms 图像缩放挑战

如何解决Xamarin.Forms 图像缩放挑战

我有一个带有按钮行的应用。 我希望它在宽屏上看起来不错，但在纵向模式下的窄屏手机上也能很好看。

这些是可以显示的最大按钮数。

我想要

• 黄色部分要保持居中并占据其空间，就好像所有按钮都可见，即使它们不可见。 （总是至少有一个可见）
• 如果水平空间不足以容纳所有图像，则所有图像都要缩小（不仅仅是一些图像）。

我尝试了多种布局组合，这是我最接近实现目标的方法。 在当前状态下，当它变​​得太窄时，它只调整最后一个图像的大小，如果按钮不可见，黄色部分没有正确居中。

我最感兴趣的是如何确定要缩小哪些图像以使其适合，以及如何确保缩小所有图像。

<Grid Grid.Row="1" BackgroundColor="#0c2442" Padding="5" ColumnSpacing="10" HeightRequest="64">
       ​
           ​<Grid.ColumnDeFinitions>
               ​<ColumnDeFinition Width="*"></ColumnDeFinition>
               ​<ColumnDeFinition Width="Auto"></ColumnDeFinition>
               ​<ColumnDeFinition Width="*"></ColumnDeFinition>
           ​</Grid.ColumnDeFinitions>
       ​
       ​<Image Grid.Column="0" Source="home_blue.png" Aspect="AspectFit" HorizontalOptions="StartAndExpand" BackgroundColor="Aqua"></Image>

       ​<Grid Grid.Column="1" HorizontalOptions="CenterandExpand" ColumnSpacing="10" BackgroundColor="Yellow">
           ​<Grid.ColumnDeFinitions>
               ​<ColumnDeFinition Width="{Binding ArrowLeftVisible,Converter={StaticResource MyBoolToAutoGridLengthConverter}}"></ColumnDeFinition>
               ​<ColumnDeFinition Width="{Binding PlayOrPauseButtonVisible,Converter={StaticResource MyBoolToAutoGridLengthConverter}}"></ColumnDeFinition>
               ​<ColumnDeFinition Width="{Binding ArrowRightVisible,Converter={StaticResource MyBoolToAutoGridLengthConverter}}"></ColumnDeFinition>
           ​</Grid.ColumnDeFinitions>

           ​<Image Grid.Column="0" Source="arrow_left_blue.png" Aspect="AspectFit" IsVisible="{Binding ArrowLeftVisible}" HorizontalOptions="End"></Image>
           ​<Image Grid.Column="1" Source="play_blue.png" Aspect="AspectFit" IsVisible="{Binding PlayButtonVisible}"></Image>
           ​<Image Grid.Column="1" Source="pause_blue.png" Aspect="AspectFit" IsVisible="{Binding PauseButtonVisible}"></Image>
           ​<Image Grid.Column="2" Source="arrow_right_blue.png" Aspect="AspectFit" IsVisible="{Binding ArrowRightVisible}" HorizontalOptions="Start"></Image>
       ​</Grid>


       ​<Grid Grid.Column="2" HorizontalOptions="EndAndExpand" ColumnSpacing="10" BackgroundColor="Green">
           ​<Grid.ColumnDeFinitions>
               ​<ColumnDeFinition Width="Auto"></ColumnDeFinition>
               ​<ColumnDeFinition Width="Auto"></ColumnDeFinition>
           ​</Grid.ColumnDeFinitions>
           ​<Image Grid.Column="0" Source="textcontrols_blue.png" Aspect="AspectFit" IsVisible="{Binding ShowBookTextSettingsButtonVisible}"></Image>
           ​<Image Grid.Column="1" Source="showtext_blue.png" Aspect="AspectFit" IsVisible="{Binding showtextButtonVisible}"></Image>
           ​<Image Grid.Column="1" Source="showtext_active_blue.png" Aspect="AspectFit" IsVisible="{Binding HideTextButtonVisible}"></Image>
       ​</Grid>
   ​</Grid>

为了说明我在这里面临的问题，这是一个测试的结果。在这里，我在绿色部分添加了第三张图片（只是因为我的应用程序的 UWP 版本，我更喜欢在其中进行开发，不允许我拖动小于我想要完全看到效果的窗口）。 您可以看到绿色部分中的右侧图像正在调整大小，黄色部分中的左右箭头（但速度不同）和其他图像保持相同的高度。我不明白为什么只有这些图像在调整大小。

本次测试使用以下代码

        <Grid Grid.Row="1" BackgroundColor="#0c2442" Padding="5" ColumnSpacing="10" HeightRequest="64">
        
            <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="2*"></ColumnDeFinition>
                <ColumnDeFinition Width="3*"></ColumnDeFinition>
                <ColumnDeFinition Width="3*"></ColumnDeFinition>
            </Grid.ColumnDeFinitions>

        <Grid Grid.Column="0" BackgroundColor="Aqua">
            <Image  Source="home_blue.png" Aspect="AspectFit" HorizontalOptions="StartAndExpand" >
                <Image.GestureRecognizers>
                    <TapGestureRecognizer Command="{Binding GoToHomeCommand}" />
                </Image.GestureRecognizers>
            </Image>
        </Grid>

        <Grid Grid.Column="1"  ColumnSpacing="10" BackgroundColor="Yellow" >
            <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="*"></ColumnDeFinition>
                <ColumnDeFinition Width="Auto"></ColumnDeFinition>
                <ColumnDeFinition Width="*"></ColumnDeFinition>                    
            </Grid.ColumnDeFinitions>

            <Image Grid.Column="0" Source="arrow_left_blue.png" Aspect="AspectFit" IsVisible="{Binding ArrowLeftVisible}" HorizontalOptions="End"></Image>
            <Image Grid.Column="1" Source="play_blue.png" Aspect="AspectFit" IsVisible="{Binding PlayButtonVisible}"></Image>
            <Image Grid.Column="1" Source="pause_blue.png" Aspect="AspectFit" IsVisible="{Binding PauseButtonVisible}"></Image>
            <Image Grid.Column="2" Source="arrow_right_blue.png" Aspect="AspectFit" IsVisible="{Binding ArrowRightVisible}" HorizontalOptions="Start"></Image>
        </Grid>
        <Grid Grid.Column="2" ColumnSpacing="10" BackgroundColor="Green" HorizontalOptions="End">
            <Grid.ColumnDeFinitions>
                <ColumnDeFinition Width="Auto"></ColumnDeFinition>
                <ColumnDeFinition Width="Auto"></ColumnDeFinition>
                <ColumnDeFinition Width="Auto"></ColumnDeFinition>
            </Grid.ColumnDeFinitions>
            <Image Grid.Column="0" Source="textcontrols_blue.png" Aspect="AspectFit" IsVisible="{Binding ShowBookTextSettingsButtonVisible}"></Image>
            <Image Grid.Column="1" Source="showtext_blue.png" Aspect="AspectFit" IsVisible="{Binding showtextButtonVisible}"></Image>
            <Image Grid.Column="2" Source="textcontrols_blue.png" Aspect="AspectFit" IsVisible="{Binding ShowBookTextSettingsButtonVisible}"></Image>
        </Grid>
    </Grid>

解决方法

感谢@Jason 的建议。 我通过手动计算大小并绑定到计算出的大小来解决这个问题。