Xamarin извлекает пользовательский шаблон из ListView

#xaml #listview #xamarin #xamarin.android #xamarin.forms

Вопрос:

Я работаю с ListView в формах Xamarin. До сих пор я отображал некоторые данные, используя пользовательский DataTemplate. Теперь я хотел бы расширить это, чтобы отображать текст внутри / поверх изображения. Что-то вроде этого:

Это код, который я использую до сих пор. Однако в этом случае текст находится поверх изображения:

 <ListView x:Name="MyListView"
          ItemsSource="{Binding myData}"
          RowHeight="190"
          HasUnevenRows="True">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <ViewCell.View>
            <StackLayout Padding="10" Orientation="Vertical">
              <Label Text="{Binding Title}" 
                     FontSize="Large" 
                     VerticalOptions="Center"
                     TextColor="#31659e">
               </Label>                
               <Image Source="http://www.someurl.com/images/image1.jpg" Aspect="AspectFill"></Image>                  
            </StackLayout>
          </ViewCell.View>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>

Как я мог бы добиться результата первого изображения?

Если у кого-нибудь есть какой-нибудь пример / ссылки / советы, как это сделать, это было бы очень полезно.

Спасибо

1. Вы можете привязать свойство bool к свойству IsVisable, отключить другие элементы

2. Взгляните на этот snppt , мы пытаемся создать платформу с такими проектами. Это содержит некоторый текст поверх фонового изображения, которое вам нужно.

Ответ №1:

Вы можете использовать RelativeLayout . В ваших шаблонах данных это будет выглядеть так ViewCell.View

 <RelativeLayout>
    <!-- Background -->
    <Image Source="http://www.someurl.com/images/image1.jpg" Aspect="AspectFill"
           RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
           RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" />
    <!-- Text -->
    <StackLayout Padding="10" Orientation="Vertical" VerticalOptions="EndAndExpand"
                 RelativeLayout.XConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width}"
                 RelativeLayout.YConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height}" >
      <Label Text="{Binding Title}"
             FontSize="Large"
             TextColor="#31659e">
      </Label>
      <Label Text="{Binding SubTitle}"
             TextColor="#31659e">
      </Label>
    </StackLayout>
</RelativeLayout>

Это растягивает изображение и stacklayout на одну и ту же высоту и выравнивает содержимое StackLayout в нижней части.

1. Этот код работает так, как ожидалось. Я только сделал несколько настроек, спасибо

2. Теперь данные отображаются в виде изображения выше. Только текст отображается вверху, а не внизу. Я работаю над этим. Но в целом код работает.