WPF C# MVVM UserControl Binding Issue

Question

У меня есть usercontrol для каждого элемента (ScreenViewItemControl) (работает нормально), я не добавляю код, но могу при необходимости.

Затем у меня есть usercontrol для перечисления всего элемента usercontrol (ScreenViewControl), например:

    <ListBox ItemsSource="{Binding Screens}"
             SelectedItem="{Binding SelectedScreen}" 
             ItemContainerStyle="{StaticResource ScreenViewStyle}"
             ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
             BorderThickness="0" 
             Background="Transparent">

        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

У меня есть ViewModel (ScreenViewViewModel):

    public ObservableCollection<ScreenInfo> Screens { get; set; }

        public ScreenInfo SelectedScreen { get; set; }

        public ScreenViewViewModel()
        {
            Screens = new ObservableCollection<ScreenInfo>
            {
                new ScreenInfo
                {
                    Name = "ScreenSoft 1",
                    Status = "Online",
                    Location = "First Floor",
                    Resolution = "1920x1080",
                },
            };            

         }

И я помещаю элемент управления на страницу с

<local:ScreenViewControl />

Я вижу, что это создает 1 пункт, но я предполагаю, что я неправильно привязываю данные? Что я пропускаю?

Добавление ScreenViewItemControl для ясности

    <UserControl.Resources>

        <DataTemplate x:Key="ScreenViewItemTemplate">
            <Border Padding="0 3" 
                    Margin="20 20 0 0" 
                    BorderThickness="2" 
                    BorderBrush="{StaticResource BlueBrush}" 
                    CornerRadius="20" 
                    Height="210" 
                    Width="192"
                    Background="{StaticResource BackgroundWhiteBrush}">

                <StackPanel Orientation="Vertical" Margin="0 3">

                    <!-- Device Name -->
                    <TextBlock Width="192" Height="30"
                               TextAlignment="Center"
                               FontWeight="Bold"
                               FontSize="{StaticResource FontSizeXL}"
                               Text="{Binding Name}" />

                    <!-- ScreenShot -->
                    <Image Width="192" Height="108" 
                           Margin="0 6" 
                           Source="{Binding ScreenShot}" />

                    <StackPanel Orientation="Vertical" >

                        <!-- Device Status -->
                        <TextBlock Height="20" 
                                   Text="{Binding Status}" 
                                   TextAlignment="Center" 
                                   Padding="6 4" />
                        <!-- Device Location -->
                        <TextBlock Height="20" 
                                   Text="{Binding Location}" 
                                   TextAlignment="Center" 
                                   Padding="6 4" />

                    </StackPanel>
                </StackPanel>
            </Border>
        </DataTemplate>

    </UserControl.Resources>

<ListBoxItem Style="{StaticResource ScreenViewStyle}"/>

Answer 1

Вы должны определить ItemTemplate для этого ListBox. По умолчанию, если вы связываете коллекцию объектов с ListBox, вызывается их метод ToString() для представления каждого отдельного объекта в этом списке.

Ниже приведен пример, как вы можете это сделать (я удалил все свойства для краткости ListBox).

<ListBox>
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel>                
                <TextBlock Text="{Binding Name}" />
                <TextBlock Text="{Binding Status}" />
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

Как указал Роберт на комментарий, вы также можете переопределить метод ToString() в классе ScreenInfo. Но это зависит от того, что бы вы хотели показать пользователю. Если это простой текст, вы можете использовать переопределенный метод ToString(), но если вы хотите отобразить свой элемент более причудливым способом, вам следует использовать ItemTemplate. В ItemTemplate вы можете определить, как каждое свойство вашего класса должно отображаться пользователю.