在 Windows Phone 中使用自定义控件填充列表框

本文关键字：自定义控件 填充 列表 Windows Phone | 更新日期: 2023-09-27 18:32:06

我正在开发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 个项目填充。对于每个项目，我需要创建一个 User 控件（上面）并将其添加到 ListBox，以便用户可以滚动并选择（单击/点击）他们想要获取详细信息的项。

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

在 Windows Phone 中使用自定义控件填充列表框

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

假设您有一个流类型的集合

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

您可以在

  1. 应用程序范围 – 在 app.xaml 中
  2. 页面范围 – 在页面上
  3. 控制容器范围 – 列表框容器的本地
  4. 在列表框本身内

要在页面范围内定义它： 

<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"},
            };
    }
没

错，您需要使用 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>
相关文章：