Упорядочить динамический список кнопок по горизонтали в док-панели

Question

Я использую док-панель, чтобы отобразить список кнопок, которые считываются из источника данных и хотят отображать их по горизонтали, но они отображают их по вертикали.

Я использую следующий код:

<DockPanel Name="DockPanel2" Grid.Row="1" Visibility="Visible"> 
      <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="260,50,0,0"> 
       <ItemsControl ItemsSource="{Binding PageViewModels}"> 
        <ItemsControl.ItemTemplate> 
         <DataTemplate> 
          <Button Foreground="MidnightBlue" 
          Content="{Binding Name}" Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
           CommandParameter="{Binding }"/> 
         </DataTemplate> 
        </ItemsControl.ItemTemplate> 
       </ItemsControl> 
      </StackPanel> 
      <ContentControl Content="{Binding CurrentPageViewModel}"/> 
     </DockPanel> 

Если я использую следующий код (с кнопками, как статический список я могу отобразить список в горизонтальной моде

<DockPanel Name="DockPanel2" Grid.Row="1" Visibility="Visible"> 
      <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Margin="260,50,0,0"> 
       <Button Content="Button 1" Margin="2" /> 
       <Button Content="Button 2" Margin="2" /> 
       <Button Content="Button 3" Margin="2" /> 
       <Button Content="Button 4" Margin="2" /> 
       <Button Content="Button 5" Margin="2" /> 
      </StackPanel> 

      <ContentControl Content="{Binding CurrentPageViewModel}" /> 
     </DockPanel> 

Can. кто-нибудь сказать мне, где я буду неправильно.

Спасибо, T

Answer 1

Вы должны использовать свойство ItemsPanelTemplate в ItemControl и положить StackPanel внутри него.

Что-то вроде следующего:

<DockPanel Name="DockPanel2" Grid.Row="1" Visibility="Visible"> 
      <ItemsControl ItemsSource="{Binding PageViewModels}" 
          DockPanel.Dock="Top"> 
       <ItemsControl.ItemPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" /> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemPanel> 

       <ItemsControl.ItemTemplate> 
        <DataTemplate> 
         <Button Foreground="MidnightBlue" 
         Content="{Binding Name}" Command="{Binding DataContext.ChangePageCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" 
          CommandParameter="{Binding }"/> 
        </DataTemplate> 
       </ItemsControl.ItemTemplate> 
      </ItemsControl> 
     <ContentControl Content="{Binding CurrentPageViewModel}"/> 
    </DockPanel> 

Обратите внимание, что я удалил stackPanel Juste после dockPanel

Answer 2

Проблема заключается в том, что ItemsControl не генерирует отдельные элементы в StackPanel, он генерирует элементы в собственной «панели», поэтому вам необходимо использовать StackPanel для ItemsPanel.

Я предоставлю вам пример кода, как только я попробовал это сам.

EDIT: Я просто ненавижу вас, ребята, которые просто берут другие ответы и использовать их как свои собственные, я думаю, мне не нужно, чтобы добавить код примера ...

Answer 3

Вы должны указать ItemsPanelTemplate из элемент ItemsControl будет StackPanel в горизонтальной ориентации. То, что у вас есть, это просто StackPanel, в котором размещен элемент ItemsControl, - тот факт, что он ориентирован по горизонтали, здесь не имеет никакого смысла. Так что попробуйте это:

<ItemsControl ItemsSource="{Binding PageViewModels}"> 
     <ItemsControl.ItemPanelTemplate> 
      <ItemsControl.ItemsPanel> 
       <ItemsPanelTemplate> 
        <StackPanel Orientation="Horizontal" /> 
       </ItemsPanelTemplate> 
      </ItemsControl.ItemsPanel> 
     </ItemsControl.ItemPanelTemplate> 

     <ItemsControl.ItemTemplate ... your existing xaml > 
</ItemsControl> 

Answer 4

Вы должны установить StackPanel в ItemsPanel из ItemsControl.

Пример:

<ItemsControl ....> 
     <ItemsControl.ItemsPanel> 
      <ItemsPanelTemplate> 
       <StackPanel Orientation ="Horizontal"/> 
      </ItemsPanelTemplate> 
     </ItemsControl.ItemsPanel> 
     <ItemsControl.ItemTemplate> 
      <DataTemplate> 
       <Button .... /> 
      </DataTemplate> 
     </ItemsControl.ItemTemplate> 
    </ItemsControl>