複雜WPF的組合框Caliburn.Micro

Question

我建立在WPF中認爲，這是應該有一個相當複雜的組合框，使用MVVM模式與Caliburn.Micro框架。我對WPF和Caliburn很陌生，希望我能在這裏找到正確的答案。

這是我想象：

正如你所看到的，它由不同類型的項目和不同的子級別的。只有項目是可選的，而不是他們的組。除此之外，我想顯示在組合框中兩個額外的按鈕，這取決於項目組所選擇的項目屬於：

我知道我可以：

• 硬編碼XAML中的組合框看起來像這樣，但它並不適合我，因爲我需要在視圖模型中獲取數據。
• 以編程方式在我的視圖模型中定義控制樹並將我的組合框的內容屬性綁定到它。但在我的視圖模型中創建視覺效果似乎有點不對。
• 爲組合框項目創建視圖模型（和視圖）並設置各種屬性來控制它們各自的外觀。
• 創建一個全新的控件，派生自ComboBox並以某種方式實現它。

至於兩個按鈕，我可能會把它們放在組合框的頂部，並控制它們在主視圖模型中的可見性。

在考慮所有這些選項，我還沒有信心，我知道我在做什麼在這裏。

Answer 1

您可以使用模板來獲取看看你是後restyle一個ComboBox。
下面是一個簡單的例子：

XAML

<ComboBox Width="200" Height="30" ItemsSource="{Binding ItemList}"> 
    <ComboBox.ItemContainerStyle> 
     <Style> 
      <Setter Property="UIElement.IsEnabled" Value="{Binding IsSelectable}" /> 
     </Style> 
    </ComboBox.ItemContainerStyle> 
    <ComboBox.ItemTemplate> 
     <DataTemplate > 
      <StackPanel Orientation="Horizontal"> 
       <Image Name="ImageControl" Source="{Binding ImagePath}" Width="10" Height="10" /> 
       <Label Content="{Binding Name}" > 
        <Label.Style> 
         <Style TargetType="Label"> 
          <Style.Triggers> 
           <Trigger Property="IsEnabled" Value="False"> 
            <Setter Property="Foreground" Value="Black" /> 
            <Setter Property="FontWeight" Value="Bold" /> 
           </Trigger> 
          </Style.Triggers> 
         </Style> 
        </Label.Style> 
       </Label> 
      </StackPanel> 
      <DataTemplate.Triggers> 
       <DataTrigger Binding="{Binding IsSelectable}" Value="False"> 
        <Setter TargetName="ImageControl" Property="Visibility" Value="Collapsed" /> 
       </DataTrigger> 
      </DataTemplate.Triggers> 
     </DataTemplate> 
    </ComboBox.ItemTemplate> 
</ComboBox> 

C＃

// A class to hold my data for the combobox 
public class Item 
{ 
    public string Name { get; set; } 
    public bool IsSelectable { get; set; } 
    public string ImagePath { get; set; } 
} 

// In your datacontext 
public ObservableCollection<Item> ItemList { get; set; } 

public ComboBoxFun() 
{ 
    ItemList = new ObservableCollection<Item>() 
    { 
     new Item() { ImagePath=@"/images/up.png", Name="Item Group 1", IsSelectable=false}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item 1", IsSelectable=true}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item 2", IsSelectable=true}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item 3", IsSelectable=true}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item Group 2", IsSelectable=false}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item 1", IsSelectable=true}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item 2", IsSelectable=true}, 
     new Item() { ImagePath=@"/images/up.png", Name="Item 3", IsSelectable=true} 
    }; 

唯一棘手的部分是，當你關閉一個項目將被造型爲禁用，所以你必須設置不可選項目的樣式，以使它們顯得正常。

這裏是我的結果：

您可以選擇任何非組項目，它像一個正常的組合框。 至於你的按鈕，你可以根據選定的項目數據簡單地控制它們的可見性。

希望這會有所幫助。