Xamarin.Forms 图像缩放挑战

Posted 2023-03-17

【中文标题】Xamarin.Forms 图像缩放挑战

【英文标题】：Xamarin.Forms Image scaling challenge

【发布时间】：2021-07-22 14:56:53

【问题描述】：

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

这些是最多可以显示的 nr 个按钮。

我想要

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

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

我很好奇如何确定要缩小哪些图像以使其适合，以及如何确保所有图像都按比例缩小。

<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>

【问题讨论】：

这是您可能需要编写代码来处理而不是尝试仅使用 XAML 来处理的事情

【参考方案1】：

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