我怎样才能让一个“手风琴的Widget”在WPF？(How can I make an “Accor

目标：

我想实现这样的事情在WPF：

_{（来源： wordpress.org ）}

初步的解决方案：

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

我希望有一个一致的外观为Header的部分Expander ，但我想要的Content的部分Expander是完全灵活的。因此，它基本上是一组垂直堆叠的“门户”，其中每个portlet具有一致的标题栏，但不同的内容。

到目前为止的代码：

这是我的时刻：

<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与StackPanel ，只是写我的扩展的样式。这被证明是简单得多，而且真的是无益处ItemsControl ，因为我反正需要申报为每个项目的自定义内容。剩下的一个问题是如何实现每个扩展自定义标题。这就是@Thomas莱维斯克的使用建议TemplateBinding进来了。我所要做的就是替换Text="Title_Of_Expander_Goes_Here"在我的头的模板（见上面的代码）与Text="{TemplateBinding Content}" 。

Answer 1:

你没有看到的扩展，因为你重新定义它的模板。这应该更好地工作：

        ...
        <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数据和工作的TreeView本来借给自己以及与这些数据的工作。