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

Мой код 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");
        }
    }

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


c# wpf stackpanel
person Koenig04    schedule 24.01.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы не должны этого делать, вам нужно установить свойство 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>
person Vijay    schedule 24.01.2017

arrow_upward
1
arrow_downward

Я нашел ответ. Эллипс может отображаться вертикально при внесении небольших изменений в код 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, и все заработает

person Koenig04    schedule 24.01.2017