2014-01-28 2 views
0

У меня есть сетка размером 400 x 150, в которой я хотел бы добавить Listbox.Попытка сделать Listbox горизонтальной внутри сетки

Listbox состоит из сетки, содержащей 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, но проблема в том, что границы сеток отображаются неправильно.

Как я могу сделать этот список горизонтальным, с границами сетки, содержащей видимый текстовый блок?

ответ

1

U можно использовать, как это иметь горизонтальную ScrollViewer из Listbox

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

В дополнение к этому Вы должны регулировать высоту и ширину как ListBox и сетки в соответствии с вашими требование.

0

Я думаю, вы можете использовать ItemsPanel, чтобы изменить ориентацию listBox. и borderChickness также необходимо. Надеюсь, я могу вам помочь. Спасибо!

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

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

0

Используйте этот код он может помочь вам:

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

использовать эту помощь –

0

Используйте ItemsPanel свойство ListBox. попробуйте эту работу для меня.

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

Если я правильно, вы не хотите StackPanelвнутри в DataTemplate, вы на самом деле хотите горизонтально выложенные элементы внутри ListBox. Вам необходимо изменить ListBox.ItemsPanel, и вам нужно отключить вертикальную прокрутку и включить горизонтальную прокрутку в ListBox. Вот полный XAML:

<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" 
     ScrollViewer.HorizontalScrollBarVisibility="Auto"> 
    <ListBox.ItemsPanel> 
     <ItemsPanelTemplate> 
      <VirtualizingStackPanel Orientation="Horizontal" 
            CanVerticallyScroll="False" 
            CanHorizontallyScroll="True"/> 
     </ItemsPanelTemplate> 
    </ListBox.ItemsPanel> 

</ListBox> 
Смежные вопросы