你的位置:首页 > ASP.net教程

[ASP.net教程]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