Autosizing images in xamarin forms layouts

Question

i'm very new to xamarin forms so, sorry if i ask obvious question. I need to build a frame with labels and pictures within. It should look like the following

By now i tried this:

<Frame OutlineColor="#2e5982"
    BackgroundColor="#2e5982"
    HorizontalOptions="Fill"
    Grid.Column="0"
    Margin="0">
    <Frame.Content>
        <StackLayout Orientation="Vertical" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Label x:Name="LbSecsHead" Font="Arial" TextColor="White" Text="Status" HorizontalOptions="Center"/>
            <Grid HorizontalOptions="Fill" VerticalOptions="Fill">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50*"/>
                    <ColumnDefinition Width="50*"/>
                </Grid.ColumnDefinitions>
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="0">
                    <StackLayout Orientation="Horizontal" BackgroundColor="Accent">
                        <Image x:Name="SignalSec6" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOff.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
                        <Label Font="Arial" TextColor="White" Text="6" HorizontalOptions="Center"/>
                    </StackLayout>
                </StackLayout>
                <StackLayout Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Grid.Column="1">
                    <StackLayout Orientation="Horizontal">
                        <Image x:Name="SignalSec5" Source="{local:ImageResource Fusion.Pictures.GreenSignalMaterialOn.png}" Aspect="Fill" HorizontalOptions="Start" VerticalOptions="Start"/>
                        <Label Font="Arial" TextColor="White" Text="5" HorizontalOptions="Center"/>
                   </StackLayout>                                        
               </StackLayout>
           </Grid>
       </StackLayout>
   </Frame.Content>
</Frame>

The frame is inside a grid column of an outer layout, and here i just limited to the first two icons since result is the same for multiple identical items stacked vertically. Regardless of many tryouts i've done with Horizontal and Vertical options i always obtain this:

The frame sizing with respect to outer layout is correct but not the elements inside. Strange think (at least to me) is that picture looks like being outside of the stacklayout as can be seen by the pink background of the layout. Basically i need the pictures to autofit the layout.

Any hint would be appreciated

Thanks

LeRoy LeRoy · Accepted Answer · 2018-08-28T11:44:47

You'll need to use Span :

Spans – configure elements to span across multiple rows or columns.

<Label Text="SEC" FontSize="40" HorizontalOptions="CenterAndExpand"/>
<Grid HorizontalOptions="CenterAndExpand">
  <Grid.RowDefinitions>
    <RowDefinition Height="80" /> 
    <RowDefinition Height="80" /> 
    <RowDefinition Height="80" /> 
    <RowDefinition Height="80" /> 

  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="80" />
    <ColumnDefinition Width="80" />
  </Grid.ColumnDefinitions>

 <StackLayout Grid.Row="0" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="6" FontSize="30" TextColor="Gray" /> 
 </StackLayout>

 <StackLayout Grid.Row="1" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="4" FontSize="30" TextColor="Gray" /> 
 </StackLayout>            

 <StackLayout Grid.Row="2" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="2" FontSize="30" TextColor="Gray" /> 
 </StackLayout>             

 <StackLayout Grid.Row="3" Grid.Column="0" VerticalOptions="CenterAndExpand" Orientation="Horizontal">
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="0" FontSize="30" TextColor="Gray" />    
 </StackLayout>


 <StackLayout Grid.Row="0" Grid.RowSpan="2" Grid.Column="1"
              VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="5" FontSize="30" TextColor="Gray" /> 
 </StackLayout>           


 <StackLayout Grid.Row="1" Grid.RowSpan="2" Grid.Column="1"
              VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="3" FontSize="30" TextColor="Gray" />  
 </StackLayout>          

 <StackLayout Grid.Row="2" Grid.RowSpan="2" Grid.Column="1"
              VerticalOptions="CenterAndExpand" Orientation="Horizontal" >
              <Image HeightRequest="30" WidthRequest="30" Source="https://www.warm-glass.co.uk/images/products/20cm-deep-royal-blue-precut-glass-circle-11145052.jpg" />
              <Label Text="1" FontSize="30" TextColor="Gray" />  
 </StackLayout> 


</Grid>

Autosizing images in xamarin forms layouts

1 Answers