Windows Phone-DataTemplateSelector

この記事では、DataTemplateSelectorとは何か、Windows Phone 8で抽象およびカスタムDataTemplateSelectorクラスを作成する方法について説明します。DataTemplateSelectorとは何ですか？ データオブジェクトとデータ関連アイテム（ msdn ）に基づいてDataTemplateの選択を提供するクラスです。 言い換えると、有効なListBoxがあり、同時に異なるデータの複数のDataTemplate（表示スタイル）を表示する場合は、DataTemplateSelectorを使用して、独自のロジックを作成してDataTemplateを選択する必要があります。わかりやすくするために、抽象クラスDataTemplateSelectorの実装方法を検討します。次に、仮想SelectTemplateメソッドを使用してContentControlから派生する抽象クラスを作成します（ msdnを読み取る抽象クラスを知らない人向け）。 対応するテンプレートを返すロジック、および基本クラスからのOnContentChanhedをオーバーロードします。

public abstract class DataTemplateSelector : ContentControl { public virtual DataTemplate SelectTemplate(object item, DependencyObject container) { return null; } protected override void OnContentChanged(object oldContent, object newContent) { base.OnContentChanged(oldContent, newContent); ContentTemplate = SelectTemplate(newContent, this); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、DataTemplateを選択できるように、DataTemplateSelectorから継承される、いわゆる「カスタム」DataTemplateSelectorを作成する必要があります。 ここではすべてが簡単です。

 public class MyTemplateSelector : DataTemplateSelector { public DataTemplate Maximum { get; set; } public DataTemplate Middle { get; set; } public DataTemplate Minimum { get; set; } public override DataTemplate SelectTemplate(object item, DependencyObject container) { var myItem = item as Data; if (myItem != null) { switch (myItem.Type) { case "Maximum": return Maximum; case "Middle": return Middle; case "Minimum": return Minimum; } } return base.SelectTemplate(item, container); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それでは、「カスタム」DataTemplateSelectorを少し見てみましょう。 これはDataTemplateSelectorを継承する通常のクラスで、テンプレートを選択するためのDataTemplateであるMaximum、Middle、Mimimumの3つのプロパティを定義します。 次に、SelectTemplateメソッドがリロードされ、対応するDataTemplateを選択するための条件がスイッチ条件によって決定されます。この後、ListBoxにデータをバインドするためのプロパティを持つ単純なデータクラスを記述し、独自のDataTemplateのコンストラクタをいくつか作成します：

 public class Data { public string Name { get; set; } public string Description { get; set; } public string Images { get; set; } public string Type { get; set; } #region Constructor public Data(string description, string name, string images, string type) { Description = description; Name = name; Images = images; Type = type; } public Data(string description, string name, string type) { Description = description; Name = name; Type = type; } public Data(string description, string type) { Description = description; Type = type; } #endregion }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

3つの異なるテンプレート（Maximum、Middle、Minimum）を使用してListBoxを作成し、「カスタム」DataTemplateSelectorにバインドして、もちろんListBox.XAML ListBoxに入力するだけです。

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <ListBox x:Name="MyListBox"> <ListBox.ItemTemplate> <DataTemplate> <local:MyTemplateSelector> <local:MyTemplateSelector.Maximum> <DataTemplate> <StackPanel Orientation="Horizontal"> <Image Margin="8" Source="{Binding Images}" VerticalAlignment="Center" Width="48" Height="48"/> <StackPanel> <TextBlock Margin="8" Text="{Binding Name}" Width="250" VerticalAlignment="Top" HorizontalAlignment="Left"/> <TextBlock Width="100" Text="{Binding Description}" Margin="8,0,8,8" VerticalAlignment="Top" HorizontalAlignment="Left"/> </StackPanel> </StackPanel> </DataTemplate> </local:MyTemplateSelector.Maximum> <local:MyTemplateSelector.Middle> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Margin="8" Text="{Binding Name}" Width="250" VerticalAlignment="Top" HorizontalAlignment="Left" /> <TextBlock Width="250" Text="{Binding Description}" Margin="8,0,8,8" VerticalAlignment="Top" HorizontalAlignment="Left"/> </StackPanel> </DataTemplate> </local:MyTemplateSelector.Middle> <local:MyTemplateSelector.Minimum> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Margin="8" Text="{Binding Description}" Width="250" VerticalAlignment="Top" HorizontalAlignment="Left" /> </StackPanel> </DataTemplate> </local:MyTemplateSelector.Minimum> </local:MyTemplateSelector> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、データを入力して、初期化後にOnNavigatedToメソッドを追加または再ロードするか、他の何かを思いつくことができますが、これはそれほど重要ではありません。

 var list = new List<Data>(); var itemData0 = new Data("Notebook", "Dell", "Assets/BrandIcon/dellIcon.jpg", "Maximum"); var itemData1 = new Data("Mouse", "Zalman", "Middle"); var itemData2 = new Data("Ultrabook", "LG", "Assets/BrandIcon/lgIcon.jpg", "Maximum"); var itemData3 = new Data("Other", "Minimum"); list.Add(itemData0); list.Add(itemData1); list.Add(itemData2); list.Add(itemData3); MyListBox.ItemsSource = list;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以上で、3つの異なるDataTemplateがListBoxに一度に表示される様子をコンパイルして確認できます。 それがどのように機能するかをよりよく理解するために、プロジェクトが自分で組み立てます。それが機能しない場合は、ここにGitHubソースがあります 。質問してみてください。