如何在WPF中製作「Accordion Widget」？

Question

目標：

我想實現WPF是這樣的：

Widget with several vertically stacked expanders http://wordpress.org/extend/plugins/tabbed-widgets/screenshot-3.png

---

初步的解決方案：

此刻，我試圖使用ItemsControl和ItemTemplate組成的Expander。

我希望有一個一致的外觀爲Expander的Header部分，但我想Expander的Content部分是完全靈活的。所以，它基本上是一組垂直堆疊的「portlet」，其中每個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，我知道如何進行綁定，但我想以聲明方式設置項目。

問題：

我應該如何去了解呢？我正在尋找我現在擁有的解決方案或者是一張清潔解決方案。

編輯：

我最終什麼事做用StackPanel更換ItemsControl，只是寫我的擴展的樣式。事實證明這很簡單，因爲我需要爲每個項目聲明自定義內容，所以ItemsControl確實沒有任何好處。剩下的一個問題是如何爲每個擴展器實現自定義標題。這就是@托馬斯列維斯克的建議使用TemplateBinding進來。我所要做的只是在我的標題的模板（見上面的代碼）Text="{TemplateBinding Content}"替換Text="Title_Of_Expander_Goes_Here"。

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本身也很適合處理這些數據。