如何将WPF ListBox选中项绑定到StackPanel展示详情

Hey there! Let's fix that detail display issue you're struggling with. The core problem here is that you're using an ItemsControl (built for collections of items) to show a single selected object. Instead, we need to use a control designed for individual data objects, plus fix a key missing piece in your ViewModel to keep the UI in sync.

Step 1: Fix the ViewModel (Critical for UI Updates) #

Your SelectedAgreement property isn't telling the UI when it changes. WPF relies on the INotifyPropertyChanged interface to update the view when viewmodel properties update. Here's the updated ViewModel with this implemented:

using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Collections.ObjectModel;

public class ValuationViewModel : INotifyPropertyChanged
{
    private AgreementModel _selectedAgreement;

    public ValuationViewModel()
    {
        LoadAgreements();
    }

    public ObservableCollection<AgreementModel> Agreements { get; set; }

    public AgreementModel SelectedAgreement
    {
        get { return _selectedAgreement; }
        set 
        { 
            _selectedAgreement = value;
            OnPropertyChanged(); // Notify the UI that this property changed
        }
    }

    public void LoadAgreements()
    {
        ObservableCollection<AgreementModel> agreements = new ObservableCollection<AgreementModel>();
        agreements.Add(new AgreementModel { Property1 = 123, Property2 = "Some Text", Property3 = "Status: OK" });
        agreements.Add(new AgreementModel { Property1 = 456, Property2 = "Some Text", Property3 = "Status: Not OK" });
        agreements.Add(new AgreementModel { Property1 = 789, Property2 = "Some Text", Property3 = "Status: Somewhat OK" });
        Agreements = agreements;
    }

    // Required implementation for INotifyPropertyChanged
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

Step 2: Replace ItemsControl with ContentControl #

ContentControl is made exactly for displaying single data objects. Swap out your ItemsControl with this, and bind its Content property directly to SelectedAgreement:

<Grid Background="White">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="1*" />
        <ColumnDefinition Width="600" />
        <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>

    <!-- Your working ListBox (added TwoWay binding explicitly for clarity) -->
    <ListBox Grid.Column="1" 
             ItemsSource="{Binding Agreements}" 
             SelectedItem="{Binding SelectedAgreement, Mode=TwoWay}"
             ItemTemplate="{StaticResource agreementRowTemplate}"/>

    <!-- Fixed Detail View -->
    <ContentControl Grid.Column="2"
                    Content="{Binding SelectedAgreement}"
                    ContentTemplate="{StaticResource agreementDetailTemplate}"/>
</Grid>

Key Notes to Understand: #

• INotifyPropertyChanged: Without this, the UI has no idea when SelectedAgreement updates (when you click a new item in the ListBox), so it would never refresh the details.
• ContentControl vs ItemsControl: ItemsControl expects a collection (like your Agreements list), while ContentControl handles single objects perfectly. That's why your original setup didn't work.
• TwoWay Binding: While WPF defaults ListBox.SelectedItem to TwoWay, explicitly adding it makes the code clearer and ensures the ViewModel always reflects the user's selection.
• Grid Column Placement: I moved the detail view to Grid.Column="2" so it doesn't overlap with your ListBox—you can adjust the column widths as needed.

Bonus: Add a Fallback for Empty Selection #

If you want to show a message when no agreement is selected, add a trigger to the ContentControl:

<ContentControl Grid.Column="2"
                Content="{Binding SelectedAgreement}"
                ContentTemplate="{StaticResource agreementDetailTemplate}">
    <ContentControl.Style>
        <Style TargetType="ContentControl">
            <Style.Triggers>
                <DataTrigger Binding="{Binding SelectedAgreement}" Value="{x:Null}">
                    <Setter Property="ContentTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <TextBlock Text="Select an agreement to view details."/>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </ContentControl.Style>
</ContentControl>

内容的提问来源于stack exchange，提问作者Jakob Busk Sørensen