CODEWITHSUNDEEP
c#wpfxaml
XN16
XN16

Reputation: 5889

WPF ItemsControl layout issue

I have the following XAML which produces a vertical output of several TextBlocks and ListBoxes, however I want to change it so that it will go horizontally.

<StackPanel>
    <TextBlock Margin="5" Text="Collated Results" FontWeight="Bold"
               VerticalAlignment="Center" DockPanel.Dock="Top"/>
    <ScrollViewer VerticalScrollBarVisibility="Auto" 
                  HorizontalScrollBarVisibility="Auto" CanContentScroll="True">
        <ItemsControl x:Name="lstCollatedSensorData">
            <ItemsControl.ItemTemplate>
                <DataTemplate>                                        
                    <StackPanel>
                        <TextBlock Margin="5" Width="100" Text="{Binding Name}"/>
                        <ListBox Margin="5" Width="100" 
                                 ItemsSource="{Binding CollatedResults}"/>
                    </StackPanel>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </ScrollViewer>
</StackPanel>

The Textbox and Listbox in the StackPanel show correctly individually, however, each iteration is placed on top of each other, where I want them to be placed side by side horizontally. I have tried inserting WrapPanels in various locations without success, so there is obviously something that I am missing. It almost seems like the ScrollViewer is forcing the ItemsControl to be vertical rather than horizontal.

Upvotes: 0

Views: 362

Answers (2)

Alberto
Alberto

Reputation: 15951

Put a stackpanel with orientation horizontal in the ItemsControl's ItemsPanel

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

Upvotes: 1

Rohit Sharma
Rohit Sharma

Reputation: 6500

Try setting Orientation on the stackpanel like so

StackPanel Orientation="Horizontal"

Upvotes: 0

Related Questions