C# WPF从ViewModel向View添加Expander仅显示集合如何解决

问题原因 #

• 违反MVVM设计原则，ViewModel层直接持有View层的Expander控件实例，ViewModel仅需存放业务数据，不应引用任何UI控件
• ContentControl仅支持渲染单个内容，你绑定了集合类型的MyExpanders，WPF默认会调用集合的ToString()方法渲染，你的系统是德语环境所以显示Sammlung（集合的德语翻译）

解决方案 #

第一步：创建Expander对应的数据模型（放在ViewModel层） #

public class ExpanderItem : BindableBase
{
    private string _header;
    public string Header
    {
        get => _header;
        set => SetProperty(ref _header, value);
    }

    private string _content;
    public string Content
    {
        get => _content;
        set => SetProperty(ref _content, value);
    }

    private bool _isExpanded;
    public bool IsExpanded
    {
        get => _isExpanded;
        set => SetProperty(ref _isExpanded, value);
    }
}

第二步：修改MyViewModel代码 #

public class MyViewModel : BindableBase
{
    public MyViewModel()
    {
        // 用ObservableCollection代替List，支持集合元素增减时自动通知UI更新
        MyExpanders = new ObservableCollection<ExpanderItem>();
        AddAllExpanders();
    }

    private void AddAllExpanders()
    {
        AddExpander("First expander header", "First expander content");
        AddExpander("Second expander header", "Second expander content");
    }

    private void AddExpander(string header, string content)
    {
        MyExpanders.Add(new ExpanderItem
        {
            Header = header,
            Content = content,
            IsExpanded = false
        });
    }

    private ObservableCollection<ExpanderItem> _myExpanders;
    public ObservableCollection<ExpanderItem> MyExpanders
    {
        get => _myExpanders;
        set => SetProperty(ref _myExpanders, value);
    }
}

第三步：修改XAML代码，用ItemsControl渲染集合 #

<UserControl x:Class="MyProject.Views.MyView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:MyProject.Views"
             x:Name="Info"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Grid.Column="1">
            <!-- 用ItemsControl渲染集合，替换原来的ContentControl -->
            <ItemsControl ItemsSource="{Binding MyExpanders}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <Expander Header="{Binding Header}"
                                  Content="{Binding Content}"
                                  IsExpanded="{Binding IsExpanded, Mode=TwoWay}"
                                  HorizontalAlignment="Stretch"
                                  Margin="10"
                                  Background="LightGray"/>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            </ItemsControl>
        </StackPanel>
    </Grid>
</UserControl>

内容的提问来源于stack exchange，提问作者Anno