Как создать различные ItemsPanelTemplate для ListBox

Question

Я пишу программу обмена мгновенными сообщениями на Windows Phone 8. И в настоящее время я занимаюсь интерфейсом для общения. Я хочу создать ListBox, который содержит все «чаты» (например, в iPhone). Входящие сообщения появляются с левой стороны, а исходящие сообщения - с правой стороны. Как это:

Так, очевидно, мне нужно установить различный выравнивание для каждого элемента.

Я пытался решить эту проблему, обернув пузырь в большом Grid, что расширяет все пространство в ItemsPanel и выровнять чат пузырь вправо (родительский пузырь чата является большим Grid). Но это не сработало, потому что сетка в ItemsPanel не заполнит все пробелы автоматически. И затем я отправился на поиски «, как заполнить все пробелы в ItemsPanel» и не повезло.

Итак, я думаю, что единственный способ сделать это - установить разные ItemsPanelTemplate для каждой ItemsPanel, либо в «Right», либо «Left».

Пожалуйста, помогите мне .. Спасибо!

Итак, как вы создаете селектор для разных ItemsPanelTemplate?

Answer 1

вам нужно только 2 Просмотр для ваших сообщений ака DataTemplate

один для MyMsg и один для Answer как inhire из класса сообщений или интерфейса (ваше решение) позволяет назвать его Msg

так что вы можете установить ваш ItemsSource к List<Msg> или ObservableCollection<Msg>, и вы сделали

Answer 2

Вам просто нужно настроить ItemContainer:

<ItemsControl.ItemContainerStyle> 
    <Style TargetType="ContentPresenter"> 
     <Style.Triggers> 
      <DataTrigger Binding="{Binding IsAnswer}" Value="True"> 
       <Setter Property="HorizontalAlignment" Value="Right"/> 
      </DataTrigger> 
     </Style.Triggers> 
    </Style> 
</ItemsControl.ItemContainerStyle> 

В случае, если вы не имеют спусковой стиль, вы можете использовать связывание и BOOL для HorizontalAlignment преобразователя:

<ItemsControl.ItemContainerStyle> 
    <Style TargetType="ContentPresenter"> 
     <Setter Property="HorizontalAlignment" Value="{Binding IsAnswer,Converter={StaticResource AlignmentConverter}}"/> 
    </Style> 
</ItemsControl.ItemContainerStyle>