WPF C# MVVM UserControl 綁定問題

Question

我為每個項目（ScreenViewItemControl）（工作正常）都有一個用戶控件，不添加代碼，但如果需要可以。

然后我有一個用戶控件來列出所有項目用戶控件（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>

我有一個視圖模型（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

您應該為此ListBox定義ItemTemplate 。 默認情況下，如果將對象集合綁定到ListBox ，則會調用其ToString()方法來表示此列表中的每個 object。

下面是一個如何做到這一點的示例（為簡潔起見，我已從ListBox中刪除了所有屬性）。

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

正如羅伯特在評論中指出的那樣，您還可以覆蓋ScreenInfo class 中的ToString()方法。 但這取決於您想向用戶顯示什么。 如果是簡單的文本，你可以使用重寫的ToString()方法，但是如果你想以更花哨的方式顯示你的項目，你應該使用ItemTemplate 。 在ItemTemplate中，您可以定義 class 中的每個屬性應如何顯示給用戶。