Question

我正在使用Windows Phone应用程序，我需要从网站获取最新的流。我目前制作了一个自定义控件，可以容纳JSON中的每个项目：

<UserControl x:Class="TwitchStationApp.StreamItem"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    d:DesignHeight="195" d:DesignWidth="480">

    <Grid x:Name="LayoutRoot" Height="195" Width="469">
        <Image Height="156" HorizontalAlignment="Left" Margin="12,12,0,0" Name="imageChannel" Stretch="Fill" VerticalAlignment="Top" Width="156" />
        <TextBlock Height="84" HorizontalAlignment="Left" Margin="174,48,0,0" Name="textBlockStatus" Text="TextBlock" VerticalAlignment="Top" Width="294" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="174,12,0,0" Name="textBlockChanelName" Text="TextBlock" VerticalAlignment="Top" Width="294" Foreground="#FFB0CB3E" />
        <TextBlock Height="30" HorizontalAlignment="Left" Margin="174,138,0,0" Name="textBlockViewers" Text="TextBlock" VerticalAlignment="Top" Width="294" />
    </Grid>
</UserControl>

所以我会列出一个项目列表List<Stream> _stream = new ....。因此，这个列表将填充10个项目。对于每个项目，我需要创建一个用户控件（上面）并将其添加到ListBox，以便用户可以滚动并选择（单击/点击）他们想要获取更多信息的项目。

最好的方法是什么？我检查了微软网站，在ItemTemplate标签的XAML文件中有<Window.Resource>的内容，但我不知道在哪里以及如何创建此文件并将其链接到我的列表框。

Answer 1

你需要使用ItemsControl.ItemTemplate属性。使用此属性，您可以指定将应用于列表中每个项目的模板。这是示例代码：

<强>型号：

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

    public Guid Id { get; set; }
}

<强> XAML

<ListBox ItemsSource="{Binding Path=MyItemsSource}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Path=Name}"/>
                <TextBlock Text="{Binding Path=Id}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Answer 2

这通常使用数据模板完成。

假设您有一个StreamTypes集合

    public class StreamType
    {
      public string Title { get; set; }
      public string Description { get; set; }
    }

您可以在

中定义数据模板

应用程序范围 - 在app.xaml
页面范围 - 在页面上
控制容器范围 - 列表框容器的本地范围
在列表框本身内

在页面范围内定义：

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="SharedStreamTemplate">
        <StackPanel>
            <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="{Binding Title}" />
            <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="{Binding Description}" />
        </StackPanel>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

在列表框中，将数据模板分配给项目模板

 <ListBox x:Name="lstStreams" ItemTemplate="{StaticResource SharedStreamTemplate}" />

如果您没有合理的原因可以重复使用该模板，只需将其直接分配到列表框中

<ListBox x:Name="lstStreams">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="{Binding Title}" />
                        <TextBlock FontSize="{StaticResource PhoneFontSizeExtraLarge}" Text="{Binding Description}" />
                    </StackPanel>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

更新

在您的代码中

  // Constructor
    public MainPage()
    {
        InitializeComponent();

        BindStreams();
    }

private void BindStreams()
    {
        lstStreams.ItemsSource = new List<StreamType>
            {
                new StreamType { Description = "Description One", Title = "Title One"},
                new StreamType { Description = "Description Two", Title = "Title Two"},
                new StreamType { Description = "Description Three", Title = "Title Three"},
            };
    }

在Windows Phone中使用自定义控件填充ListBox

2 个答案: