Question

我有一个400 x 150的网格，我想在其中添加一个列表框。

列表框由包含TextBlock的网格组成。

<Grid Width="400" Height="150">
    <ListBox x:Name="list" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Grid Width = "80">
                        <Border BorderBrush="Black" HorizontalAlignment="Right"   />
                        <TextBlock Foreground="Black"  Text="{Binding  name}" />
                     </Grid>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

但是列表是垂直显示的。

我尝试使用VirtualizingStackPanel，但问题是网格的边框显示不正确。

如何使此列表看起来水平，包含文本块的网格边框可见？

Answer 1

如果我是正确的，您不希望在StackPanel内部DataTemplate ，您实际上需要{{1}内部的水平布局项目}。您需要更改ListBox，并且需要禁用垂直滚动并在ListBox.ItemsPanel中启用水平滚动。这是完整的XAML：

ListBox

Answer 2

U可以像这样使用Listbox的水平scrollViewer

<Grid Width="400" Height="150">
<ListBox x:Name="list" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate >
                <StackPanel Orientation="Horizontal"></StackPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate >
                <StackPanel Orientation="Horizontal">
                <Grid Width = "80">
                    <Border BorderBrush="Black" HorizontalAlignment="Right"   />
                    <TextBlock Foreground="Black"  Text="{Binding  name}" />
                 </Grid>
            </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
 </Grid>

除此之外，你必须根据你的要求调整列表框和网格的高度和宽度。

Answer 3

我认为你可以使用ItemsPanel来改变列表框的方向。并且borderThickness也是必要的。希望我可以帮助你。 THX！

<Grid Width="400" Height="150">
    <ListBox x:Name="list" >
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Grid Width = "80">
      <!-- if you want to use border to separate items, HorizontalAlignment="Right";
           and if use it as container, HorizontalAlignment="Stretch" -->
                        <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right"/>
                        <TextBlock Foreground="Black"  Text="{Binding  name}" />
                     </Grid>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>
</Grid>

Answer 4

我认为Chris是正确的，但我确信你需要在ItemsPanel模板中使用内容展示器。

<Grid Width="400" Height="150">
<ListBox x:Name="list" >
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <Grid Width = "80">
  <!-- if you want to use border to separate items, HorizontalAlignment="Right";
       and if use it as container, HorizontalAlignment="Stretch" -->
                    <Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right">
                        <TextBlock Foreground="Black"  Text="{Binding  name}" />
        </Border>   
                 </Grid>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal">
        <ContentPresenter/>
    </StackPanel>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>
</ListBox>

Answer 5

使用此代码可以帮助您：

<Grid Width="400" Height="150">
        <ListBox x:Name="list" >
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                     <StackPanel Orientation="Horizontal"/>
                 </ItemsPanelTemplate>
              </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>              
                        <Grid Width = "80">
                            <Border BorderBrush="Black" HorizontalAlignment="Right"   />
                            <TextBlock Foreground="Black"  Text="{Binding  name}" />
                         </Grid>                
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>

Answer 6

使用listbox的ItemsPanel属性。试试这个对我的工作。

<Grid Width="400" Height="150">
    <ListBox x:Name="list" >
      <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
          <StackPanel Orientation="Horizontal">
       </ItemsPanelTemplate>
      </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <Grid Width = "80">
                        <Border BorderBrush="Black" HorizontalAlignment="Right"   />
                        <TextBlock Foreground="Black"  Text="{Binding  name}" />
                     </Grid>
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

试图在网格中使列表框水平

6 个答案: