При помощи каких средств можно сделать отображение сообщений ,как в outlook?(WPF)

235

20 апреля 2018, 13:34

Меня интересует как можно сделать отображение сообщений как в outlook,т.е есть список и отображается какая-то информация,например отправитель,тема,когда было отправлено, и только по нажатию на само сообщение видно оно целиком. Если важно:сообщения я получаю при помощи ImapClient(нужно именно его использовать по заданию).Пример того,чего я хочу добиться в итоге, на картинке.

Answer 1

Покажу простейший пример подобного функционала...

Данные

Для начала создадим модель нашего сообщения, пусть там будет информация об авторе, дата, ну и сам текст:

public class MessageModel
{
    public MessageModel(string autor, DateTime date, string text)
    {
        Autor = autor;
        DateTime = date;
        Text = text;
    }
    public string Autor { get; set; }
    public DateTime DateTime { get; set; }
    public string Text { get; set; }
}

Далее создадим коллекцию, которая будет содержать наши сообщения, пусть это будет в MainWindow, прям в самом начале класса пишем:
```
public ObservableCollection<MessageModel> Messages { get; set; } = new ObservableCollection<MessageModel>();
```

В конструкторе MainWindow() заполним нашу коллекцию и зададим DataContext:

public MainWindow()
{
    InitializeComponent( );
    Messages.Add(new MessageModel("User 1", DateTime.Now, "Привет мир!"));
    Messages.Add(new MessageModel("User 2", DateTime.Now, "Хочу кушать...."));
    DataContext = this;
}

Все, простейшие данные для привязки у нас есть, осталось реализовать интерфейс.

Интерфейс

Создадим Grid, который будет разделять наше пространство на 2 колонки:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>

</Grid>

В левой части пусть будет отображение всех сообщений и возьмем только автора и дату. Для этого нам надо задать шаблон ItemTemplate. Также, мы уже сейчас можем указать привязку, ItemsSource:

<ListBox Grid.Column="0" ItemsSource="{Binding Messages}">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>
                <TextBlock Text="{Binding Autor}"/>
                <TextBlock Text="{Binding DateTime}"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

В левую часть, давайте поместим сверху автора, дату, а снизу пусть все пространство будет занято сообщением. Ну а также, давайте привяжем все элементы к выбранному элементу нашего списка, делается это очень просто! Все элементы мы привязываем как обычно, но только с указанием еще имени нашей коллекции, то есть вот так: {Binding Messages/Autor}, а также у нашего ListBox надо указать IsSynchronizedWithCurrentItem="True". Таким образом при клике на объект в ListBox мы будем видеть нужные данные в левой части:
```
<Grid Grid.Column="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="40"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal" Margin="5,0">
        <TextBlock Text="{Binding Messages/Autor}"/>
        <TextBlock Text="{Binding Messages/DateTime}" Margin="5,0,0,0"/>
    </StackPanel>
    <TextBlock Grid.Row="1" Text="{Binding Messages/Text}"/>
</Grid>
```

Вся разметка целиком у нас получится такая:

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition Width="2*"/>
    </Grid.ColumnDefinitions>
    <ListBox Grid.Column="0" ItemsSource="{Binding Messages}" IsSynchronizedWithCurrentItem="True">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel>
                    <TextBlock Text="{Binding Autor}"/>
                    <TextBlock Text="{Binding DateTime}"/>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <Grid Grid.Column="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal" Margin="5,0">
            <TextBlock Text="{Binding Messages/Autor}"/>
            <TextBlock Text="{Binding Messages/DateTime}" Margin="5,0,0,0"/>
        </StackPanel>
        <TextBlock Grid.Row="1" Text="{Binding Messages/Text}"/>
    </Grid>
</Grid>

Проверка

p.s. тут много чего нету, вам как минимум еще нужно будет реализовывать INotifyPropertyChanged да и много чего еще. Но на первое время, думаю вполне подходящий вариант. Удачи!