windows-phone-8 - LongListSelector の最初と最後のアイテムの異なるアイテム テンプレート

Question

LongListSelector を使用してデータを表示する Windows Phone 8 アプリを作成しています。

LongListSelector の最初と最後の項目に異なる項目テンプレートを設定するには?

基本的には、すべてのアイテムに同じ情報を表示したいだけですが、最後のアイテムと最初のアイテムで少し異なるアイテム「レイアウト」を使用します。

Answer 1

インデックスに基づいて選択するテンプレートを決定するのに役立つ、ある種のデータ テンプレート セレクターを実装できます。再利用可能な抽象TemplateSelectorクラスを作成することから始めることができます。「 Windows Phone 7 の DataTemplateSelector と CustomDataTemplateSelector の実装」で説明したアイデアの多くを使用しましたが、代わりにインデックスに基づいてテンプレートを選択できるように実装を変更しました。

public abstract class TemplateSelector : ContentControl {
  public abstract DataTemplate SelectTemplate(object item, int index, int totalCount, DependencyObject container);

  protected override void OnContentChanged(object oldContent, object newContent) {
    base.OnContentChanged(oldContent, newContent);

    var parent = GetParentByType<LongListSelector>(this);
    var index = parent.ItemsSource.IndexOf(newContent);
    var totalCount = parent.ItemsSource.Count;

    ContentTemplate = SelectTemplate(newContent, index, totalCount, this);
  }

  private static T GetParentByType<T>(DependencyObject element) where T : FrameworkElement {
    T result = null;
    DependencyObject parent = VisualTreeHelper.GetParent(element);

    while (parent != null) {
      result = parent as T;

      if (result != null) {
        return result;
      }

      parent = VisualTreeHelper.GetParent(parent);
    }

    return null;
  }
}

そのクラスを取得したら、独自のデータ テンプレート セレクター ロジックを追加できます。あなたの場合、このようなものになる可能性があります

public class MyTemplateSelector : TemplateSelector {
  public DataTemplate First { get; set; }
  public DataTemplate Default { get; set; }
  public DataTemplate Last { get; set; }

  public override DataTemplate SelectTemplate(object item, int index, int totalCount, DependencyObject container) {
    if (index == 0)
      return First;
    else if (index == totalCount-1)
      return Last;
    else
      return Default;
  }
}

そして最後に Xaml

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="first">
        <TextBlock Text="{Binding Name}" Foreground="Yellow" />
    </DataTemplate>
    <DataTemplate x:Key="default">
        <TextBlock Text="{Binding Name}" />
    </DataTemplate>
    <DataTemplate x:Key="last">
        <TextBlock Text="{Binding Name}" Foreground="Red" />
    </DataTemplate>

    <DataTemplate x:Key="SelectingTemplate">
        <local:MyTemplateSelector Content="{Binding}"
                                First="{StaticResource first}"
                                Default="{StaticResource default}"
                                Last="{StaticResource last}"
                                HorizontalContentAlignment="Stretch" />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

<phone:LongListSelector
            ItemTemplate="{StaticResource SelectingTemplate}"
            ItemsSource="{Binding Data}" />