UWP开发入门（八）——聊天窗口和ItemTemplateSelector

　　我们平常用的最多的APP可能就是企鹅和微信了。有没有想过聊天窗口如何实现的？本篇我们将简单模拟一个聊天窗口。

　　聊天窗口大致上就是消息的一个集合列表。集合列表最常见的展现形式无非就是ListView。可能有些童鞋会觉得ListView的样式和聊天窗口相去甚远，虽然我们可以通过自定义ItemTemplate来修改元素的显示效果，但如何将ListView的元素以不同样式展现呢？这就要通过ListView的ItemTempateSelector属性来实现了。基本原理是通过条件判断，返回不同的DataTemplate给ListViewItem使用。

　　首先我们来定义ViewModel层的消息集合，集合共有两种不同类型的消息，分别是普通文本信息和红包消息。这两种又需要区别是接受的消息（来自对方）和发送消息（自己发出）。

    public abstract class MessageBase
    {
        public string Name { get; set; }

        public DateTime Published { get; set; }
    }

    public class Message : MessageBase
    {
        public string Comment { get; set; }

        public bool IsSelf { get; set; }
    }

    public class Gift : Message
    {
        public int Amount { get; set; }
    }

　　其次我们要定义展现消息的DataTemplate，同样分为普通文字消息和红包消息。MessageDataTemplate和SelfMessageDataTemplate就是左右对称的对话框气泡，GiftDataTemplate就是红包的样式啦。

        <DataTemplate x:Key="MessageDataTemplate">
            <Grid HorizontalAlignment="Left"  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" CornerRadius="4" Background="LightGray" Padding="15">
                    <TextBlock Text="{Binding Comment}"></TextBlock>
                </Grid>
                <StackPanel Grid.Row="1" Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" Foreground="LightGray"></TextBlock>
                    <TextBlock Text="{Binding Published}"  Foreground="LightGray" Margin="10,0,0,0"></TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="SelfMessageDataTemplate">
            <Grid HorizontalAlignment="Right"  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" CornerRadius="4" Background="Green" Padding="15">
                    <TextBlock Text="{Binding Comment}" Foreground="White"></TextBlock>
                </Grid>
                <StackPanel Grid.Row="1"  Orientation="Horizontal" HorizontalAlignment="Right">
                    <TextBlock Text="{Binding Published}"  Foreground="LightGray" Margin="0,0,10,0"></TextBlock>
                    <TextBlock Text="{Binding Name}" Foreground="LightGray"></TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="GiftDataTemplate">
            <Grid HorizontalAlignment="Left"  >
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"></RowDefinition>
                    <RowDefinition Height="Auto"></RowDefinition>
                </Grid.RowDefinitions>
                <Grid Grid.Row="0" CornerRadius="4" Background="Orange"  Padding="10">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                        <RowDefinition Height="Auto"></RowDefinition>
                    </Grid.RowDefinitions>
                    <Ellipse Grid.Row="0" Width="50" Height="50" Fill="Red" Stroke="Gold" StrokeThickness="4"></Ellipse>
                    <TextBlock Grid.Row="0" Text="红包" TextAlignment="Center" VerticalAlignment="Center"></TextBlock>
                    <TextBlock Grid.Row="1" Text="{Binding Amount}" TextAlignment="Center"></TextBlock>
                    <TextBlock Grid.Row="2" Text="{Binding Comment}" TextAlignment="Center" ></TextBlock>
                </Grid>
                <StackPanel Grid.Row="1" Orientation="Horizontal">
                    <TextBlock Text="{Binding Name}" Foreground="LightGray"></TextBlock>
                    <TextBlock Text="{Binding Published}"  Foreground="LightGray" Margin="10,0,0,0"></TextBlock>
                </StackPanel>
            </Grid>
        </DataTemplate>

　　接下来就是如何应用ItemTemplateSelector了，我们需要创建继承自DataTemplateSelector的子类，并且override SelectTemplateCore方法。该方法将我们在App.xaml中定义的DataTemplate资源文件根据集合众不同的元素返回对应的模板。

    public class MessageItemDataTemplateSelector : DataTemplateSelector
    {
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
        {
            if (item is Gift)
            {
                return App.Current.Resources["GiftDataTemplate"] as DataTemplate;
            }
            else if (item is Message)
            {
                if ((item as Message).IsSelf)
                {
                    return App.Current.Resources["SelfMessageDataTemplate"] as DataTemplate;
                }
                else
                {
                    return App.Current.Resources["MessageDataTemplate"] as DataTemplate;
                }
            }

            return base.SelectTemplateCore(item);
        }
    }

　　使用之前，我们需要在XAML中声明一个MessageItemDataTemplateSelector类型的实例。

<local:MessageItemDataTemplateSelector x:Key="MessageItemDataTemplateSelector"></local:MessageItemDataTemplateSelector>

　　然后Binding到ListView的ItemTemplateSelector属性。

    <ListView Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
              ItemTemplateSelector="{StaticResource MessageItemDataTemplateSelector}"
              ItemsSource="{Binding MessageList}">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
                <Setter Property="Margin" Value="10"></Setter>
            </Style>
        </ListView.ItemContainerStyle>
    </ListView>

　　运行看一下效果，是不是蛮简单的？

　　Sample的代码放在全球最大同性交友网站上，地址如下：

　　https://github.com/manupstairs/UWPSamples