XAML ItemsControl项未显示

Question

I'm trying to convert XAML WP8 code to WPF. The purpose is showing conversations in chat bubble style, which works op WP8.

It consists of a Message object, which stores information about the message, a MessageCollection object which stores them as a ObservableCollection, and a ContentPresenter, which inherits ContentControl. In there two DataTemplates are defined which should be picked by the xaml code.

I've been searching for days and trying everything, but whenever I start the project it just shows 'ChatBubble.Message' (which is a message object), so no text and no template is applied. The layout itself works when tested without the itemscontrol binding.

I tried debugging by using Debug.Show in the ContentPresenter, which proved that it does get accessed by the ConversationView. It also showed that it does contain the test data I added, and differentiates between the two templates (MeTemplate and YouTemplate to place the bubble right or left).

The ConversationView, which shows the bubbles in XAML:

<Grid x:Name="LayoutRoot" Background="Black">
    <ItemsControl ItemsSource="{Binding}">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <local:MessageContentPresenter Content="{Binding}">
                    <local:MessageContentPresenter.MeTemplate>
                        <DataTemplate>
                            <Grid Margin="30, 10, 5, 0"
                  local:GridUtils.RowDefinitions=",,"
                  Width="420">
                                <Rectangle Fill="White"
                         Grid.RowSpan="2"/>
                                <TextBlock Text="{Binding Path=Text}"
                         Style="{StaticResource TextBlockStyle}"/>
                                <TextBlock Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
                         Style="{StaticResource TimestampStyle}"
                         Grid.Row="1"/>
                                <Path Data="m 0,0 l 16,0 l 0,16 l -16,-16"
                    Fill="White"
                    Margin="0,0,5,0"
                    HorizontalAlignment="Right"
                    Grid.Row="2"/>
                            </Grid>
                        </DataTemplate>
                    </local:MessageContentPresenter.MeTemplate>
                    <local:MessageContentPresenter.YouTemplate>
                        <DataTemplate>
                            <Grid Margin="5, 10, 30, 0"
                  local:GridUtils.RowDefinitions=",,"
                  Width="420">

                                <Path Data="m 0,0 l 0,16 l 16,0 l -16,-16"
                    Fill="White"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"/>
                                <Rectangle Fill="White"
                         Grid.Row="1" Grid.RowSpan="2"/>
                                <TextBlock Text="{Binding Path=Text}"
                         Style="{StaticResource TextBlockStyle}"
                         Grid.Row="1"/>
                                <TextBlock Text="{Binding Path=Timestamp, Converter={StaticResource StringFormatConverter}, ConverterParameter='ddd, HH:mm'}"
                         Style="{StaticResource TimestampStyle}"
                         Grid.Row="2"/>
                            </Grid>
                        </DataTemplate>
                    </local:MessageContentPresenter.YouTemplate>
                </local:MessageContentPresenter>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>          
</Grid>

Here's the ContentPresenter:

public class MessageContentPresenter : ContentControl
{
    public DataTemplate MeTemplate { get; set; }

    public DataTemplate YouTemplate { get; set; }

    protected override void OnContentChanged(object oldContent, object newContent)
    {
        base.OnContentChanged(oldContent, newContent);

        Message message = newContent as Message;

        if (message.Side == MessageSide.Me)
        {
            ContentTemplate = MeTemplate;
        }
        else
        {
            ContentTemplate = YouTemplate;
        }
    }

Any idea what I'm missing?

Answer 1

In WPF you would usually use a DataTemplateSelector to select the proper DataTemplate for each item:

public class MessageTemplateSelector : DataTemplateSelector
{
    public DataTemplate MeTemplate { get; set; }
    public DataTemplate YouTemplate { get; set; }

    public override DataTemplate SelectTemplate(
        object item, DependencyObject container)
    {
        var message = item as Message;
        return message.Side == MessageSide.Me ? MeTemplate : YouTemplate;
    }
}

You would assign it to the ItemsControl's ItemTemplateSelector property like this:

<Window.Resources>
    <DataTemplate x:Key="MeTemplate">
        ...
    </DataTemplate>
    <DataTemplate x:Key="YouTemplate">
        ...
    </DataTemplate>
</Window.Resources>
...
<ItemsControl ItemsSource="{Binding}">
    <ItemsControl.ItemTemplateSelector>
        <local:MessageTemplateSelector
            MeTemplate="{StaticResource MeTemplate}"
            YouTemplate="{StaticResource YouTemplate}"/>
    </ItemsControl.ItemTemplateSelector>
</ItemsControl>