Как правильно использовать изображение в нескольких строках в сетке в Xamarin Forms

Я пытаюсь создать пользовательскую карточную ячейку в стиле материала в своем приложении Xamarin Forms. У меня очень плохой внешний вид, но у меня проблемы с изображением. Я хочу, чтобы он касался верхнего и нижнего краев, левого края и имел квадратную форму при сохранении соотношения сторон. Но сейчас все, что я получаю, - это небольшое изображение, которое не играет в мяч:

введите здесь описание изображения

(Мне пришлось покрыть изображения компании краской, но поверьте, они примерно такого размера).

Вот что я на самом деле хочу (опять же, прошу прощения за покраску)

введите здесь описание изображения

Я использую изображение в виде сетки в 1-м столбце, охватывающем все 4 строки. Я перепробовал все LayoutOptions, которые раньше понимал, но теперь сам сомневаюсь. Я также пробовал поместить изображение в StackLayout, так как думал, что вы можете расширить дочерние элементы StackLayout, но все еще не играли в кости. Вот мой упрощенный Xaml прямо сейчас:

<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>

Более того, вы, вероятно, можете сказать, что я не совсем понимаю значок телефона справа. Я хочу, чтобы он занимал центр и имел приличный размер кнопки для ячейки карты.

Я потратил часы, пытаясь понять это. Что я делаю неправильно?


person Chucky    schedule 03.07.2018    source источник


Ответы (1)


Frame имеет значение по умолчанию Padding 20. Вот почему у вас есть эти поля внутри фрейма.

<Frame Padding="0" // Here , set padding to 0, so you can fill all Frame space
    CornerRadius="10"  
    Margin="10, 5"
    IsClippedToBounds="True"   
    BackgroundColor="White">
person Bruno Caceiro    schedule 03.07.2018
comment
Бруно - спасибо за быстрый ответ. Я не знал этого о фрейме, должен ли я знать? Он исправляет пространство вокруг верхней части изображения, но я все еще не могу добиться желаемого эффекта. Внизу все еще есть место, где изображение не охватывает все строки. Может, я что-то не так делаю с автоматической высотой строк? - person Chucky; 04.07.2018
comment
Привет, Бруно, как я и подозревал, установка всех строк на '*' вместо auto решила мою проблему. Изображение теперь занимает все строки. - person Chucky; 04.07.2018
comment
Да, забыл добавить. Если вы установите для строк значение *, они будут занимать доступное пространство. Моя уловка для пользовательского интерфейса - установить цвет фона (для отладки) в таких элементах, как Grids, Stacklayouts, чтобы увидеть, какое место они занимают. Так проще. - person Bruno Caceiro; 04.07.2018
comment
Я должен добавить, что Auto и '*' определения строк и столбцов по-прежнему вызывали проблемы при использовании в других ячейках для меток, стеков и т. Д. Вместе с моим изображением. В конце концов, я обернул существующую сетку другой сеткой из 2 столбцов. В первом столбце было мое неизменное изображение, во втором столбце - обернутая сетка. - person Chucky; 04.07.2018