CODEWITHSUNDEEP
xamarinxamarin.forms
Pilling Fine
Pilling Fine

Reputation: 143

Half Screen-Width Sized Layouts (With Images in them)

I want to have a layout where two images (whose widths are responsive to the screen size), side by side and AUTOFILL the container in which they are without clipping or living spaces.

I have used a grid-view, but the row tends to get the height of the image before it resizes, thereby leaving a space above and below the image.

            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="5*" x:Name="colFirst"/>
                    <ColumnDefinition Width="5*" x:Name="colSecond" />
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Image Source="avatar.png" Grid.Column="0" Grid.Row="0"/>
                <Label Text="Item1" Grid.Column="0" Grid.Row="1"/>

                <Image Source="avatar.png" Grid.Column="1" Grid.Row="0"/>
                <Labe Text="Item2" Grid.Column="1" Grid.Row="1"/>
            </Grid>

The images are square images. How can i achieve this is Xamarin?

Upvotes: 0

Views: 1973

Answers (1)

gannaway
gannaway

Reputation: 1882

Set the height of the images whenever the width changes. This can be done in the code-behind or in XAML. Here's an example of doing it in XAML:

<Grid BackgroundColor="Black" 
      VerticalOptions="Center">

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="5*" x:Name="colFirst"/>
        <ColumnDefinition Width="5*" x:Name="colSecond" />
    </Grid.ColumnDefinitions>

    <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <Image x:Name="img1" Grid.Column="0" Grid.Row="0"
           HeightRequest="{Binding Width, Source={x:Reference img1}}"
           Source="stackoverflow.png" />

    <Label Grid.Column="0" Grid.Row="1"
           HorizontalTextAlignment="Center"
           Text="Item1" 
           TextColor="White" />

    <Image x:Name="img2" Grid.Column="1" Grid.Row="0"
           HeightRequest="{Binding Width, Source={x:Reference img2}}"
           Source="stackoverflow.png" />

    <Label Grid.Column="1" Grid.Row="1"
           HorizontalTextAlignment="Center"
           Text="Item2"
           TextColor="White" />

</Grid>

enter image description here

Upvotes: 1

Related Questions