如何添加包含网格、StackPanel和TextBlock的StackPanel

Question

我有一个ListView。我需要以编程的方式添加ListViewItems，其中包含嵌套在StackPanel内部的Textblock，嵌套在网格中的Textblock(用于格式化文本)。我是WPF的新手，我找不到答案。下面是我希望每个ListViewItem都添加一次的代码：

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

这里有一个图像来演示我正在尝试的do.The代码将ListViewItem放在中间，但是通过使用一个网格和一个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编辑完问题后)

如果您只想做中心文本，您可以去掉额外的控件，只需在您的TextAlignment=Center中使用TextBlock。

<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>

看起来是这样的：

​

​