我应该如何将列表数据添加到网格

Posted 2023-02-19

【中文标题】我应该如何将列表数据添加到网格

【英文标题】：How should I add list data to Grid

【发布时间】：2022-01-11 08:39:11

【问题描述】：

<Grid Grid.Row="1">
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    
</Grid>

我想从这里的列表中添加TextBlock。

ViewModel 代码

我尝试使用ListBox，但这不是我想要的。

<ListBox ItemsSource="Binding Serials" Grid.Row="1">
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Orientation="Horizontal" IsItemsHost="True" ScrollViewer.CanContentScroll="True"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemTemplate>
        <DataTemplate>
            <Grid>
                <TextBlock Text="Binding aaa" Margin="20"/>
            </Grid>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

我将框格并进行分页。 我想要的是将TextBlock 在网格中居中。

我该怎么做？

【问题讨论】：

我认为不清楚，你想做什么。请详细描述，预期的结果是什么？您是否希望您的项目像Grid 那样排列，并且像您的第一个示例（6x8）一样具有固定的行和列？ “我想要的是网格中心的TextBlock。”是什么？您的意思是要使每个网格单元格中的文本居中吗？

@thatguy 是的，你明白我的意思，我希望项目像网格一样排列，具有固定的行和列，将每个网格单元格中的文本居中，我的英语不是很好。很抱歉给您添麻烦

【参考方案1】：

这里的做法是错误的，你可以简单地使用ListView代替grid，它会动态使用空间并显示在grid view中。

我们填充了一个我们自己的用户对象的列表，每个用户都有一个名字和一个年龄。一旦我们将列表分配给 ListView 的 ItemsSource 属性，数据绑定过程就会自动发生，但结果有点令人沮丧：

这里是示例代码：

Xaml：

<Grid>
  <ListView Margin="10" Name="lvDataBinding"></ListView>
</Grid>

c#

public partial class ListViewDataBindingSample : Window
 
    public ListViewDataBindingSample()
    
        InitializeComponent();
        List<User> items = new List<User>();
        items.Add(new User()  Name = "John Doe", Age = 42 );
        items.Add(new User()  Name = "Jane Doe", Age = 39 );
        items.Add(new User()  Name = "Sammy Doe", Age = 13 );
        lvDataBinding.ItemsSource = items;
    
 

public class User

    public string Name  get; set; 

    public int Age  get; set; 

【讨论】：

我用过listview和listbox，但不是我想要的，你可以看看我编辑的代码

【参考方案2】：

我认为您对Grid 和Listview 感到困惑。

为什么要同时使用这两个？

试试水平列表视图。

<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"></StackPanel>
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

【讨论】：

因为我想做一个排队软件。一张表大概有50条数据，多余的数据会做成页面，谢谢您的回答

【参考方案3】：

如果您想将列表与Grid 类似的布局绑定，请使用ListBox 和UniformGrid 作为项目面板。在DisplayMemberPath 中指定一个属性，那么您不必创建多余的DataTemplate 来绑定aaa。分配 ItemsContainerStyle 以调整内容对齐方式以使内容居中。

<ListBox Grid.Row="1" ItemsSource="Binding Serials" DisplayMemberPath="aaa">
   <ListBox.ItemsPanel>
      <ItemsPanelTemplate>
         <UniformGrid Rows="6" Columns="8"/>
      </ItemsPanelTemplate>
   </ListBox.ItemsPanel>
   <ListBox.ItemContainerStyle>
      <Style TargetType="x:Type ListBoxItem" BasedOn="StaticResource x:Type ListBoxItem">
         <Setter Property="HorizontalContentAlignment" Value="Center"/>
         <Setter Property="VerticalContentAlignment" Value="Center"/>
      </Style>
   </ListBox.ItemContainerStyle>
</ListBox>

当然可以绑定UniformGrid的Rows和Columns，动态适配网格。

【讨论】：

感谢您的好建议！

【参考方案4】：

XAML 代码

<Grid Grid.Row="1" x:Name="gridMain">
    <Grid.ColumnDefinitions>
...
</Grid>

后面的代码

TextBlock textBlock = new TextBlock();
textBlock.Text = "I'm here!";

Grid.SetRow(textBlock, 2);
Grid.SetColumn(textBlock, 2);
gridMain.Children.Add(textBlock);