Question

嗨，我喜欢icq这样的windows商店应用，但我的很简单。但现在我有问题，因为我不知道如何使用绑定的make模板看起来像这样：

我的列表框外观如下：

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

任何人都可以告诉我如何制作一个包含两种消息的列表框 - 比如来自我和其他人（左和右）的消息。简而言之，就像icq一样。感谢他们的意愿。

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

Answer 1

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

假设您的MyDatasCurentUser集合是Message的类型。而且我确定Message包含一些标志，如果它是传入/传出消息：

 public bool IsIncoming { get; set; }

现在您需要创建DataTemplateSelector类：

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并创建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>

带有自定义datatemplate的列表框

1 个答案: