如何在WPF中制作“手风琴小工具”？

Question

目标：

我正试图在WPF中实现这样的目标：

_{（来源：wordpress.org）}

---

初步解决方案：

目前，我正在尝试使用由ItemsControl组成的ItemTemplate Expander。

我希望对Header的{​​{1}}部分保持一致，但我希望Expander的{​​{1}}部分完全灵活。所以，它基本上是一组垂直堆叠的“portlet”，每个portlet都有一致的标题栏，但内容不同。

---

到目前为止的代码：

这就是我现在所拥有的：

Content

---

讨论：

我运行时唯一显示的是用户的Expander和它下面的按钮（“添加新用户”和“删除用户”）。没有<ItemsControl Grid.Row="2" Grid.Column="2"> <ItemsControl.ItemTemplate> <DataTemplate> <Expander> <Expander.HeaderTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock FontSize="14" FontWeight="Bold" Text="Title_Of_Expander_Goes_Here" /> <TextBlock Margin="10,0,0,0" FontWeight="Bold" FontSize="18" Text="*" /> </StackPanel> </DataTemplate> </Expander.HeaderTemplate> <Expander.Template> <ControlTemplate TargetType="Expander"> <Border BorderThickness="1"> <ContentPresenter /> </Border> </ControlTemplate> </Expander.Template> </Expander> </DataTemplate> </ItemsControl.ItemTemplate> <ItemsControl.Items> <StackPanel> <TextBlock FontSize="14" FontWeight="Bold" Text="Users:" /> <wt:DataGrid Margin="0,1,0,0" AutoGenerateColumns="False" CanUserAddRows="True" CanUserDeleteRows="True" ItemsSource="{Binding Source={StaticResource Main_SystemUsers}, XPath=//Users/*}"> <wt:DataGrid.Columns> <wt:DataGridTextColumn Header="User Name" Binding="{Binding XPath=@UserName}" /> <wt:DataGridComboBoxColumn Header="Role" ItemsSource="{Binding Source={StaticResource Main_UserRoles}, XPath=//Roles/*}" SelectedValueBinding="{Binding XPath=@Role}" /> </wt:DataGrid.Columns> </wt:DataGrid> <StackPanel Margin="0,10,0,0" Orientation="Horizontal"> <Button Content="Add New User..." /> <Button Margin="10,0,0,0" Content="Delete User..." /> </StackPanel> </StackPanel> </ItemsControl.Items> </ItemsControl> 或标题栏。此外，即使我确实看到了一个，我也不确定如何为标题栏上显示的标题设置DataGrid。如果我使用Expander，我知道如何进行绑定，但我想以声明方式设置我的项目。

问题：

我应该怎么做？我正在寻找我现有的解决方案或干净的解决方案。

修改

我最终做的是用Binding替换ItemsSource并为我的扩展器编写样式。这被证明要简单得多，ItemsControl确实没有任何好处，因为无论如何我需要为每个项目声明自定义内容。剩下的一个问题是如何为每个扩展器实现自定义标题。这就是@Thomas Levesque建议使用StackPanel的地方。我所要做的就是用ItemsControl替换我标题模板中的TemplateBinding（参见上面的代码）。

Answer 1

您没有看到Expander，因为您重新定义了其模板。这个应该更好：

        ...
        <Expander.Template>
          <ControlTemplate
              TargetType="Expander">
              <Border
                  BorderThickness="1">
                  <Expander Content="{TemplateBinding Content}" Header="{TemplateBinding Header}"/>
              </Border>
          </ControlTemplate>
        </Expander.Template>
        ...

Answer 2

我个人认为TreeView控件可以为你提供更好的工作基础，特别是如果你使用Expression Blend作为从项目创建新/空模板的基础。查看默认模板非常具有启发性，可以为您提供更细粒度的控制，更好地理解和洞察默认情况下的工作方式。然后你可以去他们的城镇。看起来你正在使用Hierchical Data和TreeViews本身就可以很好地处理这些数据。