(轉) Wp7 list 中列表項多樣化的解決方案-Custom DataTemplateSelector

時間 2019-11-12

標籤 wp7 list 表項多樣化解決方案 custom datatemplateselector 简体版

原文原文鏈接

本文轉自：php

http://www.cnblogs.com/sonyye/archive/2012/03/03/2378825.html html

在這篇文章中，我將解釋如何在Windows Phone 7中建立相似Silverlight中的DataTemplateSelector定製DataTemplateSelector。有些人不瞭解silverlight 中的DataTemplateSelector。因此我在這裏解釋一下，要想在列表中，不一樣的item類型，顯示不一樣的UI效果，能夠使用DataTemplateSelector對不一樣的類型列表項的指定不一樣的DataTemplate。ide

效果以下圖函數

在這裏我不得不感謝一直支持個人滷麪網版主，是他讓我提起興趣寫了這麼一篇文章，再次感謝滷麪網，一個很是不錯的wp7開發論壇,後面我也將再次向你們發佈幾篇高質量文章，請你們到滷麪上找我吧，呵呵this

進入正題：spa

實現DataTemplateSelector抽象類3d

在這篇文章中，我將演示如何建立一個從ContentControl派生的DataTemplateSelector基類。
我須要提到的第一件事是，我將建立一個包含虛擬的方法SelectTemplate抽象類，它提供選擇適當的模板邏輯（能夠在DataTemplateSelector的派生類中進行重寫）。我也將重寫基類的OnContentChanhed函數。源代碼以下：code

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 );

}

建立CustomDataTemplateSelector
建立一個自定義的數據模板選擇器，首先建立一個繼承自DataTemplateSelector的類，並覆蓋SelectTemplate方法。一旦你的類定義了，你能夠指定元素的模板選擇屬性爲這個類的一個實例。
我將建立一個FoodTemplateSelector類，它將包含三個不一樣的DataTemplates：Healthy, UnHealthy 和 NotDetermined的。在SelectTemplate方法中，我會添加一些條件，根據數據上下文屬性值選擇適當的DataTemplate。這樣，咱們會根據咱們的數據源的類型屬性選擇合適的模板。
FoodTemplateSelector類源代碼以下：htm

public class FoodTemplateSelector : DataTemplateSelector
{
    public DataTemplate Healthy
    {
        get;
        set;
    }
 
    public DataTemplate UnHealthy
    {
        get;
        set;
    }
 
    public DataTemplate NotDetermined
    {
        get;
        set;
    }
 
    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        Data foodItem = item as Data;
        if (foodItem != null)
        {
            if (foodItem.Type == "Healthy")
            {
                return Healthy;
            }
            else if (foodItem.Type == "NotDetermined")
            {
                return NotDetermined;
            }
            else
            {
                return UnHealthy;
            }
        }
 
        return base.SelectTemplate(item, container);
    }
}

咱們的數據類以下：blog

public class Data
{
    public string Name
    {
        get;
        set;
    }
 
    public string Description
    {
        get;
        set;
    }
 
    public string IconUri
    {
        get;
        set;
    }
 
    public string Type
    {
        get;
        set;
    }
}

我將使用一個數據綁定的ListBox，以便展現FoodTemplateSelector的使用方法。下面是源代碼：

public MainPage()
        {
            InitializeComponent();
 
            List<Data> list = new List<Data>();
            Data item0 = new Data() { Name = "Tomato", IconUri = "Images/Tomato.png", Type = "Healthy" };
            Data item1 = new Data() { Name = "Beer", IconUri = "Images/Beer.png", Type = "NotDetermined" };
            Data item2 = new Data() { Name = "Fries", IconUri = "Images/fries.png", Type = "Unhealthy" };
            Data item3 = new Data() { Name = "Sandwich", IconUri = "Images/Hamburger.png", Type = "Unhealthy" };
            Data item4 = new Data() { Name = "Ice-cream", IconUri = "Images/icecream.png", Type = "Healthy" };
            Data item5 = new Data() { Name = "Pizza", IconUri = "Images/Pizza.png", Type = "Unhealthy" };
            Data item6 = new Data() { Name = "Pepper", IconUri = "Images/Pepper.png", Type = "Healthy" };
            list.Add(item0);
            list.Add(item1);
            list.Add(item2);
            list.Add(item3);
            list.Add(item4);
            list.Add(item5);
            list.Add(item6);
 
            this.listBox.ItemsSource = list;
                 
        }

接下來，我將建立三個不一樣的DataTemplates，並將設置爲他們的ListBox的ItemTemplate。請注意，每一個模板是獨立的。這意味着你能夠自由的在每一個模板添加任何元素。這樣你能夠有一個數據源，三個不一樣的view。
下面是效果圖

代碼以下

<ListBox x:Name="listBox" HorizontalContentAlignment="Stretch">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <local:FoodTemplateSelector Content="{Binding}">
                <local:FoodTemplateSelector.Healthy>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="YellowGreen" Width="400" Margin="10">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                            <TextBlock Text="{Binding Name}" FontSize="40" Foreground="Black" Width="280"/>
                            <TextBlock Text="healty" />
                        </StackPanel>
                    </DataTemplate>
                    </local:FoodTemplateSelector.Healthy>
                <local:FoodTemplateSelector.UnHealthy>
                    <DataTemplate>
                        <Border BorderBrush="Red" BorderThickness="2"  Width="400" Margin="10">
                        <StackPanel Orientation="Horizontal">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                                <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/>
                            <Image Source="Images/attention.png" Stretch="None" Margin="10,0,0,0"/>
                        </StackPanel>
                        </Border>
                    </DataTemplate>
                </local:FoodTemplateSelector.UnHealthy>
                <local:FoodTemplateSelector.NotDetermined>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Background="Gray" Width="400" Margin="10">
                            <Image Source="{Binding IconUri}" Stretch="None"/>
                            <TextBlock Text="{Binding Name}" FontSize="40" Width="280"/>
                            <Image Source="Images/question.png" Stretch="None" Margin="10,0,0,0"/>
                        </StackPanel>
                    </DataTemplate>
                </local:FoodTemplateSelector.NotDetermined>
            </local:FoodTemplateSelector>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>