在這篇文章中,我將解釋如何在Windows Phone 7中創建類似Silverlight中的DataTemplateSelector定製DataTemplateSelector。有些人不瞭解silverlight 中的DataTemplateSelector。所以我在這裏解釋一下,要想在列表中,不同的item類型,顯示不同的UI效果,可以使用DataTemplateSelector對不同的類型列表項的指定不同的DataTemplate。
效果如下圖
在這裏我不得不感謝一直支持我的滷麪網版主,是他讓我提起興趣寫了這麼一篇文章,再次感謝滷麪網,一個非常不錯的wp7開發論壇,後面我也將再次向大家發佈幾篇高質量文章,請大家到滷麪上找我吧,呵呵
進入正題:
實現DataTemplateSelector抽象類
在這篇文章中,我將演示如何創建一個從ContentControl派生的DataTemplateSelector基類。
我需要提到的第一件事是,我將創建一個包含虛擬的方法SelectTemplate抽象類,它提供選擇適當的模板邏輯(可以在DataTemplateSelector的派生類中進行重寫)。我也將重寫基類的OnContentChanhed函數。源代碼如下:
public abstract class DataTemplateSelector : ContentControl
{
publicvirtualDataTemplate SelectTemplate(objectitem, DependencyObject container)
{
return null;
}
protectedoverridevoidOnContentChanged(objectoldContent,objectnewContent)
{
base.OnContentChanged(oldContent, newContent);
ContentTemplate = SelectTemplate(newContent,this);
}
}
創建CustomDataTemplateSelector
創建一個自定義的數據模板選擇器,首先創建一個繼承自DataTemplateSelector的類,並覆蓋SelectTemplate方法。一旦你的類定義了,你可以指定元素的模板選擇屬性爲這個類的一個實例。
我將創建一個FoodTemplateSelector類,它將包含三個不同的DataTemplates:Healthy, UnHealthy 和 NotDetermined的。在SelectTemplate方法中,我會添加一些條件,根據數據上下文屬性值選擇適當的DataTemplate。這樣,我們會根據我們的數據源的類型屬性選擇合適的模板。
FoodTemplateSelector類源代碼如下:
{
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);
}
}
我們的數據類如下:
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>
我希望你能喜歡我的文章!如果你有更多想法,請到滷麪網wp7開發論壇(codewp7.com)問答區聯繫我,我會很高興知道你在想什麼。同時wp7交流QQ羣172765887中,也能找到我的身影,感謝大家