1

Есть чат на WPF, в нем каждое сообщение должно выглядеть как на картинке, возможно ли как то сделать шаблон через код, или на каждое сообщение прописывать каждый элемент? Если вопрос я задал непонятный или некорректный, напишите в комментариях.Вид каждого сообщения

VeNNoM
  • 115
  • 1
    Познайте стили и привязки, сделайте свой контрол и используйте его. – EvgeniyZ May 05 '20 at 13:10
  • За наводку спасибо. Т.е. возможно создать подобный свой контрол, который будет растягиваться в зависимости от длины сообщения? – VeNNoM May 05 '20 at 13:12
  • 1
    Конечно можно, это же WPF, основные плюсы которого XAML и система привязок. Вот например я делал такой контрол, не чат, но для понимания думаю будет достаточно. – EvgeniyZ May 05 '20 at 13:23
  • Спасибо! Попробую сделать. – VeNNoM May 05 '20 at 13:25
  • Я вот начал создавать свой UserControl. У него получается должно быть 4 поля. 1) Текст сообщения 2) Имя 3) Дата 4) Изображение профиля. Как мне эти поля прописать в .cs юзерконтрола? – VeNNoM May 05 '20 at 16:04
  • Там ведь сказано про это все, начиная с Теперь нам нужно сделать основной класс, который будет задан как DataContext, некий MainViewModel. и до конца идет использование созданного контрола. Тот контрол имеет свои свойства по типу Text, DoubleText и др, они привязываются из коллекции к XAML. – EvgeniyZ May 05 '20 at 16:08
  • 1
    Ого, я смог. Большое спасибо всем за помощь! – VeNNoM May 05 '20 at 16:40
  • Можно задать еще вопрос? Вот у меня есть StackPanel. На него добавляются юзерконтролы как на картинке. Мне как то надо реализовать так, чтобы сообщения загружались порционно. Например, последние 30 сообщений. Если прокручивать наверх, то прогружаются еще сообщения. Нет идей как это сделать? Или если это звучит сложно, то как хотя бы добавлять в StackPanel элементы перед предыдущим элементом(не после, а перед)? – VeNNoM May 06 '20 at 15:37
  • 1
    А почему вы добавляете элементы в StackPanel? Это UI, вид интерфейса, а не источник данных! У вас должна быть коллекция (в моем примере это ObservableCollection<ButtonViewModel> Buttons) в которую вы помещаете все, что вам надо, не трогая интерфейс. По поводу вашего вопроса - задайте лучше новый, может там люди дадут полный ответ, а так это называется "виртуализация". – EvgeniyZ May 06 '20 at 16:13
  • Чьерт побьери, сколько страшных слов. Ладно, спасибо, попробую расшифровать. – VeNNoM May 06 '20 at 17:41
  • А класс MainViewModel где указан в этом примере? В .cs файле юзерконтрола? – VeNNoM May 06 '20 at 17:45
  • А какая разница где он указан? Вообще, почитайте про MVVM, вы узнаете, что там делится все на 3 слоя (Model - данные, View - интерфейс который видит пользователь, ViewModel - некий промежуточный слой, который подготавливает все необходимое для привязки и обрабатывает действия пользователя), слой View является неким отдельным слоем, который не должен знать совсем нечего про другие слои, как и другие слои не должны знать нечего про него, слой Model также не должен знать про другие слои. Исходя из этого, давайте думать UserControl это UI? Если да, то позволительно там делать MainViewModel? – EvgeniyZ May 07 '20 at 10:05

1 Answers1

6

Есть обычный ItemsControl, с которым даже делать ничего не нужно, чтобы он формировал вертикальный стек элементов. Покажу только разметку без привязок, но вам потребуются привязки Binding, чтобы ей воспользоваться

<ItemsControl>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Vertical" Background="LightGray" Margin="5">
                <DockPanel>
                    <Border Width="50" Height="50" BorderBrush="Black" BorderThickness="1" Margin="5">
                        <Image Source=".."/>
                        <!-- Здесь Source будет указывать на путь к картинке.
                        Путь может быть как на диске, так и в сети, то есть URL. -->
                    </Border>
                    <TextBlock Text="Имя" Margin="5"/>
                    <TextBlock HorizontalAlignment="Right" Text="21:55" Margin="5"/>
                </DockPanel>
                <TextBlock Margin="5" Text="Текст сообщения" />
            </StackPanel>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

разметка для чата

aepot
  • 49,560
  • Только там скролла не будет ;) –  May 05 '20 at 15:16
  • ScrollViewer для этого есть. Я старался не усложнять ответ. Вопрос был про то, как разметить сообщение. – aepot May 05 '20 at 15:19