Как правильно использовать изображение для нескольких строк в сетке в формах Xamarin - PullRequest
Новая
       59

Как правильно использовать изображение для нескольких строк в сетке в формах Xamarin

0 голосов
/ 03 июля 2018

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

enter image description here

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

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

enter image description here

Я использую изображение в виде сетки, в 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>

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

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

1 Ответ

0 голосов
/ 03 июля 2018

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