LongListSelector第一項和最後一項的不同項目模板

Question

我正在編寫使用LongListSelector顯示一些數據的Windows Phone 8應用程序。

如何在LongListSelector中爲第一個和最後一個項目設置不同的項目模板？

基本上我只是想在每個項目中顯示相同的信息，但在最後和第一項中使用不同的項目「佈局」。

Answer 1

您可以實現某種數據模板選擇器，以幫助確定根據索引選擇哪個模板。您可以通過創建可重用的摘要TemplateSelector類開始。我使用了許多在Implementing Windows Phone 7 DataTemplateSelector and 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}" />