Chat Client Design

Wer mit dem Mango Update ein App für Chat Messages erstellen möchte und Anregungen sucht wie solch ein Client aussehen könnte, sollte mal bei scottlogic blog mal reinschauen.

Hier wir beschrieben wie so ein Message System erstellt wird, und es wir besonders viel Wert auf das XAML gelegt.

Es sieht wirklich gut aus was da gemacht wurde, und das schöne ist das es wirklich nicht viel Arbeit ist.

public enum MessageSide
{
  Me,
  You
}

/// <summary>
/// An SMS message
/// </summary>
public class Message
{ 
  public string Text { get; set; }

  public DateTime Timestamp { get; set; }

  public MessageSide Side { get; set; }
}

/// <summary>
/// A collection of messages
/// </summary>
public class MessageCollection : ObservableCollection<Message>
{
} 

Und jetzt noch ein wenig C# und Xaml und schon ist der Client fast fertig

public class MessageContentPresenter : ContentControl
{
  /// <summary>
  /// The DataTemplate to use when Message.Side == Side.Me
  /// </summary>
  public DataTemplate MeTemplate { get; set; }

  /// <summary>
  /// The DataTemplate to use when Message.Side == Side.You
  /// </summary>
  public DataTemplate YouTemplate { get; set; }

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

    // apply the required template
    Message message = newContent as Message;
    if (message.Side == MessageSide.Me)
    {
      ContentTemplate = MeTemplate;
    }
    else
    {
      ContentTemplate = YouTemplate;
    }
  }
}

<ItemsControl ItemsSource="{Binding}">
  <ItemsControl.ItemTemplate>
    <DataTemplate>
      <local:MessageContentPresenter Content="{Binding}">
        <local:MessageContentPresenter.MeTemplate>
          <!-- template for sent messages -->
          <DataTemplate>
            <Grid Margin="30, 10, 5, 0"
                  contribControls:GridUtils.RowDefinitions=",,"
                  Width="420">
              <Rectangle Fill="{StaticResource PhoneAccentBrush}"
                          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="{StaticResource PhoneAccentBrush}"
                    Margin="0,0,5,0"
                    HorizontalAlignment="Right"
                    Grid.Row="2"/>
            </Grid>                
          </DataTemplate>
        </local:MessageContentPresenter.MeTemplate>
        <local:MessageContentPresenter.YouTemplate>
          <!-- template for received messages -->
          <DataTemplate>
            <Grid Margin="5, 10, 30, 0"
                  contribControls:GridUtils.RowDefinitions=",,"
                  Width="420">
              <Path Data="m 0,0 l 0,16 l 16,0 l -16,-16"
                    Fill="{StaticResource PhoneAccentBrush}"
                    Margin="5,0,0,0"
                    HorizontalAlignment="Left"/>
              <Rectangle Fill="{StaticResource PhoneAccentBrush}"
                          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>

Quelle:

Implementing a Windows Phone 7 Conversation View