Change programmatically the Rows and Columns in Xamarin Forms

1.2k Views Asked by At

I'm filling a grid with an observablecollection from my viewmodel but I want to get that grid formatted as follows: (Note my model has no row/column information just calls the posts as shown in the code) enter image description here

My code now looks like this:

<StackLayout BindableLayout.ItemsSource="{Binding Posts}">
  <BindableLayout.ItemTemplate>
     <DataTemplate>
       <Grid Margin="5" RowSpacing="0" x:Name="postsTable">
       <Grid.ColumnDefinitions>
          <ColumnDefinition Width="*"/>
          <ColumnDefinition Width="*"/>
       </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
             <RowDefinition Height="200"/>
          </Grid.RowDefinitions>

  <ImageButton Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" Source="{Binding postImage}"  VerticalOptions="Fill" HorizontalOptions="Fill" Aspect="AspectFill" Clicked="News1_Clicked"/>
  <StackLayout Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="1" VerticalOptions="End" HorizontalOptions="Start" Margin="10">
  <Label Text="{Binding title}" FontFamily="{StaticResource BoldFont}" StyleClass="titlesqr"/>
  <Label Text="{Binding subtitle}" FontFamily="{StaticResource NormalFont}" StyleClass="textsqr"/>
  </StackLayout>

      </Grid>
   </DataTemplate>
</BindableLayout.ItemTemplate>

How can I put the rows / columns /columnspan information to achieve this view?

0

There are 0 best solutions below