0

I am trying to create a custom, material-style, card cell in my Xamarin Forms app. I have the appearance pretty much down, but I'm having problems with the image in it. I want it to touch the top and bottom edges, the left hand edge, and be a square sort of shape, while maintaining the aspect ratio. But right now, all I get is this small image that won't play ball:

enter image description here

(I've had to cover the company images with paint, but trust me that they're about that size).

Here's what I actually want (again, please excuse the paint job)

enter image description here

I'm using an image in a grid view, in the 1st column and spanning all 4 rows. I've tried all of the LayoutOptions, which I used to understand but now I'm second guessing myself. I've also tried putting the image in a StackLayout as I thought you can expand children of a Stacklayout, but still no dice. Here is my simplified Xaml right now:

<Frame CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">

  <Grid BackgroundColor="White" >
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*"  />
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackLayout Grid.Row="0" Grid.Column="0" Grid.RowSpan="4" 
                 HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
      <Image HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Aspect="AspectFill" Source="{Binding ImageSource}"/>
    </StackLayout>

    <Label Grid.Row="0" Grid.Column="1"
         Text="{Binding Favourite.FavKindName}"
         FontSize="{DynamicResource InfoLargerTextFontSize}"/>

    <Image Grid.Row="1" Grid.Column="3" Grid.RowSpan="4" Source="Contact.png"
           VerticalOptions="CenterAndExpand" >
      <Image.GestureRecognizers>
        <TapGestureRecognizer />
      </Image.GestureRecognizers>
    </Image>

  </Grid>
</Frame>

What's more, you can probably tell I'm pretty clueless about the phone icon on the right. I want that to occupy the centre and be of a decent button size for the card cell.

I've spent hours trying to figure this out. What am I doing wrong?

Chucky
  • 1,701
  • 7
  • 28
  • 62

1 Answers1

1

Frame has a default Padding of 20. That's why you have those margins inside the frame.

<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
    CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">
Bruno Caceiro
  • 7,035
  • 1
  • 26
  • 45
  • Bruno - thank you for the quick reply. I did not know that about a Frame, should I have? It fixes the space around the top of the image but I am still not able to achieve the effect I want. There is still a space on the bottom with the image not spanning all of the rows. Am I doing something wrong with auto heights for the rows, maybe? – Chucky Jul 04 '18 at 08:59
  • 1
    Hi Bruno, as I suspected, setting all of the rows to '*' instead of auto solved my problem. The image now occupies all of the rows. – Chucky Jul 04 '18 at 09:02
  • Yes, I forgot to add that. If you set the Rows to "*" they will occupy the space available. My trick for UI, is to set background color (for debugging), in elements like Grids, Stacklayouts, to see what space they are occupying. It's easier that way. – Bruno Caceiro Jul 04 '18 at 12:18
  • I should add that Auto and '*' Row and Column Definitions still caused problems when used on other cells for labels, stacklayouts, etc, alongside my image. So in the end, I wrapped my existing grid with another grid of 2 columns. The first column held my unchanging image, the 2nd column held the wrapped grid. – Chucky Jul 04 '18 at 14:51