locked
Dual-column ListBox with Listbox Items RRS feed

  • Question

  • Is it possible to implement a ListBox containing 2 columns and ListBox items?
    Saturday, April 6, 2013 5:34 PM

Answers

  • You've never described clearly what you want to achieve. Everything's been vague and ambiguous about exactly what you want in the two columns.

    I have a feeling that you want the list of items to be arranged like this: item 0 at row 0 left, item 1 at row 0 right, item 2 at row 1 left, etc. For that, you can use WrapPanel in the Phone Toolkit:
    http://www.geekchamp.com/articles/wp7-wrappanel-in-depth
    (the article refers to the old Silverlight Toolkit. You should use the new version at phone.codeplex.com).

    To convert a single column ListBox to two columns, define ItemsPanel in your ListBox:

    <ListBox> 
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel ItemWidth="220"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            ....

    Each item will be 220 wide, and 2 items will fit on a 480 wide row before it wraps to the next row.


    Richard Woo
    • Marked as answer by m.findlay93 Monday, April 15, 2013 8:42 PM
    Sunday, April 7, 2013 7:21 PM

All replies

  • You can costumize your listbox as mentioned in link below;

    coderzheaven.com/2012/03/23/how-to-create-a-custom-listbox-in-windows-phone-7/

    Are you searching for else from above?


    Best Regards...

    Saturday, April 6, 2013 8:08 PM
  • If you want two columns that scroll together, like if you have Grid with two columns, you can style the list box items to appear as if they are "split" into two columns. Use Grid with fixed or relative widths.

    For example:

    <ListBox>
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

    Now each list box item has two columns and if they all stretch full width, you will have the appearance of two columns.


    Toni Petrina
    My blog: Toni codes .NET
    If a post answers your question, please click "Mark As Answer" on that post and "Vote as Helpful"

    Sunday, April 7, 2013 11:26 AM
  • Please ignore my last reply, for the example code you provided above could you please give me an example code for a Listbox containing 2 columns along with some ListBox Items please?

    Sunday, April 7, 2013 3:18 PM
  • <ListBox>
      <ListBox.ItemTemplate>
        <DataTemplate>
          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="*" />
              <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
    		
    		<!-- Left column -->
    		<TextBlock Text="{Binding Name}" />
    		
    		<!-- right column -->
    		<TextBlock Grid.Column="1"
                       Text="{Binding Job}" />
          </Grid>
        </DataTemplate>
      </ListBox.ItemTemplate>
    </ListBox>

    I think that this will give you the general idea. Two TextBlock elements occupy each column and they are bound to some property in the view model.

    The above code will give you a ListBox with two columns of equal width. In case you are displaying contacts list, you might want to have a smaller left column that contains images. In that case you can use Auto for the left column (meaning it will be auto sized) and * for the right column.

    But beware of this approach. Since each listbox element has its own Grid, you might run into a problem if you use auto sizing - some left side items might not be equal and this might cause visual bugs.

    It all depends on what exactly do you want to do.


    Toni Petrina
    My blog: Toni codes .NET
    If a post answers your question, please click "Mark As Answer" on that post and "Vote as Helpful"

    Sunday, April 7, 2013 3:24 PM
  • Could I simply drag and drop two ListBoxes and add items accordingly?

    Sunday, April 7, 2013 3:44 PM
  • How will they be synced? If you scroll the left one with your finger, will you correctly scroll the right one? Are all items on the right side be of the same height as the corresponding item on the left?

    This might be tricky.


    Toni Petrina
    My blog: Toni codes .NET
    If a post answers your question, please click "Mark As Answer" on that post and "Vote as Helpful"

    Sunday, April 7, 2013 4:33 PM
  • You've never described clearly what you want to achieve. Everything's been vague and ambiguous about exactly what you want in the two columns.

    I have a feeling that you want the list of items to be arranged like this: item 0 at row 0 left, item 1 at row 0 right, item 2 at row 1 left, etc. For that, you can use WrapPanel in the Phone Toolkit:
    http://www.geekchamp.com/articles/wp7-wrappanel-in-depth
    (the article refers to the old Silverlight Toolkit. You should use the new version at phone.codeplex.com).

    To convert a single column ListBox to two columns, define ItemsPanel in your ListBox:

    <ListBox> 
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel ItemWidth="220"/>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
        <ListBox.ItemTemplate>
            ....

    Each item will be 220 wide, and 2 items will fit on a 480 wide row before it wraps to the next row.


    Richard Woo
    • Marked as answer by m.findlay93 Monday, April 15, 2013 8:42 PM
    Sunday, April 7, 2013 7:21 PM
  • I've done exactly that but it's still appearing as a single column. Could someone please tell me what I've done wrong based on my code in the image below:

    Monday, April 8, 2013 8:36 PM
  • It works perfectly for me. Did you actually try to run it? The designer preview is not able to handle every scenario (Blend is more reliable).
    • Edited by mSpot Inc Tuesday, April 9, 2013 7:09 AM
    Tuesday, April 9, 2013 5:04 AM
  • Yes but still doesn't work. Might be something to do with the wrapping but I don't know. Maybe I left some line of code out. I don't know what the cause of problem is.
    Thursday, April 11, 2013 3:01 PM
  • Does anyone know why?
    Thursday, April 11, 2013 5:43 PM
  • WrapPanel fills a row with however many items that will fit, then continues to the next row. The number of items per row is based on the width of the row and width of each item. My example used ItemWidth="220" based on fitting two items per row on a 480 wide page. A default PanoramaItem has a width much less than 480, so might not fit more than one item per row. You can try starting with ItemWidth="100" and adjust to your needs.


    Richard Woo
    • Edited by mSpot Inc Thursday, April 11, 2013 9:21 PM
    Thursday, April 11, 2013 7:04 PM
  • OK. Followed your advice and it worked. Thank you very much Richard.
    Monday, April 15, 2013 8:42 PM