简体   繁体   中英

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.

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

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

Try setting Orientation on the stackpanel like so

StackPanel Orientation="Horizontal"

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM