복잡한 WPF ComboBox와 Caliburn.Micro

Question

저는 Caliburn.Micro 프레임 워크에서 MVVM 패턴을 사용하여 매우 복잡한 ComboBox가 있어야하는 WPF에서 뷰를 작성합니다. 저는 WPF와 Caliburn을 처음 접했고 여기서 올바른 대답을 찾을 수 있기를 바랍니다.

이 내가 상상하는 것입니다 : 당신이 볼 수 있듯이

, 그것은 항목과 다른 자식 수준의 다양한 종류로 구성되어 있습니다. 항목 만 선택할 수 있으며 그룹은 선택할 수 없습니다. 그뿐만 아니라, 내가 선택한 항목이 속한 품목 그룹에 의존하는 콤보 상자에 두 개의 추가 버튼을 표시하고 싶은 사항 :

나는 내가 할 수있는 알고

• 하드 코드 XAML의 콤보 상자를 이렇게 보이게 만들었지 만 내 뷰 모델에 데이터가 있어야하므로 실제로 작동하지 않습니다.
• 내보기 모델에서 컨트롤 트리를 프로그래밍 방식으로 정의하고 내 콤보 상자의 콘텐츠 속성을 바인딩합니다. 그러나 내 뷰 모델에서 비주얼을 생성하는 것은 약간 잘못된 것처럼 보입니다.
• 콤보 상자 항목의보기 모델 (및보기)을 만들고 다양한 속성을 설정하여 각각의 모양을 제어합니다.
• ComboBox에서 파생 된 완전히 새로운 컨트롤을 만들고이를 구현합니다.

두 개의 버튼에 대해서는 콤보 박스 위에 놓고 기본보기 모델에서 가시성을 제어 할 수 있습니다.

이러한 모든 옵션을 고려해 본 결과, 내가 여기서 뭘하고 있는지 확신 할 수 없습니다.

Answer 1

템플릿을 사용하여 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} 
    }; 

: 여기
빠른 예입니다 따라서 선택이 불가능한 항목을 정상적으로 보이도록 스타일을 지정해야합니다.

당신은 어떤 비 그룹 항목을 선택할 수 있습니다, 그것은 정상적인 콤보처럼 작동 :

여기 내 결과입니다. 버튼의 경우 선택한 항목의 데이터를 기반으로 버튼의 가시성을 제어 할 수 있습니다.

희망이 도움이됩니다.