We Keep Coding

WPF - ListBox goes out of the screen

<WrapPanel
HorizontalAlignment="Center"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<GroupBox
Header="{DynamicResource ResourceKey=StampUserTab_Strings}"
BorderThickness="1.3"
Style="{StaticResource GroupBoxBorder}" >
<ListBox
Grid.Row="1"
Name="ComponentBox"
ItemTemplate="{DynamicResource StringTemplate}"
VerticalContentAlignment="Stretch"
ScrollViewer.CanContentScroll="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Auto"
VerticalAlignment="Stretch"
ItemsSource="{Binding ActiveSettings.Components}"
SelectionChanged="ComponentBox_SelectionChanged"
Style="{StaticResource ResourceKey=SettingsListBoxUser}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox>
</GroupBox>
</WrapPanel>
This is my code. The main problem is, that when i add items to the listbox, it keeps expanding out of my screen. I want to make it bound to screen, so when it reaches the bottom, the vertical scroll appers and can be used to scroll the content.
I've tried to set the Height of the grid ro to *, but it didn't help.
Any ideas?
Edit:
The problem was the WrapPanel. I changed it to Grid, defined rows and columns with * heights and widths. After adding my elements to the grid rows and colums the listbox were collapsed to scrolls after the expanding. Thank you for the help.

It seems as though you could do with reading through the Panels Overview page on MSDN. Different Panels have different behaviours and it's pretty important that all new WPF developers know the differences. For example, a Grid can automatically resize its content (the controls placed inside it), whereas a WrapPanel will not.
Therefore, when wishing to constrain the dimensions of your control(s), you should put them into a Grid, or one of the other Panels that provide that functionality and avoid the ones that don't.
You said:
I've tried to set the Height of the grid row to *, but it didn't help
That's because your ListBox is not in a Grid... its parent WrapPanel may be in the Grid, so you could try to set the Grid.Row on that instead.

dynamically display two grid controls on each list items row in windows phone 8 apps

actually i did some projects for windows phone 8 devices and
with the concept of listbox control i have already listed some datas in listbox both statically and dynamically(Binding values to itemsSource).,
i have already know how to display single gridview on each list items like one grid view per list items.,
But my problem is , i want to display Two GridViews side by side on every single List.Items inside listbox Dynamically.,
Statically we can do by desing in XAML page that i know., But i dont know
" How To Dynamically Display 2 GridViews side by side on every List items on listbox control"
so My listBox should exactly look like this image.,
Some one please help me how to display my contents on listbox items with 2 grid(side by side) on each list items
Or is there any other control there to display two grids side by side in windows phone
Thanks in advance

just a listbox with a wrap panel inside could solve the issue
<ListBox Width="460" ScrollViewer.VerticalScrollBarVisibility="Auto" Height="402" HorizontalAlignment="Center" Name="lbScans" Margin="0,10,0,10">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Width="460" HorizontalAlignment="Center" ScrollViewer.VerticalScrollBarVisibility="Auto"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

You can try to use <WrapPanel> from Windows Phone toolkit as ListBox's ItemsPanel to achieve that. For example :
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel ItemWidth="150" ItemHeight="250"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
.......
.......
</ListBox>
<WrapPanel> arranges ListBox item left to right, then to next row when no more space available for next item in current row. Sample result of using <WrapPanel> can be seen in this SO post by #Xin :

Width of items in ItemsControl

I have an ItemsControl with a DataTemplate that is bound to an ObservableCollection of integers.
<ItemsControl Name="DimsContainer" ItemTemplate="{StaticResource DimensionsTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
And in the Windows Resources:
<Window.Resources>
<DataTemplate x:Key="DimensionsTemplate" >
<TextBlock Text="{Binding}"
Padding="5"
VerticalAlignment="Center"
FontSize="32"/>
</DataTemplate>
</Window.Resources>
My problem is that in code, I need to be able to determine the width of the TextBlocks (or whatever the element is if I change it later) in the ItemsControl. Does anyone have an idea how to do this?
When I do DimsContainer.Items[i] it gives me the bound item not the TextBlock.

You should be able to use instead:
DimsContainer.ItemContainerGenerator.ContainerFromIndex(i);
This won't give you the TextBlock itself, but it will give you the generated ContentPresenter that is wrapped around it by the ItemsControl to contain the ItemTemplate.

Binding ObservableCollection items to UserControl in WrapPanel?

I may just be missing something obvious here, so I apologize if this is a really dumb question. I have a WrapPanel in a view that I need to bind to an ObservableCollection on the ViewModel. This ObservableCollection contains a different type of ViewModel that needs to be bound to another type of view when displayed in the WrapPanel. The goal is to create a wrappable list of items, each of which displays via an instance of a smaller view which should be added to the WrapPanel.
I am using MVVM, and the ViewModel does not have direct access to the View. I would rather not create a binding between the ViewModel and the View if at all possible, so manually adding items to the WrapPanel.Children collection is not a viable option. I am at a loss as to how I can bind a collection of child ViewModel objects to the WrapPanel in such a way that it will create instances of another view and add them to itself. Am I simply approaching the problem incorrectly? I figure there is probably a DataTemplate involved, but it doesn't appear that a WrapPanel has a DataTemplate, nor is it bindable.
Thanks for any insight.

What you need is a ListView that uses a WrapPanel to host all of the items.
<ListView ItemsSource={...}>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemTemplate>
<DataTemplate>
<!-- Fill in how you want each item to look here -->
</DataTemplate>
</ListView.ItemTemplate>
</ListView>

Use an ItemsControl, and set its ItemsPanel to a WrapPanel:
<ItemsControl ItemsSource="{Binding Something}" ItemTemplate="{StaticResource YourDataTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>

WPF Databinding stackpanel

Im a beginner in WPF programming, coming from .NET 2.0 C#.
Im trying to make a horizontal StackPanel which should be filled with data from a table in a database. The problem is that I want it to display an image with some text from the table below and then stack those two items horizontally.
Here's some pseudo-code to display what I want to do:
<StackPanel Orientation="horizontal" ItemsSource="{Binding Path=myTable}">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}"></Label>
</StackPanel>
</StackPanel>
I simply cannot figure oout how to do this.

Julien's answer is correct for your written description, however, looking at your XAML, it appears you are looking for something like the following:
<DataTemplate x:Key="UserDataTemplate">
<StackPanel>
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>
You definately need an ItemsControl (or some derivation of) to bind your source to. Then you can change the the orientation by setting it's items panel (which I believe is a VirtualizingStackPanel with Vertical orientation by default) so just set it to a VirtualizingStackPanel with Horizontal Orientation. Then you can set the ItemsTemplate for each of your items to the layout you desire (an image stacked on top of text bound from your database).

Basically, you want to use a control capable of displaying an enumeration of objects. The control capable of this is the class ItemsControl and all of its descendants (Selector, ListBox, ListView, etc).
Bind the ItemsSource property of this control to a list of objects you want, here a list of users you've fetched from the database. Set the ItemTemplate of the control to a DataTemplate that will be used to display each item in the list.
Sample code:
In a Resources section (for example Window.Resources):
<DataTemplate x:Key="UserDataTemplate">
<StackPanel Orientation="Horizontal">
<Image Source="User.png"/>
<Label HorizontalAlignment="Center" Content="{Binding Path=UserName}" />
</StackPanel>
</DataTemplate>
In your Window/Page/UserControl:
<ItemsControl x:Name="UserList" ItemTemplate="{StaticResource UserDataTemplate}" />
In your code behind:
UserList.ItemsSource = ... // here, an enumeration of your Users, fetched from your db