Question

Sorry if this is a noob questions. I just started learning WPF so hopefully you guys dont mind. But, is it possible to create two columns for each row dynamically through the xaml or would this have to be done in back end code (viewmodel, .cs)? Right now I have just a long list of items through binding with datasource. For example, datasource = “{binding path=House.Item}” … Item is a collection which stores the label and value as it execute a stored procedure call. eg: label=”Color”, value=”White”.

I currently have:

Color <– label

White < — value in a textblock

Window <– label

Vinyl < — value in a textblock … etc

I would like to have the result to be 2 column for each row (doesnt display correctly):

Color | >>> Window

White | >>> Vinly

Door | >>> Basement

Wood | >>> Finished

The reason why I would want to achieve this is so I can eliminate the horizontal scrolling just in case the items gets really long. Any advice would be helpful. Thanks a lot in advanced.

Update:

<ListBox.Resources>                                 
<DataTemplate DataType="{x:Type Models:HouseDetail}" >                                               
<Views:HouseView>           
</DataTemplate>
<ListBox.Resources>

This is pretty much how my data is generated which again is giving me a flow of like “top to bottom” whereas I would like it to show “left to right”.
eg: 1 2 3 <– (what I want)
instead of

1

2

3

Answer 1

If want to display a list then you should look at a Listbox control. For each item in the list you can describe how you want the item to be laid out using an ItemTemplate. See the ItemTemplate documentation for more informaiton on using ItemTemplates.

Have an object representing your list items (eg the House class). Create an ObservableCollection of your list items and bind your Listbox to the ObservableCollection. Then, in the XAML, describe the layout of each House item and how you want it to look. Something like this should work:

Code

public class House 
{
     public string Color { get; set; }
     public string Material { get;set; }
     public string Window { get; set; }
}


public class ViewModel
{
    public ObservableCollection<House> Houses { get; set; }
}

XAML:

  <!-- DataContext should be set to an instance of ViewModel -->
 <ListBox ItemsSource="{Binding Houses}">
     <ListBox.ItemTemplate>
         <DataTemplate>
             <StackPanel>
                 <!-- I am just using StackPanels here, but you can use any layout control you want to describe how you want each list item to look --> 
                 <StackPanel Orientation=Horizontal>
                     <TextBlock Text="House Color:"/>
                     <TextBlock Text="{Binding Path=Color}"/>
                 </StackPanel>
                 <StackPanel Orientation=Horizontal>
                     <TextBlock Text="House Material:"/>
                     <TextBlock Text="{Binding Path=Material}"/>
                 </StackPanel>
                 <!-- Add more controls to show more information -->
             </StackPanel>
         </DataTemplate>
     </ListBox.ItemTemplate>
 </ListBox>

Sorry, I don’t have a compiler handy so I’m not sure if this will compile, but it should be close.