Question

I’ve been researching this for quite long time now, can’t find the answer.

How can I display each item in my itemscontrol side by side?

The following code displays each item’s content side by side (label and textbox), but the next item is shown underneath. Let’s say I have 3 items in my ItemsControl. The current behaviour is:

Label Textbox
Label Textbox
Label Textbox

What I want is:

Label Textbox Label Textbox Label Textbox (side by side)

The current code uses a stack panel whick sets the orientation to horizontal (that’s why the label and textbox are side by side). But I need some property or technique to set the itemscontrol content orientation to horizontal. My code:

<ItemsControl.ItemTemplate>
    <DataTemplate>
          <StackPanel Name="pnlText" Orientation="Horizontal" Width="750">
              <Label Content="{Binding ParameterDisplayName, Mode=OneWay}" />
              <TextBox Name="txtText" HorizontalAlignment="Left" Text="{Binding ParameterValue, Mode=TwoWay, ValidatesOnExceptions=True, NotifyOnValidationError=True}" Visibility="{Binding ParameterType, Converter={StaticResource ParameterTypeToVisibilityConverter}, ConverterParameter=Text}" />
           </StackPanel>
    </DataTemplate>
</ItemsControl.ItemTemplate>

Does anyone know how to do that?

Thanks!

Answer 1

You should set this property for your ItemsControl:

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