Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Image Auto Height inside the Grid Layout issue

$
0
0

Hi Team,

I am working on Sample application to create "like Tile Design with Scroll-able layout".

While setting the Grid.ColumnSpan property to Stack layout or Image the height of the image is not set and collapsed.

Kindly suggest to Auto adjust the height for the image.

Output screen shot:
1drv.ms/1VaPil1

Xaml Code:

<ContentPage.Content>
    <ScrollView x:Name="scrollview_MainLayout" HorizontalOptions = "Fill" Orientation="Vertical" VerticalOptions="StartAndExpand" >      
      <StackLayout HorizontalOptions = "Fill" Orientation="Vertical" VerticalOptions="StartAndExpand">     
         <!-- First Row -->
         <StackLayout HorizontalOptions = "Fill" Orientation="Horizontal" VerticalOptions="StartAndExpand">          
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="4*" /> <ColumnDefinition Width="4*" /> <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>         
          <StackLayout HorizontalOptions="Fill" VerticalOptions="Fill" Spacing="0" Orientation="Vertical"  Grid.Row="0" Grid.Column="0" BackgroundColor="Fuchsia" Padding="0" >
             <StackLayout HorizontalOptions="Center"  VerticalOptions="Center" Spacing="40"  
                          Grid.Row="0" Grid.Column="0"  Padding="10" >
               <Image Source="menu_setting.png"  />
            </StackLayout>
          <Label Text="User Detail" />
          </StackLayout>
          <StackLayout HorizontalOptions="Fill" VerticalOptions="Fill"  Spacing="0"  Grid.Row="0" Grid.Column="1" BackgroundColor="Green" Padding="0">            
               <StackLayout HorizontalOptions="Center"  VerticalOptions="Center" Spacing="40"  
                          Grid.Row="0" Grid.Column="0" Padding="10" >
                 <Image Source="menu_setting.png" />  
                   </StackLayout>
          <Label Text="Team Detail" />
          </StackLayout>
          <StackLayout HorizontalOptions="Fill" VerticalOptions="Fill" Spacing="0"  Grid.Row="0" Grid.Column="2" Padding="0">
            <Label Text="Log Out" FontSize="18" BackgroundColor="Red" />
          </StackLayout>
         </Grid>   
        </StackLayout>        
         <StackLayout HorizontalOptions = "Fill" Orientation="Horizontal" VerticalOptions="StartAndExpand">
             <!-- Same As first Row-->
         </StackLayout>        
        <!-- Third Row -->
          <StackLayout HorizontalOptions = "FillAndExpand" Orientation="Vertical" VerticalOptions="StartAndExpand" >
          <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <Grid.RowDefinitions>
              <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
             <ColumnDefinition Width="4*" />
              <ColumnDefinition Width="4*" />
              <ColumnDefinition Width="3*" />
            </Grid.ColumnDefinitions>      
            <StackLayout Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Padding="0,0,0,0" BackgroundColor="Purple" >
                  <Image Source="menu_setting.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
          </StackLayout>
         </Grid>   
        </StackLayout>           
      </StackLayout>
    </ScrollView>
  </ContentPage.Content>

Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>