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

2016-11-17 12:39:36来源:CSDN作者:luanjiyang人点击

第七城市

在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>


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

 

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台