Question

I have searched extensively on Google and am struggling to find an easy example to follow for an ItemsControl which I think I need to be able to do the following.

I currently have a Grid with a scrollable Listbox containing Checkboxes which works as expected using the following XAML layout

<Grid>
    <ListBox ScrollViewer.VerticalScrollBarVisibility="Auto" 
ItemsSource="{Binding Selections}" Margin="12,22,12,94">
    <ListBox.ItemTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding IsChecked}" 
        Content="{Binding Path=Item.SelectionName}">
                </CheckBox>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
</Grid>

I now want to add a TextBox to the right of each Checkbox so it’s aligned horizontally with 1 Checkbox and 1 Textbox per row. I thought I would have to use an ItemsControl to allow two controls but using the ItemsControl as below I lose the ability to scroll

<Grid>
    <ItemsControl ScrollViewer.VerticalScrollBarVisibility="Auto" 
    ItemsSource="{Binding Selections}" Margin="12,22,12,94">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding IsChecked}" 
        Content="{Binding Path=Item.SelectionName}">
                </CheckBox>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Also, if I try and add a textbox similar to

    <DataTemplate>
        <CheckBox IsChecked="{Binding sChecked}" Content="{Binding Path=Item.BookieName}" />
        <TextBox />
    </DataTemplate>

I get an error The object 'DataTemplate' already has a child and cannot add 'TextBox'

Essentially, I want it to look like this

Can anyone give me a few pointers on how to structure the controls in XAML to get my desired layout?

Answer 1

Just use a StackPanel in your DataTemplate and set the orientation to horizontal.

 <DataTemplate>
    <StackPanel Orientation="Horizontal">
    <CheckBox IsChecked="{Binding sChecked}" Content="{Binding Path=Item.BookieName}" />
    <TextBox />
    </StackPanel>
</DataTemplate>