CODEWITHSUNDEEP
c#wpfxaml
user958547
user958547

Reputation:

How to create different ItemsPanelTemplate for a ListBox

I'm writing an IM program on Windows Phone 8. And I am currently dealing with the UI for chatting. I want to create a ListBox that holds all the "chat bubbles" (like those in iPhone). The incoming messages appear on the left-hand side, and outgoing messages on the right-hand side. Like this:

enter image description here

So obviously, I need to set differnt alignment for each item.

I was trying to solve this by wrapping the bubble in a large Grid that expands all the space in the ItemsPanel, and align the chat bubble to the right (the parent of the chat bubble is the large Grid). But that didn't work because a grid in ItemsPanel won't fill up all the spaces automatically. And then I went for searching "how to fill up all spaces in ItemsPanel" and no luck.

So, I think the only way to do this is to set different ItemsPanelTemplate for each ItemsPanel, to either "Right" or "Left".

Please, help me.. Thank you!

So how do you create a selector for different ItemsPanelTemplate?

Upvotes: 1

Views: 1213

Answers (2)

user1064519
user1064519

Reputation: 2190

You just need to customize the 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>

In case you dont have style triggers, you can use binding and a bool to HorizontalAlignment converter :

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

Upvotes: 1

WiiMaxx
WiiMaxx

Reputation: 5420

you only need 2 View's for your messages aka DataTemplate

one for MyMsg and one for Answer both inhire from the Message class or interface (your decision) lets call it Msg

so you can set your ItemsSource to List<Msg> or ObservableCollection<Msg> and you are done

Upvotes: 0

Related Questions