C# 手风琴内不垂直伸展的Silverlight WrapPanel

我的Silverlight应用程序中有一个带有按钮的菜单屏幕。为此，我将ItemsControl与WrapPanel一起用作ItemsPanel模板，因此按钮将换行到下一行（就像文本框处理文本一样）

菜单是这样的：

现在我需要一个新功能：将按钮分组。所以我决定用手风琴演奏零首或更多的曲目。我使用ScrollViewer作为Accordion内容模板，使用MaxHeight为150将组高度限制为150，然后使用垂直滚动条。在ScrollViewer中，有相同的ItemsControl，带有WrapPanel和按钮

我希望WrapPanel有3行不滚动的项目，因此我选择MaxHeight=150是因为：因为每个按钮（带边距）的高度都是50。这将允许3行没有滚动条。这在没有手风琴的情况下效果很好，但与手风琴不匹配

问题在于，手风琴似乎不理解包装的高度，并假设它只有一行的高度，即一个带边距的按钮的高度。所以，当我展开一个手风琴项目时，它的高度总是50。如果我只有1行项目，这是可以的，但是如果我有2行或更多，高度没有增长到100或150，仍然是50，并且滚动条显示为手风琴的高度不够

以下是当前发生的情况：

如果我手动设置ScrollViewer或WrapPanel的宽度或高度，则不会出现问题。但这是一个可调整大小的窗口，我不知道它的大小，也不知道每组有多少个iTen。用户自定义，所以我不能只设置高度或宽度。我需要手风琴来正确计算高度

在这里，出于测试目的，我将ScrollViewer的宽度设置为350（比Accordion/UserControl的宽度小一点，这样我们就可以很容易地看到它），以及MaxHeight=100（因此对于第二组来说这是不够的）。

上面的图片显示了我想要的内容，但没有宽度，因此用户可以调整窗口大小并在屏幕上显示更多按钮。

当我展开一个手风琴时，我注意到包装面板会自动调整按钮，正如我看到的那样，我可以看到项目从第一行的末尾包装到下一行。所以我假设，在展开手风琴之前，封套没有宽度（可能是无穷大），这就是为什么它还没有包裹按钮的原因。它“认为”第一行中的所有项目都有空间

下面是我编写的Silverlight应用程序，它显示了这个问题。MainPage.xaml：

C#：MainPage.xaml.cs中的代码，以及用于添加示例组/项目的属性绑定和代码：

public partial class MainPage : UserControl, INotifyPropertyChanged
{
    public class ItemViewModel
    {
        public string Description { get; set; }
    }

    public class GroupViewModel
    {
        public List<ItemViewModel> Items { get; set; }
        public string Description { get; set; }
    }

    public List<ItemViewModel> Items { get; set; }
    public List<GroupViewModel> Groups { get; set; }

    public MainPage()
    {
        InitializeComponent();
        this.DataContext = this;

        this.Groups = new List<GroupViewModel>();
        GroupViewModel g1, g2, g3;

        this.Groups.Add(g1 = new GroupViewModel() { Description = "Group with 4 itens", Items = new List<ItemViewModel>() });
        g1.Items.Add(new ItemViewModel() { Description = "item1" } );
        g1.Items.Add(new ItemViewModel() { Description = "item2" } );
        g1.Items.Add(new ItemViewModel() { Description = "item3" } );
        g1.Items.Add(new ItemViewModel() { Description = "item4" } );

        this.Groups.Add(g2 = new GroupViewModel() { Description = "Group with 10 itens", Items = new List<ItemViewModel>() });
        g2.Items.Add(new ItemViewModel() { Description = "item1" } );
        g2.Items.Add(new ItemViewModel() { Description = "item2" } );
        g2.Items.Add(new ItemViewModel() { Description = "item3" } );
        g2.Items.Add(new ItemViewModel() { Description = "item4" } );
        g2.Items.Add(new ItemViewModel() { Description = "item5" } );
        g2.Items.Add(new ItemViewModel() { Description = "item6" } );
        g2.Items.Add(new ItemViewModel() { Description = "item7" } );
        g2.Items.Add(new ItemViewModel() { Description = "item8" } );
        g2.Items.Add(new ItemViewModel() { Description = "item9" } );
        g2.Items.Add(new ItemViewModel() { Description = "item10" } );

        this.Groups.Add(g3 = new GroupViewModel() { Description = "Group with 3 itens", Items = new List<ItemViewModel>() });
        g3.Items.Add(new ItemViewModel() { Description = "item1" } );
        g3.Items.Add(new ItemViewModel() { Description = "item2" });
        g3.Items.Add(new ItemViewModel() { Description = "item3" });

        NotifyPropertyChanged("Groups");

    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

}

公共部分类主页面：UserControl，INotifyPropertyChanged
{
公共类ItemViewModel
{
公共字符串说明{get；set；}
}
公共类GroupViewModel
{
公共列表项{get；set；}
公共字符串说明{get；set；}
}
公共列表项{get；set；}
公共列表组{get；set；}
公共主页（）
{
初始化组件（）；
this.DataContext=this；
this.Groups=新列表（）；
组视图模型g1、g2、g3；
this.Groups.Add（g1=newgroupviewmodel（）{Description=“带有4个iten的组”，Items=newlist（）}）；
g1.Items.Add（新的ItemViewModel（）{Description=“item1”}）；
g1.Items.Add（新的ItemViewModel（）{Description=“item2”}）；
g1.Items.Add（新的ItemViewModel（）{Description=“item3”}）；
g1.Items.Add（新的ItemViewModel（）{Description=“item4”}）；
this.Groups.Add（g2=newgroupviewmodel（）{Description=“包含10个iten的组”，Items=newlist（）}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item1”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item2”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item3”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item4”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item5”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item6”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item7”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item8”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item9”}）；
g2.Items.Add（新的ItemViewModel（）{Description=“item10”}）；
this.Groups.Add（g3=newGroupViewModel（）{Description=“带有3个iten的组”，Items=new List（）}）；
g3.Items.Add（新的ItemViewModel（）{Description=“item1”}）；
g3.Items.Add（新的ItemViewModel（）{Description=“item2”}）；
g3.Items.Add（新的ItemViewModel（）{Description=“item3”}）；
NotifyPropertyChanged（“集团”）；
}
酒吧
public partial class MainPage : UserControl, INotifyPropertyChanged
{
    public class ItemViewModel
    {
        public string Description { get; set; }
    }

    public class GroupViewModel
    {
        public List<ItemViewModel> Items { get; set; }
        public string Description { get; set; }
    }

    public List<ItemViewModel> Items { get; set; }
    public List<GroupViewModel> Groups { get; set; }

    public MainPage()
    {
        InitializeComponent();
        this.DataContext = this;

        this.Groups = new List<GroupViewModel>();
        GroupViewModel g1, g2, g3;

        this.Groups.Add(g1 = new GroupViewModel() { Description = "Group with 4 itens", Items = new List<ItemViewModel>() });
        g1.Items.Add(new ItemViewModel() { Description = "item1" } );
        g1.Items.Add(new ItemViewModel() { Description = "item2" } );
        g1.Items.Add(new ItemViewModel() { Description = "item3" } );
        g1.Items.Add(new ItemViewModel() { Description = "item4" } );

        this.Groups.Add(g2 = new GroupViewModel() { Description = "Group with 10 itens", Items = new List<ItemViewModel>() });
        g2.Items.Add(new ItemViewModel() { Description = "item1" } );
        g2.Items.Add(new ItemViewModel() { Description = "item2" } );
        g2.Items.Add(new ItemViewModel() { Description = "item3" } );
        g2.Items.Add(new ItemViewModel() { Description = "item4" } );
        g2.Items.Add(new ItemViewModel() { Description = "item5" } );
        g2.Items.Add(new ItemViewModel() { Description = "item6" } );
        g2.Items.Add(new ItemViewModel() { Description = "item7" } );
        g2.Items.Add(new ItemViewModel() { Description = "item8" } );
        g2.Items.Add(new ItemViewModel() { Description = "item9" } );
        g2.Items.Add(new ItemViewModel() { Description = "item10" } );

        this.Groups.Add(g3 = new GroupViewModel() { Description = "Group with 3 itens", Items = new List<ItemViewModel>() });
        g3.Items.Add(new ItemViewModel() { Description = "item1" } );
        g3.Items.Add(new ItemViewModel() { Description = "item2" });
        g3.Items.Add(new ItemViewModel() { Description = "item3" });

        NotifyPropertyChanged("Groups");

    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

}

<toolkit:Accordion.ContentTemplate>
    <DataTemplate>
        <Grid>
            <ScrollViewer VerticalScrollBarVisibility="Auto"
                            HorizontalScrollBarVisibility="Disabled">
                <ItemsControl ItemsSource="{Binding Items}">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <toolkit:WrapPanel HorizontalAlignment="Left"
                                                MaxWidth="620"
                                                Margin="10" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

<ItemsControl HorizontalAlignment="Stretch" VerticalAlignment="Top" ItemsSource="{Binding Groups}" 
            HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch"
            ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Margin="0">

    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                <Grid.RowDefinitions>
                    <RowDefinition Height="24"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                <Button Grid.Row="0" Command="{Binding ExpandCommand}" Content="{Binding Description}"/>

                <ScrollViewer Grid.Row="1" Padding="0" VerticalScrollBarVisibility="Auto" MaxHeight="100" BorderThickness="0"
                                HorizontalScrollBarVisibility="Disabled" Height="{Binding ContentHeight}" HorizontalAlignment="Stretch">
                    <ItemsControl ItemsSource="{Binding Items}" >
                        <ItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel HorizontalAlignment="Left" Margin="10"/>
                            </ItemsPanelTemplate>
                        </ItemsControl.ItemsPanel>

                        <ItemsControl.ItemTemplate>
                            <DataTemplate>
                                <Button HorizontalContentAlignment="Left" Margin="3" Width="80" HorizontalAlignment="Left" VerticalAlignment="Top" Content="{Binding Description}"/>
                            </DataTemplate>
                        </ItemsControl.ItemTemplate>
                    </ItemsControl>
                </ScrollViewer>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

public partial class MainPage : UserControl, INotifyPropertyChanged
{
    public class ItemViewModel
    {
        public string Description { get; set; }
    }

    public class GroupViewModel : INotifyPropertyChanged
    {
        public GroupViewModel()
        {
            ContentHeight = double.NaN;
            NotifyPropertyChanged("ContentHeight");
            ExpandCommand = new DelegateCommand<object>(Expand);
        }
        public List<ItemViewModel> Items { get; set; }
        public string Description { get; set; }
        public double ContentHeight { get; set; }

        public DelegateCommand<object> ExpandCommand { get; set; }
        public void Expand(object obj)
        {
            if (double.IsNaN(this.ContentHeight)) this.ContentHeight = 0;
            else this.ContentHeight = double.NaN;
            NotifyPropertyChanged("ContentHeight");
        }

        public event PropertyChangedEventHandler PropertyChanged;
        private void NotifyPropertyChanged(string propertyName) { if (PropertyChanged != null) { PropertyChanged(this, new PropertyChangedEventArgs(propertyName)); } }
    }

    public List<ItemViewModel> Items { get; set; }
    public List<GroupViewModel> Groups { get; set; }

    public MainPage()
    {
        InitializeComponent();
        this.DataContext = this;

        this.Groups = new List<GroupViewModel>();
        GroupViewModel g1, g2, g3;

        this.Groups.Add(g1 = new GroupViewModel() { Description = "Group with 4 itens", Items = new List<ItemViewModel>() });
        g1.Items.Add(new ItemViewModel() { Description = "item1" } );
        g1.Items.Add(new ItemViewModel() { Description = "item2" } );
        g1.Items.Add(new ItemViewModel() { Description = "item3" } );
        g1.Items.Add(new ItemViewModel() { Description = "item4" } );

        this.Groups.Add(g2 = new GroupViewModel() { Description = "Group with 10 itens", Items = new List<ItemViewModel>() });
        g2.Items.Add(new ItemViewModel() { Description = "item1" } );
        g2.Items.Add(new ItemViewModel() { Description = "item2" } );
        g2.Items.Add(new ItemViewModel() { Description = "item3" } );
        g2.Items.Add(new ItemViewModel() { Description = "item4" } );
        g2.Items.Add(new ItemViewModel() { Description = "item5" } );
        g2.Items.Add(new ItemViewModel() { Description = "item6" } );
        g2.Items.Add(new ItemViewModel() { Description = "item7" } );
        g2.Items.Add(new ItemViewModel() { Description = "item8" } );
        g2.Items.Add(new ItemViewModel() { Description = "item9" } );
        g2.Items.Add(new ItemViewModel() { Description = "item10" } );

        this.Groups.Add(g3 = new GroupViewModel() { Description = "Group with 3 itens", Items = new List<ItemViewModel>() });
        g3.Items.Add(new ItemViewModel() { Description = "item1" } );
        g3.Items.Add(new ItemViewModel() { Description = "item2" });
        g3.Items.Add(new ItemViewModel() { Description = "item3" });

        NotifyPropertyChanged("Groups");

    }

    public event PropertyChangedEventHandler PropertyChanged;
    private void NotifyPropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }


}