WindowsPhone开发随记：数据绑定中元素的模板选择器

在WindowsPhone开发之中，数据绑定的存在可以极大的简化并分离界面层和逻辑层。

尤其是集合绑定（绑定在ListBox这种列表控件中），不需要非常多的冗余代码就可以实现批量类似数据的显示。

往往数据不仅繁多，并且表现的形式或许也不尽相同，单一的表现格式往往无法满足功能需求。

例如一个新闻列表（如下图所示），有的元素为标题，有的新闻元素带有图片，有的新闻则没有，但共同显示在一个ListBox中，这种情况在应用当中非常常见。

对应这种情况，往往就需要模板选择器（DataTemplateSelector） 来实现这个功能。

 

我在这个页面中，创建了三种类型模板，分别为：SubTitle（副标题），Contents（纯文本），ImageContents（图片+文本），对应不同的对象元素需求。

根据元素对象中type的属性，来判断使用哪种模板。

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

    public class ListTemplateSelector : DataTemplateSelector
    {
        public DataTemplate SubTitle { get; set; }

        public DataTemplate ImageContents { get; set; }

        public DataTemplate Contents { get; set; }

        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            NewsListInfo listInfo = item as NewsListInfo;
            if (listInfo != null)
            {
                if (listInfo.type == "SubTitle")
                {
                    return SubTitle;
                }
                else if (listInfo.type == "ImageContents")
                {
                    return ImageContents;
                }
                else
                {
                    return Contents;
                }
            }

            return base.SelectTemplate(item, container);
        }
    }

XAML中的实现

        <ListBox Name="listBox" Margin="0,0,0,0" ItemsSource="{Binding}" MouseMove="ListBox_MouseMove_1">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <local:ListTemplateSelector Content="{Binding}">

                        <!-- 子标题模板 -->
                        <local:ListTemplateSelector.SubTitle>
                            <DataTemplate>
                               省略
                            </DataTemplate>
                        </local:ListTemplateSelector.SubTitle>

                        <!-- 内容模板（带图片）-->
                        <local:ListTemplateSelector.ImageContents>
                            <DataTemplate>
                               省略
                            </DataTemplate>
                        </local:ListTemplateSelector.ImageContents>

                        <!-- 内容模板（不带图片）-->
                        <local:ListTemplateSelector.Contents>
                            <DataTemplate>
                               省略
                            </DataTemplate>
                        </local:ListTemplateSelector.Contents>
                        
                    </local:ListTemplateSelector>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

 这样就实现了上图中的效果。