列表框数据和图像未在 Windows phone 8 中显示

Question

我是 Windows Phone 8 的新手。我想在列表框中同时显示图像和文本。我使用流动代码来做到这一点，但它在我的设计视图中没有显示任何内容。然后我调试这段代码，它除了页面标题什么都没有显示。请帮我 。

 <phone:PhoneApplicationPage
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:system="clr-namespace:System;assembly=mscorlib"
xmlns:UI="clr-namespace:Microsoft.Advertising.Mobile.UI;assembly=Microsoft.Advertising.Mobile.UI"
x:Class="Masala.Infotainment"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid.Background>
        <ImageBrush Stretch="Fill" ImageSource="images/home_bg.png"/>
    </Grid.Background>

    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="Page Title"></TextBlock>
    </StackPanel>

    <Grid Grid.Row="1">
        <ListBox Name="mahin" Width="450">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="8"
                                VerticalAlignment="Top"
                                Source="images/cc.png"
                                Width="100"
                                Height="100" />
                        <StackPanel>
                            <TextBlock Text="MAHIN"></TextBlock>
                        </StackPanel>
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</Grid>

Answer 1

您希望如何完成在列表框中显示图像和文本的任务？有2种方法。

1. 数据绑定，在这种情况下，您的列表框的 ItemsSource 属性将绑定到某个 List/enumerable。并且属性绑定到图像和文本块控件。

2. 在 xaml 中直接将项目添加到列表框（或者可以在后面的代码中完成）

从您的代码示例中，您只创建了列表框项模板。这不会显示任何内容。您需要创建项目源并将其绑定到列表框。

如果您有静态列表并希望在 xaml 中添加/显示它们。这是你可以做到的。

<ListBox Grid.Row="1" width="420">
<ListBox.Items>
            <ListBoxItem >
                <StackPanel Orientation="Horizontal">
                <Image Source="Assets/book1.png"></Image>
                <TextBlock Text="Book 1" Margin="10,0,0,0" FontSize="30"></TextBlock>
                </StackPanel>
            </ListBoxItem>
            <ListBoxItem >
                <StackPanel Orientation="Horizontal">
                <Image Source="Assets/book2.png"></Image>
                <TextBlock Text="Book 2" Margin="10,0,0,0" FontSize="30"></TextBlock>
                </StackPanel>
            </ListBoxItem>
</ListBox.Items>
</ListBox>

以下是绑定列表的完整列表框示例。

你的列表框 xaml 在网格中。

<ListBox Name="lstView" ItemsSource="{Binding}" Margin="0,160,0,0">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Image Source="{Binding Image}"></Image>
                    <TextBlock Text="{Binding Make}"></TextBlock>
                    <TextBlock Text="{Binding Model}"></TextBlock>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>

在您的项目中添加一个新类...
公共级汽车 { 公共字符串模型{获取；放; } 公共字符串使{得到；放; }

    public string Image { get; set; }
}

在您的 xaml 页面代码后面添加以下代码（页面构造函数）

 List<Car> cars = new List<Car>();

        var car = new Car() { Make = "Toytoa", Model = "Corola", Image = "Assets/applogo240.png" };
        cars.Add(car);
        car = new Car() { Make = "Honda", Model = "Acord", Image = "Assets/applogo240.png" };
        cars.Add(car);
        car = new Car() { Make = "Honda", Model = "Civic", Image = "Assets/applogo240.png" };
        cars.Add(car);

        ///Bind list to listbox..
        lstView.ItemsSource = cars;

希望对你有帮助

Answer 2

您可以使用的一种方式：

XAML：

<ListBox Name="lstView" ItemsSource="{Binding}">
   <ListBox.ItemTemplate>
      <DataTemplate>
          <StackPanel Orientation="Horizontal">
             <Image Source="{Binding ImagePath}"></Image>
             <TextBlock Text="{Binding Name}"></TextBlock>
        </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

C#：

public class Article
{
    public string Name { get; set; }

    public string ImagePath { get; set; }
}


 Article article1 = new Article() { Name = "name1", ImagePath = "path of image 1" };
 Article article2 = new Article() { Name = "name2", ImagePath = "path of image 2" };

 var articles = new List<Article>();
 articles.Add(article1);
 articles.Add(article2);

 lstView.DataContext = articles;