具有自定义数据模板的列表框 [英] Listbox with custom datatemplate

问题描述

我做Windows存储应用，例如icq，但我的非常简单.但是现在我遇到了问题，因为我不知道如何制作带有绑定的模板，它看起来像这样:

Hi I do windows store app like icq but mine is very simple. But now I have problem because I dont know how make template with binding which will look like this:

我的列表框外观如下:

https://www.dropbox.com/s/we5m3h5ch6mop1j/messageListbox.PNG https://www.dropbox.com/s/6uypyjb4etxc4sk/myMessageListbox.PNG .

谁能建议我如何制作一个包含两种消息的列表框-说出我和其他人(左和右)的消息.简而言之，像icq一样的teplate.感谢.

Can anyone advise me how I can make a listbox that will contain two kinds messages - say the message from me and from someone else(left and right). In short same teplate like icq. Thx for willingness.

  <ListBox x:Name="lbChoosenMessagesUsers"  Grid.Column="3" FontSize="13" ItemsSource="{Binding MyDatasCurentUser}" Margin="0,0,50,0">
            <ListBox.ItemContainerStyle>
                <Style TargetType="ListBoxItem">
                    <Setter Property="IsEnabled" Value="False"/>
                </Style>
            </ListBox.ItemContainerStyle>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <Grid>
                        <Polygon Margin="10,10,0,0" Points="0,0 20,10, 0,10" Fill="#BFE8FF" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
                            <Polygon.RenderTransform>
                                <CompositeTransform Rotation="-181"/>
                            </Polygon.RenderTransform>
                        </Polygon>
                        <Grid  Margin="27,0,0,0"  HorizontalAlignment="Left" Background="#BFE8FF" >
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="auto"></RowDefinition>
                                <RowDefinition Height="auto"></RowDefinition>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding MessengerText}" HorizontalAlignment="Left"  Margin="5,5,20,0" VerticalAlignment="Top" Foreground="black"></TextBlock>
                            <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding MessengerTime}" HorizontalAlignment="Left"  Margin="5,0,0,5" VerticalAlignment="Bottom" FontSize="9" Foreground="#908C8C"></TextBlock>
                        </Grid>
                    </Grid>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>

推荐答案

最简单的方法是触发器.但是DataTemplates非常灵活.

The simplest way are Triggers. But much flexible are DataTemplates.

比方说，您的MyDatasCurentUser集合是Message的类型.而且我确定Message包含一些标志，表明它是否为传入/传出消息:

Let say your MyDatasCurentUser collection is type of Message. And I'm sure that Message contains some flag saying that if it is incoming/outgoing message:

 public bool IsIncoming { get; set; }

现在您需要创建DataTemplateSelector类:

Now you need to create DataTemplateSelector class:

namespace StackOverFlow
{
          public class TemplateSelector : DataTemplateSelector
          {
            public DataTemplate IncomingMessageTemplate { get; set; }
            public DataTemplate OutgoingMessageCaptureTemplate { get; set; }
            public DataTemplate EmptyTemplate { get; set; }

            public override DataTemplate SelectTemplate(object item, DependencyObject container)
            {
              var x = item as Message;
              if (x != null)
              {
                return (x.IsIncoming) ? IncomingMessageTemplate : OutgoingMessageCaptureTemplate;
              }

              return EmptyTemplate;
            }
          }
}

在XAML中，您需要引用TemplateSelector并创建数据模板:

And in XAML you need reference TemplateSelector and create datatemplates:

<UserControl x:Class="StackOverFlow.UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:stackOverFlow="clr-namespace:StackOverFlow"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.Resources>
         <!-- Template for INCOMNIG messages -->
          <DataTemplate x:Key="IncomnigTemplate">
            <Grid>
              <Polygon Margin="10,10,0,0" Points="0,0 20,10, 0,10" Fill="#BFE8FF" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Left" VerticalAlignment="Top">
                <Polygon.RenderTransform>
                 <CompositeTransform Rotation="-181"/>
                </Polygon.RenderTransform>
              </Polygon>
              <Grid  Margin="27,0,0,0"  HorizontalAlignment="Left" Background="#BFE8FF" >
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="auto"></RowDefinition>
                  <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding MessengerText}" HorizontalAlignment="Left"  Margin="5,5,20,0" VerticalAlignment="Top" Foreground="black"></TextBlock>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding MessengerTime}" HorizontalAlignment="Left"  Margin="5,0,0,5" VerticalAlignment="Bottom" FontSize="9" Foreground="#908C8C"></TextBlock>
              </Grid>
            </Grid>
          </DataTemplate>

         <!-- Template for OUTGOING messages -->            
          <DataTemplate x:Key="OutgoinTemplate">
            <Grid>
              <Polygon Margin="10,10,0,0" Points="0,0 20,10, 0,10" Fill="Gray" RenderTransformOrigin="0.5,0.5" HorizontalAlignment="Right" VerticalAlignment="Top">
                <Polygon.RenderTransform>
                  <CompositeTransform Rotation="0"/>
                </Polygon.RenderTransform>
              </Polygon>
              <Grid  Margin="27,0,0,0"  HorizontalAlignment="Right" Background="Gray" >
                <Grid.ColumnDefinitions>
                  <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                  <RowDefinition Height="auto"></RowDefinition>
                  <RowDefinition Height="auto"></RowDefinition>
                </Grid.RowDefinitions>
                <TextBlock Grid.Column="0" Grid.Row="0" Text="{Binding MessengerText}" HorizontalAlignment="Left"  Margin="5,5,20,0" VerticalAlignment="Top" Foreground="black"></TextBlock>
                <TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding MessengerTime}" HorizontalAlignment="Left"  Margin="5,0,0,5" VerticalAlignment="Bottom" FontSize="9" Foreground="#908C8C"></TextBlock>
              </Grid>
            </Grid>
          </DataTemplate>

         <!-- Our cool datatemplate selector -->
          <stackOverFlow:TemplateSelector x:Key="MessageTemplateSelector"
                                          EmptyTemplate="{x:Null}"
                                          IncomingMessageTemplate="{StaticResource IncomnigTemplate}"
                                          OutgoingMessageCaptureTemplate="{StaticResource OutgoinTemplate}"
            />
    </UserControl.Resources>
      <!-- Don't forget ItemTemplateSelector attribute -->
      <ListBox ItemTemplateSelector="{StaticResource MessageTemplateSelector}" x:Name="lbChoosenMessagesUsers"  Grid.Column="3" FontSize="13" ItemsSource="{Binding MyDatasCurentUser}" Margin="0,0,50,0">
                <ListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                        <Setter Property="IsEnabled" Value="False"/>
                    </Style>
                </ListBox.ItemContainerStyle>
            </ListBox>
    </UserControl>

这篇关于具有自定义数据模板的列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！