Question

我有一个自定义ListView，而不是在单独的行中显示每个项目，显示同一行中的所有项目，结果如下：

ListView目前有2个项目，但我无法让ListView在单独的行中显示每个项目。这里有ListView代码：

 <ListView BorderThickness="0" ItemContainerStyle="{StaticResource ListItemStyle}" Name="LoginRegister">
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="2">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"></ColumnDefinition>
                                <ColumnDefinition Width="2*"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Image Source="/Application/Resources/Icons/user.png" Width="20" Grid.Column="0" />
                            <TextBlock
                                Foreground="{StaticResource BaseGrey}"
                                Grid.Column="1"
                                TextAlignment="Left"
                                FontWeight="Light"
                                VerticalAlignment="Center" Text="{Binding UserName}" />
                        </Grid>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>

以下是ListViewItemStyle：

 <Style x:Key="ListItemStyle" TargetType="ListViewItem">
                <Setter Property="Padding" Value="10" />
                <Setter Property="FontSize" Value="16" />
                <Style.Resources>
                    <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="#ecf0f1" />
                </Style.Resources>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#ecf0f1" />
                    </Trigger>
                </Style.Triggers>
            </Style>

这种行为可能是什么原因？

Answer 1

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"></StackPanel>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

Answer 2

如果您希望以分隔的行显示项目，则应创建RowDefinitions，而不是ColumnDefinitions：

<ListView BorderThickness="0" ItemContainerStyle="{StaticResource ListItemStyle}" Name="LoginRegister">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto*"/>
                            <RowDefinition Height="Auto*"/>
                        </Grid.RowDefinitions>
                        <Image Source="/Application/Resources/Icons/user.png" Width="20" Grid.Row="0" />
                        <TextBlock
                            Foreground="{StaticResource BaseGrey}"
                            Grid.Row="1"
                            TextAlignment="Left"
                            FontWeight="Light"
                            VerticalAlignment="Center" Text="{Binding UserName}" />
                    </Grid>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Answer 3

根据您的评论，问题是您的列表仅显示源中2个项目中的1个。根据您的来源，有两种简单的方法可以解决此问题：

一旦显示用户界面，来源永远不会改变

在这种情况下，您可以在初始化窗口之前确保完全填充源代码。

public class MainWindow {
    public List <string> People { get; set; }

    public MainWindow () {
        People = new List <string> ();

        //fancy code here that fully populates People

        InitializeComponent ();
    }
}

显示用户界面后，来源可能会发生变化

在这种情况下，您可以将源代码更改为或继承自ObservableCollection，以便在更改其集合时通知目标。

public class MainWindow {
    public ObservableCollection <string> People { get; set; }

    public MainWindow () {
        People = new ObservableCollection <string> ();
        InitializeComponent ();

        People.Add ("new person");

        //other code that modifies People after components are initialized
    }
}

还有更多方法，但这两种方法非常简单。

Answer 4

确保已正确设置ListView的View属性。在简单的ListView中，如果视图为“详细信息”，则项目将显示在多行上

自定义列表视图显示一行中的所有项目

4 个答案: