如何添加包含 Grid、StackPanel 和 TextBlock 的 ListViewItem答案

【问题标题】：How to add a ListViewItem which contains a Grid, StackPanel and a TextBlock如何添加包含 Grid、StackPanel 和 TextBlock 的 ListViewItem
【发布时间】：2019-06-17 16:33:59
【问题描述】：

我有一个列表视图。我需要以编程方式添加 ListViewItems，其中包含嵌套在 StackPanel 内的 Textblock，嵌套在 Grid 内（用于格式化文本）。我对 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 实际上是为了在它旁边添加一个图标，但我暂时把它去掉了。如果有人知道如何更好地做到这一点，请务必告诉我。

【问题讨论】：

这是可行的，但如果你认为你需要那么多控件来格式化文本，那你可能做错了。如果你能说出你需要什么样的格式我们可以看看，你可能可以用更少的控件来实现它。
@Sach 嗨，伙计，我添加了一张图片来展示我正在尝试做的事情
如果你已经有一个网格，你就不需要堆栈面板，你只需要设置一些列定义来定位你的文本块（以及当你添加回来时为你的图像设置一个列）。

标签： c# wpf visual-studio

【解决方案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 中显示的文本。用户控件上的数据绑定指的是this； 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>

它看起来像这样：

【讨论】：

编辑（在 OP 编辑​​问题后）

编辑（在 OP 编辑问题后）