We Keep Coding

WPF Horizontal Listbox fill vertically

I'm making a list of products that display within a listbox that scrolls horizontally. I have the list scrolling horizontally however I only ever get 1 row of items even though the list box is high enough to populate 2 rows before it starts scrolling horizontally.
Part of my WPF code.
<DataTemplate x:Key="productTemplate">
<WrapPanel Orientation="Horizontal" Width="10" Height="10">
<Image Source="{Binding Photo}" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" Width="288" Height="320"/>
<Label Content="{Binding Name}" />
<Label Content="{Binding Cost}" />
</WrapPanel>
</DataTemplate>
<ListBox Width="1334" ItemsSource="{Binding Products}" SelectedItem="{Binding SelectedProduct}" ItemTemplate="{DynamicResource productTemplate}" Height="865" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0">
<ListBox.Background>
<SolidColorBrush Color="White" Opacity="0.85"/>
</ListBox.Background>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
I'm looking for:
Any help would be great.

The WrapPanel that is used as ItemsPanel must have vertical orientation, and the ListBox must not scroll vertically:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled" ...>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
...
</ListBox>

Maybe the following code will help you. The following code will help you to bind images in the following manner.
<ListBox Grid.Column="1" ItemsSource="{Binding Items}" Name="detailList" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" Width="90">
<Image Width="80" Source="{Binding Type,
Converter={x:Static local:HeaderToImageConverter.Instance}}"/>
<TextBlock FontSize="11" Text="{Binding Name}" VerticalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Horizontal Custom ListBox

I want my custom build ListBox to display the items on the next line if their size exceeds the available width of their parent control.
Following is my XAML for this purpose.
<materialDesign:Card>
<StackPanel>
<TextBlock FontWeight="DemiBold" FontSize="30">Schedule</TextBlock>
<ListBox ItemsSource="{Binding Schedule, Source={StaticResource dc}}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<ListBoxItem>
<StackPanel Orientation="Horizontal">
<StackPanel Orientation="Horizontal">
<TextBlock>Day:</TextBlock>
<TextBlock Text="{Binding Key, Mode=OneWay}" />
</StackPanel>
<materialDesign:TimePicker materialDesign:HintAssist.Hint="Time In" SelectedTime="{Binding Value.TimeIn}" />
<materialDesign:TimePicker materialDesign:HintAssist.Hint="Time Out" SelectedTime="{Binding Value.TimeOut}" />
</StackPanel>
</ListBoxItem>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</materialDesign:Card>
Following is the Output for the above XAML

You should use a WrapPanel instead of a StackPanel, then.

As H.B. said, the ItemPanel control you should use is a WrapPanel that let you achieve what you want (when there isn't enough space for your control, it creates a new line).
Here it is an example:
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>

How can i make sure each items's margin inside a wrap panel is the same?

I have an ItemsControl which has a WrapPanel as its ItemsPanelTemplate. I am trying to organise a collection of buttons so that each button has the same margin on its left and right side. Here is the code I have so far:
<ScrollViewer HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<ItemsControl HorizontalAlignment="Stretch" ItemsSource="{Binding SystemData.PlayersList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Gray" Margin="5">
<Button Width="180"
Style="{Styles:MyStyleRef ResourceKey=BrowserItemStyle}">
<DockPanel LastChildFill="True">
<Image Source="{Binding Icon}" Style="{Styles:MyStyleRef ResourceKey=DriveImageStyle}"/>
<Label HorizontalAlignment="Left" Content="{Binding Name}" Style="{Styles:MyStyleRef ResourceKey=DriveLabelStyle}"/>
</DockPanel>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
And here is how it looks:
When i set the WrapPanel's HorizontalAlignment to 'Center' I get closer to the result i want.
I would like each Item to have the same margin either side of it so that it creates a uniform grid of controls - Is this possible?
Regards, Tim.

Ok got it solved... I completely over looked the uniform grid control.
Here is my code now:
<ScrollViewer HorizontalAlignment="Stretch" VerticalScrollBarVisibility="Auto" CanContentScroll="True">
<ItemsControl HorizontalAlignment="Stretch" VerticalAlignment="Top" ItemsSource="{Binding SystemData.PlayersList}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="6"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Gray" Margin="5" Height="40">
<Button
Style="{Styles:MyStyleRef ResourceKey=BrowserItemStyle}">
<DockPanel LastChildFill="True">
<Image Source="{Binding Icon}" Style="{Styles:MyStyleRef ResourceKey=DriveImageStyle}"/>
<Label HorizontalAlignment="Left" Content="{Binding Name}" Style="{Styles:MyStyleRef ResourceKey=DriveLabelStyle}"/>
</DockPanel>
</Button>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>

Trying To Make A Listbox Horizontal Inside a Grid [duplicate]

This question already has answers here:
I need Horizontal view of list boxes
(5 answers)
Closed 9 years ago.
I have a grid of size 400 x 150 in which I would like to add a Listbox.
The Listbox is composed of a grid that contains a TextBlock.
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
But the list is displayed vertically.
I tried to use a VirtualizingStackPanel but the problem is that the borders of the grids don't appear correctly.
How can I make this list look horizontal, with the borders of the grid that contains the textblock visible?

U can use like this to have horizontal scrollViewer of Listbox
<Grid Width="400" Height="150">
<ListBox x:Name="list" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Hidden" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate >
<StackPanel Orientation="Horizontal"></StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate >
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
In addition to this You have to adjust height and width of both listbox and grid according to your requirement.

If I am correct, you don't want a StackPanel inside the DataTemplate, you actually want a horizontally laid out items inside the ListBox. You need to change the ListBox.ItemsPanel and you need to disable vertical scroll and enable horizontal scroll in the ListBox. Here is the full XAML:
<ListBox ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.HorizontalScrollBarVisibility="Auto">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"
CanVerticallyScroll="False"
CanHorizontallyScroll="True"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

I think you can use ItemsPanel to change the oriention of listBox. and the borderThickness is also necessary.Hope I can help you. Thx!
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<!-- if you want to use border to separate items, HorizontalAlignment="Right";
and if use it as container, HorizontalAlignment="Stretch" -->
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right"/>
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</Grid>

I think Chris is on the right lines, but I am sure you need a content presenter in the ItemsPanel template.
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<!-- if you want to use border to separate items, HorizontalAlignment="Right";
and if use it as container, HorizontalAlignment="Stretch" -->
<Border BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right">
<TextBlock Foreground="Black" Text="{Binding name}" />
</Border>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
<ContentPresenter/>
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>

Use this code it could help you:
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Use ItemsPanel property of listbox. try this its work for me.
<Grid Width="400" Height="150">
<ListBox x:Name="list" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal">
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Grid Width = "80">
<Border BorderBrush="Black" HorizontalAlignment="Right" />
<TextBlock Foreground="Black" Text="{Binding name}" />
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>

Styling Dynamically created TextBoxes

I am using the MVVM pattern which is really new to me. I click 'Add Title' and at the moment the textbox shows, and same happens when I click 'Add Question'. The thing that is wrong is that they show up exactly below each other. When they click 'Add Title' I want the text boxes to show with a margin from the left of '20' and then when I click 'Add Question' I want the margin to show as '40'. They also need to have a space of '20' between all text boxes so there not directly underneath the textbox.
XAML CODE:
<Grid>
<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
<Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />
<StackPanel>
<ItemsControl ItemsSource="{Binding Title}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Question}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>
I have tried to add the Padding property but it makes the text boxes bigger in height, and also I have tried the Margin but all text boxes are created dynamically.

Try this
adjust margin according to your requirement
<Grid>
<Button Content="Add Question" Command="{Binding AddQuestionCommand}" Margin="615,19,179,724" />
<Button Content="Add Title" Command="{Binding AddTitleCommand}" Margin="474,19,320,724" />
<StackPanel>
<ItemsControl ItemsSource="{Binding Title}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="20,20,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl ItemsSource="{Binding Question}">
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="FrameworkElement.Margin" Value="40,20,0,0"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</Grid>

A good way to define appearance structure is using the Grid control, specifying a row and a column.
Try something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ItemsControl Grid.Column="0" ItemsSource="{Binding Title}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
<ItemsControl Grid.Column="1" ItemsSource="{Binding Question}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Text="{Binding .}" Width="200" HorizontalAlignment="Left"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>