如何添加一个包含网格，StackPanel和TextBlock的ListViewItem

Question

我有一个ListView。 我需要以编程方式添加ListViewItems，其中包含嵌套在StackPanel内部，嵌套在Grid内部的Textblock（用于格式化文本）。 我对WPF比较陌生，找不到答案。 这是我希望每个ListViewItem添加一次的代码：

<ListViewItem Padding="15">
    <Grid Width="1285">
        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Width="Auto">
            <TextBlock Text="ITEM" VerticalAlignment="Center" />
        </StackPanel>
    </Grid>
</ListViewItem>

这是展示我正在尝试做的图像。上面的代码将ListViewItem放在中间，但是通过使用Grid和StackPanel，我能够将文本居中（StackPanel实际上是为了添加图标如果有人知道如何做得更好，那就一定要告诉我。

Answer 1

因此，您需要一个UserControl ，它将用于显示ListView每个项目。 因此，您必须按照自己的方式设计用户控件。 因此，如果需要在网格内的面板内使用TextBlock ，则必须这样做。

<UserControl x:Class="SOWPF.MyListViewItem"
             ....
             mc:Ignorable="d" 
             d:DesignHeight="48" d:DesignWidth="250">
    <Grid>
        <StackPanel Orientation="Horizontal" Width="250" Height="36" Margin="10" Background="PeachPuff">
            <TextBlock Background="White" Width="200" Height="32" Margin="2" Text="{Binding DisplayText}"/>
        </StackPanel>
    </Grid>
</UserControl>

要显示数据，您必须具有一个具有公共属性的类。 因此，我有一个带有一个公共string属性的简单类，它将包含要在TextBlock显示的文本。 用户控件上的数据绑定是指此。 DisplayText是公共字符串属性：

public class DisplayData
{
    public string DisplayText { get; set; }
}

现在，在View ，必须在ListView使用ContentControl才能动态显示UserControl 。

<Window x:Class="SOWPF.MainWindow"
        ....
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <ListView>
            <ItemsControl ItemsSource="{Binding DisplayList}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <local:MyListViewItem/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </ListView>
    </Grid>
</Window>

这是您后面的代码。 我这样做是为了方便，但您实际上应该使用ViewModel 。

public partial class MainWindow : Window
{
    public List<DisplayData> DisplayList { get; set; }

    public MainWindow()
    {
        InitializeComponent();

        DisplayList = new List<DisplayData>
        {
            new DisplayData() { DisplayText = "A" },
            new DisplayData() { DisplayText = "B" },
            new DisplayData() { DisplayText = "C" }
        };

        DataContext = this;
    }
}

结果：

---

编辑（OP编辑问题后）

如果您要做的只是居中文本，则可以摆脱多余的控件，只需在TextBlock使用TextAlignment=Center即可。

<UserControl x:Class="SOWPF.MyListViewItem"
             ....
             mc:Ignorable="d" 
             d:DesignHeight="48" d:DesignWidth="250">
    <TextBlock Background="LightCoral" Width="200" Height="32" Margin="2" Text="{Binding DisplayText}"
               TextAlignment="Center"/>
</UserControl>

它看起来像这样：