Search code examples
c#wpfxamllistboxstackpanel

Displaying a data-bound StackPanel inside a DataTemplate


I have objects I'm databinding to a ListBox in WPF. Here's what the end result should look like:

-------------------------------
| Name    | Opt1    |  Value1 |
|         | Opt2    |  Value2 |
|         | Opt3    |  Value3 |
|         | Opt4    |  Value4 |
-------------------------------

Essentially i've got a DataTemplate for the overall variable, and then the Opt/Value combo has it's own DataTemplate. I'm trying to display the list of values as simply as possible.

<Label Content="{Binding Path=Identifier.Name, Mode=OneWay}" />
<ListView Grid.Column="1" HorizontalAlignment="Stretch" 
          ItemsSource="{Binding Path=Values, Mode=OneWay}" />

The binding for Values is currently only a <Grid> with 2 <Label>'s and ListView has a lot of features I dont watch, such as the border styling, selections, and such, when all I really want is to be able to databind using a List.

I've tried to databind the items to a stackpanel but couldn't get it to work in XAML. I suppose another solution is to do what I'm doing, and rewrite the <Style> for ListView. Any suggestions on the correct way to do this?


Solution

  • It certainly sounds like something you can do with a ListBox, or an ItemsControl if you do not want them to be selectable. We can also make use of the IsSharedSizeScope attached property to keep our columns formatted and even. Also, take a look at the Inheritance Higharchy at the bottom of the ListBox link, it should help you determine which type of list you need for different scenarios.

    Try something like this:

    <DockPanel>
      <Label Content="{Binding Path=Identifier.Name, Mode=OneWay}" />
      <ListBox ItemsSource="{Binding Path=Values, Mode=OneWay}"
               Grid.IsSharedSizeScope="True">
        <ListBox.ItemTemplate>
          <DataTemplate>
            <Grid>
              <Grid.ColumnDefinitions>
                <ColumnDefinition SharedSizeGroup="OptionColumn" />
                <ColumnDefinition SharedSizeGroup="ValueColumn" />
              </Grid.ColumnDefinitions>
              <TextBlock Grid.Column="0" Text="{Binding Option}" />
              <TextBlock Grid.Column="1" Text="{Binding Value}" />
            </Grid>
          </DataTemplate>
        </ListBox.ItemTemplate>
      </ListBox>
    </DockPanel>