如何添加一個包含網格，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>

它看起來像這樣：