将控件与可观察的集合绑定

Question

In xaml, how do I display an ObservableCollection in a expander control with a grid when you expand it?

public class BoundPoco
(
    public string ExpanderText { set; get; }
    public ObservableCollection<DisplayDetail> { set; get; }
)

public class DisplayDetail
{
    public string FirstDisplayColumn { set; get; }
    public string SecondDisplayColumn; { set; get; }
}

Answer 1

You should use an items control within the expander control to achieve this.

Firstly sort your code behind errors out - you had a stray semicolon on "SecondDisplayColumn":

public string SecondDisplayColumn { set; get; }

... and you had no name on the main observable collection property!

public ObservableCollection<DisplayDetail> DisplayDetails { set; get; }

Then, if you're not using dependency properties or INotifyPropertyChanged - create your XAML to display the data like so (with a name 'items'):

<Expander Name="myExpander" Background="Tan" 
      HorizontalAlignment="Left" Header="My Expander" 
      ExpandDirection="Down" IsExpanded="True" Width="Auto">
    <ItemsControl Name="items">
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition />
                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Column="0" Text="{Binding FirstDisplayColumn}"/>
                    <TextBlock Grid.Column="1" Text="{Binding SecondDisplayColumn}"/>
                </Grid>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Expander>

Then you can populate the observable collection and set the items source in codebehind:

DisplayDetails.Add(new DisplayDetail() { FirstDisplayColumn = "FieldName1", SecondDisplayColumn = "FieldValue1" });
DisplayDetails.Add(new DisplayDetail() { FirstDisplayColumn = "FieldName2", SecondDisplayColumn = "FieldValue2" });
DisplayDetails.Add(new DisplayDetail() { FirstDisplayColumn = "FieldName3", SecondDisplayColumn = "FieldValue3" });

items.ItemsSource = DisplayDetails;