WPF Add Header to Custom ComboBox

Question

I have a custom ComboBox that have each item (Favorites and not favorites) is a Label + Button, then the last item have only a button to load all elements. Now I want to add a header as the first item, that says "Favorites".

Right now I have:

<ComboBox 
        x:Name="ComboBoxBtn" 
        VerticalAlignment="Top" 
        HorizontalAlignment="Left" 
        Margin="0,0,0,-1" 
        Width="300" 
        ItemsSource="{Binding Source, RelativeSource={RelativeSource AncestorType=UserControl}}"
        SelectedItem="{Binding Path=Selected, Mode=TwoWay, RelativeSource={RelativeSource AncestorType=UserControl}}"
        IsSynchronizedWithCurrentItem="True">        
        <ComboBox.ItemTemplate>
            <DataTemplate>
                <Grid Name="PART_GRID">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="3*" />
                        <ColumnDefinition Width="Auto" />
                    </Grid.ColumnDefinitions>
                    <Label
                        Content="{Binding}"
                       Width="250" Visibility="{Binding Path=., Converter={StaticResource elementToVisibilityConverter}}" />
                    <Button Name="PART_BUTTON"
                        Grid.Column="1"
                        Content="+"
                        Command="{Binding AddCommandButton, ElementName=root}"
                        CommandParameter="{Binding}"
                        Visibility="{Binding Path=., Converter={StaticResource elementToVisibilityConverter}}"/>
                    <Button Content="Carregar Todos" Margin="5,5"
                                    Command="{Binding LoadAllCommandButton, ElementName=root}"
                                    CommandParameter="{Binding ElementName=root, Path=FavoriteType}"
                                    Visibility="{Binding Path=.,Converter={StaticResource elementToVisibilityForAddConverter}}"/>
                </Grid>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Favorite}"
                             Value="True">
                        <Setter TargetName="PART_GRID"
                            Property="Background"
                            Value="#FFE6E6FA" />
                        <Setter TargetName="PART_BUTTON"
                            Property="Content"
                            Value="-" />
                        <Setter TargetName="PART_BUTTON"
                            Property="Command"
                            Value="{Binding RemoveCommandButton, ElementName=root}" />
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ComboBox.ItemTemplate>
    </ComboBox>

Answer 1

I preferred a different aproach, which i think is easier and more clean:

i created an empty interface IDrawable. all classes i need to put inside the combobox should inherit from IDrawable i created these:
MyLabel:

public class MyLabel : IDrawable
{
    public string text { get; set; }
    public MyLabel()
    {
        this.text = "MYTEXT";
    }
}

MyButton:

public class MyButton : IDrawable
{
    public string text { get; set; }
    public MyButton()
    {
        this.text = "MYNBUTTON";
    }
}

MyLabelButton: public class MyLabelButton : IDrawable { public string labelText { get; set; } public string buttonText { get; set; }

    public MyLabelButton()
    {
        labelText = "labelText";
        buttonText = "buttonText";
    }
}

than here is the xaml

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:me="clr-namespace:WpfApplication1">
    <Window.Resources>
        <DataTemplate DataType="{x:Type me:MyButton}">
            <Button Content="{Binding text}" />
        </DataTemplate>
        <DataTemplate DataType="{x:Type me:MyLabel}">
            <TextBlock Text="{Binding text}"/>
        </DataTemplate>
        <DataTemplate DataType="{x:Type me:MyLabelButton}">
            <StackPanel Orientation="Horizontal">
                <Label Content="{Binding labelText}"/>
                <Button Content="{Binding buttonText}"/>
            </StackPanel>
        </DataTemplate>
    </Window.Resources>
    <Grid Name="MyGrid">
        <ComboBox Name="MyCombo" ItemsSource="{Binding list}" SelectedItem="{Binding sel}" PreviewMouseLeftButtonUp="ComboBox_PreviewMouseLeftButtonUp"/>
    </Grid>
</Window>

and codebehind:

public partial class MainWindow : Window
    {
        private IDrawable clicked;

        public ObservableCollection<IDrawable> list { get; set; }
        public IDrawable sel { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            list = new ObservableCollection<IDrawable>();
            list.Add(new MyLabel());
            list.Add(new MyLabelButton());
            list.Add(new MyButton());
            this.DataContext = this;
        }

        private void ComboBox_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Point pt = e.GetPosition(MyGrid);

            clicked = null;
            VisualTreeHelper.HitTest(
                MyGrid,
                null,
                new HitTestResultCallback(ResultCallback),
                new PointHitTestParameters(pt));


            if (clicked != null)
            {
                ((ComboBox)sender).IsDropDownOpen = false;

                //do something
            }
        }

        private HitTestResultBehavior ResultCallback(HitTestResult result)
        {
            DependencyObject parentObject = VisualTreeHelper.GetParent(result.VisualHit);

            if (parentObject == null)
                return HitTestResultBehavior.Continue;

            var v = parentObject as Button;

            if (v == null)
                return HitTestResultBehavior.Continue;

            if (v.DataContext != null && v.DataContext is IDrawable)
            {
                clicked = (IDrawable)v.DataContext;
                return HitTestResultBehavior.Stop;
            }
            return HitTestResultBehavior.Continue;
        }
    }

the result is

as you can see I have standard combobox and custom elements. which i think it's better. in codebehind you can handle everything, like the impossibility of select the first label, call the command associated with the button, if the button is pressed, and so on.

In ComboBox_PreviewMouseLeftButtonUp i handled the click on the selected item, in case you want to do something particular if the selected button is pressed, and not show the dropdown menu.

this example is pretty barebones you need to customize it a little more and use MVVM everywhere.
at the moment you can push the button in the dropDown menu, you probabily want to disable the click if that buttont isn't selected.

EDIT

ComboBox_PreviewMouseLeftButtonUp should be like this:

private void ComboBox_PreviewMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            Point pt = e.GetPosition((ComboBox)sender);

            clicked = null;
            VisualTreeHelper.HitTest(
                (ComboBox)sender,
                null,
                new HitTestResultCallback(ResultCallback),
                new PointHitTestParameters(pt));


            if (clicked != null)
            {
                ((ComboBox)sender).IsDropDownOpen = false;

                //do something
            }
        }

(replaced Mygrid with (ComboBox)sender