Empty space above and under images in grid

Question

I am working on images in grid layout and i have problem with empty space below and above images. I would like these rows with dates to be exactly below icons without any empty space and to make icons with size just like they are on picture. When i use aspect fit, it makes icons streched vertically. I tried to set fixed size of row but it made a crap view when I rotaded phone.

 <Grid
                RowSpacing="0"
                VerticalOptions="Center"
               >
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition Height="30"/>
                </Grid.RowDefinitions>

                <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                    <ColumnDefinition />

                </Grid.ColumnDefinitions>
                <Image Source="kafelek_1.png" 
                       Grid.Column="0" Grid.Row="0"
                        ></Image>
                <Image Source="kafelek_2.png"
                       Grid.Column="1" Grid.Row="0"
                       ></Image>
                <Image Source="kafelek_3.png"
                       Grid.Column="2" Grid.Row="0" 
                       ></Image>
                <StackLayout BackgroundColor="#0078B7"
                             Grid.Column="0" Grid.Row="1"
                             Orientation="Horizontal"
                              HeightRequest="20"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Image Source="trojkat.png">
                    </Image>
                    <Label Text="Temp"
                           x:Name="DecisionDateLabel"></Label>

                </StackLayout>
                <StackLayout BackgroundColor="#0078B7"
                             Grid.Column="1" Grid.Row="1"
                             Orientation="Horizontal"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Image Source="trojkat.png"></Image>
                    <Label Text="Temp"
                           x:Name="KnowledgeDateLabel"></Label>

                </StackLayout>
                <StackLayout BackgroundColor="#0078B7"
                             Grid.Column="2" Grid.Row="1"
                             Orientation="Horizontal"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="FillAndExpand">
                    <Image Source="trojkat.png"></Image>
                    <Label Text="Temp"
                           x:Name="PollsDateLabel"></Label>

                </StackLayout>
            </Grid>

Generally, this is what i would like to obtain:

This happens because your image aspect ratio is preserved. You are setting height of the second row but your first row scales according to the size of the width, so your vertical alignment between 2 rows is not going to happen. If you tell me what are sizes of your 2 images I can take a look what else can be done. Is it an option to adjust images sizes if necessary? — Yuri S, Jul 10 '17 at 20:26
You can specify Height for the first row too and then play with 2 rows heights to find the ratio you need. Another option is not to use grid but use all stack layouts or relative layout — Yuri S, Jul 10 '17 at 20:32
If you set the 'HeightRequest' for your Images in first row you will remove that extra space. — Almir Vuk, Jul 10 '17 at 22:31

Yuri S · Answer 1 · 2017-07-19T23:00:23.150

0

This bug is created in bugzilla https://bugzilla.xamarin.com/show_bug.cgi?id=55294

You can actually try to implement workaround How can I make an image auto-resize so the width is 100% and the height adjusted accordingly?

edited Jul 19 '17 at 23:00

answered Jul 11 '17 at 19:03

Yuri S

5,355
1
15
23

Empty space above and under images in grid

1 Answers1