Search code examples
imagexamlxamarin.formslayoutscaling

Xamarin.Forms Image scaling challenge

I have an app that has a button row. I want it to look good on wide screens, but also on narrow phones in portrait mode.

enter image description here

These are the maximum nr of buttons that can be shown.

I want

  • ​the yellow part to be kept centered and claim its space as if all buttons where visible, even when they are not. (there is always at least one visible)
  • ALL of the images to scale down (not just some), if the horizontal space is not large enough to accomodate them all.

I have tried multiple layout combinations and this is the closest I've come to achieving my goal. In the current state it resizes only the last image when it get's too narrow, and the yellow part is not centered correctly if a button is not visible.

I'm mostly curious on how it is determined what image to scale down to make stuff fit, and how to make sure ALL images are scaled down.

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

To illustrate the problem I'm facing here is the result of a test. Here I added a 3rd image to the green section (just because the UWP version of my app, where I prefer to do developing, does not allow me to drag the window smaller than I would like to fully see the effect). You can see that the right image in the green section is resizing and the left and right arrows in the yellow section (but at a different rate) and the other images stay the same height. I can't figure out why only these images are resizing. enter image description here

This test uses the following code

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

  • Thanks @Jason for the suggestion. I fixed the situation by calculating the size manually and binding to the calculated size.