wp8 longlistselector 动态加载datatemplate

 

在做一个windows phone 8 即时通讯应用的时候，聊天界面的对话气泡。 需要根据不同的消息类型，加载对应的DataTemplate,
比如发送，接受，图片，语音，等气泡。 如下图所示

会话界面

主要思想就是，定义多个不同的模板，在每一项的内容生成的时候，根据数据源的类型，加载对应的模板。

看代码

 1 public abstract class DataTemplateSelector:ContentControl
 2     {
 3             //根据newContent的属性，返回所需的DataTemplate
 4             public virtual DataTemplate SelectTemplate(object item, DependencyObject container)
 5             {
 6                 return null;
 7             }
 8 
 9             protected override void OnContentChanged(object oldContent, object newContent)
10             {
11                 base.OnContentChanged(oldContent, newContent);
12                 //根据newContent的属性，选择对应的DataTemplate
13                 ContentTemplate = SelectTemplate(newContent, this);
14             }
15 
16     }
17     public class ChatTemplateSelector : DataTemplateSelector
18     {
19         public DataTemplate ReciveMsgTP { get; set; }
20         public DataTemplate SendMsgTP { get; set; }
21 
22         //根据newContent的属性，返回所需的DataTemplate
23         public override DataTemplate SelectTemplate(object item, DependencyObject container)
24         {
25             ChatModel model = item as ChatModel;
26             DataTemplate dt;
27             if (model != null)
28             {
29                 switch (model.CMType)
30                 {
31                     case MessageType.ReciveMsg:
32                         dt= ReciveMsgTP;
33                         break;
34                     case MessageType.SendMsg:
35                         dt= SendMsgTP;
36                         break;
37                     default:
38                         dt = ReciveMsgTP; 
39                         break;
40                 }
41                 return dt;
42             }
43             return base.SelectTemplate(item, container);
44         }
45     }

 

.xaml 

<phone:PhoneApplicationPage.Resources>
        <DataTemplate x:Key="ItemTP">
            <local:ChatTemplateSelector  Content="{Binding}">
                <local:ChatTemplateSelector.ReciveMsgTP>
                    <DataTemplate>
                        <Grid d:DesignWidth="415.522" d:DesignHeight="106.567" Height="113" Width="501">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="124*"/>
                                <ColumnDefinition Width="43*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding Msg}" VerticalAlignment="Top" FontSize="30" Height="0" Width="0"/>
                            <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Left" Height="100" Margin="10,3,0,0" VerticalAlignment="Top" Width="315" Background="#FFF56D6D"/>
                        </Grid>
                    </DataTemplate>

                </local:ChatTemplateSelector.ReciveMsgTP>
                <local:ChatTemplateSelector.SendMsgTP>
                    <DataTemplate>
                        <Grid d:DesignWidth="415.522" d:DesignHeight="106.567" Height="128" Width="498">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="59*"/>
                                <ColumnDefinition Width="190*"/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Grid.Column="1" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" Text="{Binding Msg}" VerticalAlignment="Top" FontSize="30" Height="0" Width="0"/>
                            <Border BorderBrush="Black" BorderThickness="1" Grid.Column="1" HorizontalAlignment="Left" Height="100" Margin="10,15,0,0" VerticalAlignment="Top" Width="348" Background="#FF0F7DEC"/>
                        </Grid>
                    </DataTemplate>
                </local:ChatTemplateSelector.SendMsgTP>
            </local:ChatTemplateSelector>
        </DataTemplate>
    </phone:PhoneApplicationPage.Resources>

 

posted @ 2013-12-25 23:32  蝗虫的大腿  阅读(1303)  评论(1)  编辑  收藏  举报