Question

我正在WPF中构建一个视图，它应该有一个非常复杂的ComboBox，使用带有Caliburn.Micro框架的MVVM模式。我是WPF和Caliburn的新手，我希望我能在这里找到正确的答案。

这就是我的想象：
Expanded ComboBox

如您所见，它由不同类型的项目和不同的子级别组成。只有项目可以选择，而不是他们的组。除此之外，我想在组合框上显示两个额外的按钮，这取决于所选项目所属的项目组：
Shrunken Combobox

我知道我可以：

在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}
    };

唯一棘手的部分是，当您禁用某个项目时，它将被设置为已禁用，因此您必须设置不可选项目的样式，使它们看起来正常。

这是我的结果：

Results

您可以选择任何非组项目，它的工作方式类似于普通的ComboBox。对于您的按钮，您可以根据所选项目的数据简单地控制它们的可见性。

希望这有帮助。

复杂的WPF ComboBox与Caliburn.Micro

1 个答案: