Как добавить ListViewItem, который содержит Grid, StackPanel и TextBlock

Question

У меня есть ListView.Мне нужно добавить ListViewItems программно, которые содержат Textblock, вложенный в StackPanel, вложенный в 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 был фактически с целью добавления значка рядом с ним, но я временно убрал это. Если кто-то знает, как сделать это лучше, то непременно сообщите мне.

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 вы должны использовать ContentControl внутри вашего ListView для динамического отображения 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;
    }
}

Результат:

---

РЕДАКТИРОВАТЬ (после того, как ОП отредактировал вопрос)

Если все, что вам нужно, это центрировать текст, вы можете избавиться от дополнительных элементов управления и просто использовать 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>

И это будет выглядеть так: