WPF Сделать StackPanel в горизонтальной ориентации

Question

Мой XAML код выглядит следующим образом

<Window.Resources> 
    <DataTemplate DataType="{x:Type local:TopRulerElementViewModel}"> 
      <Ellipse Width="5" Height="5"> 
       <Ellipse.Fill> 
        <SolidColorBrush Color="Black"/> 
       </Ellipse.Fill> 
      </Ellipse> 
    </DataTemplate> 
</Window.Resources> 
<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Height="200" Width="500"> 
     <ItemsControl ItemsSource="{Binding TopRulerElements}"/> 
</StackPanel> 

Мой код в ViewModel, как это

private ObservableCollection<TopRulerElementViewModel> _TopRulerElements; 

    public ObservableCollection<TopRulerElementViewModel> TopRulerElements 
    { 
     get { return _TopRulerElements; } 
     set 
     { 
      _TopRulerElements = value; 
      RaisePropertyChanged("TopRulerElements"); 
     } 
    } 

Но когда я запускаю мое приложение. Все эллипсы показаны вертикально. Как сделать эллипс показан горизонтально?

Answer 1

Вы не должны этого делать, вам нужно установить свойство itemspanel элемента управления для указания того, как элементы должны быть выровнены. попробуйте следующий код.

<Window.Resources> 
     <DataTemplate DataType="{x:Type local:TopRulerElementViewModel}"> 
       <Ellipse Width="5" Height="5"> 
        <Ellipse.Fill> 
         <SolidColorBrush Color="Black"/> 
        </Ellipse.Fill> 
       </Ellipse> 
     </DataTemplate> 
    </Window.Resources> 

    <ItemsControl ItemsSource="{Binding TopRulerElements}"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Height="200" Width="500"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
    </ItemsControl> 

Answer 2

Я нашел ответ. Эллипс может отображаться вертикально при небольшом изменении кода xaml.

<StackPanel Orientation="Horizontal" Grid.Row="1" Grid.Column="1" Height="200" Width="500"> 
      <ItemsControl ItemsSource="{Binding TopRulerElements}"> 
       <ItemsControl.ItemsPanel> 
        <ItemsPanelTemplate> 
         <StackPanel Orientation="Horizontal"/> 
        </ItemsPanelTemplate> 
       </ItemsControl.ItemsPanel> 
      </ItemsControl> 
</StackPanel> 

Добавить ItemsPanel, то он работает