如何将图像单元格添加到Xamarin表单列表视图中的多个项目

时间:2016-07-08 12:55:19

标签: c# xaml xamarin xamarin.forms

您好我正在处理列表视图中的应用,当您点击列表视图中的项目时,它会将您带到另一个页面我希望能够将图像添加到标签内文本的左侧。但是在lisview中有多个标签,那么我如何获得每个标签的不同图像我在项目中的内容文件夹中有图像

这是我的xaml:

 <?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="App.HomePage">
  <ListView x:Name="listView" HasUnevenRows="true"  ItemSelected="OnItemSelected">
    <ListView.ItemTemplate>
      <DataTemplate>
        <ViewCell>
          <Frame Padding="0,0,0,8" BackgroundColor="#d2d5d7">
            <Frame.Content>
              <Frame Padding="15,15,15,15"   OutlineColor="Gray" BackgroundColor="White">
                <Frame.Content>
                  <StackLayout Padding="20,0,0,0"  Orientation="Horizontal" HorizontalOptions="CenterAndExpand">
                    <Label Text="{Binding Name}"
                           TextColor="#69add1"
                           FontFamily="OpenSans-Light"
                           FontSize="24"/>
                  </StackLayout>
                </Frame.Content>
              </Frame>
            </Frame.Content>
          </Frame>
        </ViewCell>
      </DataTemplate>
    </ListView.ItemTemplate>
  </ListView>
</ContentPage>

这是我的代码背后:

using App.Data;
using App.Road;
using App.Plan;
using App.Radar;
using System.Collections.Generic;

using Xamarin.Forms;

namespace App
{
    public partial class HomePage : ContentPage
    {
        public HomePage()
        {
            InitializeComponent();
            var name = new List<Tools>
                {
                     new Tools("Plan and Prepare"), 
                     new Tools("Contact Local Agency"),
                     new Tools("Road Closings"),
                     new Tools("Weather Radar")
            };

            listView.ItemsSource = name;
            Content = listView;
        }

        void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var tools = e.SelectedItem as Tools;

            if (tools == null)
            {
                return;
            }

            ContentPage page = null;

            switch (tools.Name)
            {
                case "Plan and Prepare":
                    page = new PlanHome();
                    break;
                case "Contact Local Agency":
                    page = new CountySelect();
                    break;

                case "Road Closings":
                    page = new RoadHome();
                    break;

                case "Weather Radar":
                    page = new RadarHome();
                    break;

                default:
                    page = new HomePage();
                    break;
            }

            ((ListView)sender).SelectedItem = null;
            page.BindingContext = tools;
            Navigation.PushAsync(page);
        }
    }
}

任何帮助都会令人惊叹!

提前致谢:)

2 个答案:

答案 0 :(得分:3)

您应该使用ImageCell代替ViewCell

文档here和完整示例here

代码示例:

<ListView x:Name="list">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ImageCell 
                            Text="{Binding Name}" 
                            Detail="{Binding Position, StringFormat='{0}'}" 
                            ImageSource="{Binding Image}">
                        </ImageCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

答案 1 :(得分:2)

我找到了一个示例代码解决方案。 使用ImageCell而不是ViewCell。

代码示例:

 <ListView x:Name="listEntries" ItemsSource="{Binding Entries}">
          <ListView.ItemTemplate>
            <DataTemplate>
              <ImageCell
                Text="{Binding Name}"
                ImageSource="{Binding Image}"
                >
              </ImageCell>
            </DataTemplate>
          </ListView.ItemTemplate>
        </ListView>

我将'Image'-Property从String更改为ImageSource,然后用'ImageSource.FromStream(() => new MemoryStream(pictureByteArray))'

填充它

它有效!