WPF Databinding stackpanel
Solution 1
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).
Solution 2
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
Related videos on Youtube
![Dave Clemmer](https://i.stack.imgur.com/GgC1z.jpg?s=256&g=1)
Dave Clemmer
I enjoy coding like an excellent beer. My particular passion and experience lies in the realm of modeling and code generation. In the late 80s and early 90s, I was involved in early modeling and code generation tools that reached the marketplace, including a tool that modeled FORTRAN programs and generated FORTRAN for parallel supercomputer architectures, and a tool that managed Shlaer-Mellor models and generated C++ code. Over the years, I have applied Shlaer-Mellor, UML, and custom modeling and various code generation techniques to greatly benefit the development of enterprise applications. My current passion and endeavor is to foster the evolution of model oriented development. In particular, I am passionate about evolving the Mo+ model oriented programming language and related model driven development tools, with as much community input as possible to achieve higher levels in the ability to create and maintain code. The open source site is at moplus.codeplex.com, and the Mo+ membership site is at modelorientedplus.com.
Updated on December 06, 2020Comments
-
Dave Clemmer over 3 years
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.
-
Admin over 14 yearsThanks to both of you, your examples was exactly what i needed!
-
srock almost 11 yearsThis should be the first lesson of every XAML book/tutorial ever written.