Xamarin.Forms 图像缩放挑战

Question

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

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

我要

黄色部分保持居中并声称其 space 就好像所有按钮都可见，即使它们不可见。（总是至少有一个可见）
如果水平 space 不够大，无法容纳所有图片，则所有图片都可以缩小（不仅仅是一些）。

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

我主要想知道如何确定要缩小哪些图像以使其适合，以及如何确保所有图像都被缩小。

<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 版本，我更喜欢在其中进行开发，不允许我将 window 拖动得比我想完全看到效果的要小） . 您可以看到绿色部分中的右侧图像正在调整大小，黄色部分中的左右箭头（但速率不同）和其他图像保持相同的高度。我不明白为什么只有这些图像在调整大小。

本次测试使用以下代码

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

Answer 1

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

Xamarin.Forms 图像缩放挑战

Xamarin.Forms Image scaling challenge

layout

scaling

xaml

image

xamarin.forms