0

サイトから最新のストリームを取得する必要がある 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>ますが、このファイルをどこでどのように作成してリストボックスにリンクするのかわかりません。

4

2 に答える 2

1

これは通常、データ テンプレートを使用して行われます。

StreamTypes のコレクションがあるとします。

    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"},
            };
    }
于 2013-09-20T16:32:22.313 に答える
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>
于 2013-09-20T15:58:22.957 に答える