C++/ WinRT - ComboBox with separator

Question

Hi,
I want a ComboBox with a separator but it's not that easy i guess.

 <ComboBoxItem IsEnabled="False" >  
                 <NavigationViewItemSeparator BorderThickness="1"></NavigationViewItemSeparator>  
  </ComboBoxItem>  

I have a bound collection, i've read somewhere that it's possible to change the DataTemplate at runtime but it was for UWP and the controls are different.
I recognize only 2 options, if my items should look as follows:

<ComboBox.ItemTemplate>  
               <DataTemplate x:DataType="local:Example">  
                          <StackPanel Orientation="Horizontal" Opacity="{x:Bind BoolToOpacity(Activated), Mode=OneWay}">  
                                      <Image MaxHeight="14" Margin="0,0,10,0"  Source="your path"></Image>  
                                      <TextBlock Text="{x:Bind Description, Mode=OneWay}"></TextBlock>  
                           </StackPanel>  
                 </DataTemplate>  
</ComboBox.ItemTemplate>  

             

It's just an Image, a TextBlock within a StackPanel. I can change the StackPanel's opacity, so it's still clickable, looks like disabled, and stays in the same opacity even if it's selected or while the mouse pointer is over it.
The image path has to be bound too.

1. I can add the separator in every item by DataTemplate. Set the visibility to show/hide the separator.
2. I could try it by code but that's horrible. Trying it for hours but i have several problems by setting BitmapImage + UriSource & Image + Source.

Is there a better approach?

ADDENDUM:
Initially i wanted a menu at the bottom of the dropdown but it's not possible to mix static items in xaml for that the databound DataTemplate is only above the menu?!

<ComboBoxItem IsEnabled="False" >  
               <NavigationViewItemSeparator BorderThickness="1"></NavigationViewItemSeparator>  
</ComboBoxItem>  
<ComboBoxItem x:Name="cmbiNew">Neu</ComboBoxItem>  
<ComboBoxItem x:Name="cmbiEdit´´">Bearbeiten</ComboBoxItem>  
<ComboBoxItem x:Name="cmbiDelete">Löschen</ComboBoxItem>  
  

Answer 1

Hello,

Welcome to Microsoft Q&A!

It is possible to use DataTemplateSelector in WinUI3 app for the ComboBox. So you could use the DataTemplateSelector to set a Separator like item in the Combobox. I've made a demo in C#, you could refer to the following code and convert the C# code to C++/WinRT. The XAML part should be the same.

Xaml:

   <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">  
        <StackPanel.Resources>  
              
            <DataTemplate x:Key="NormalItemTemplate" x:DataType="x:String">  
                <StackPanel Background="AliceBlue" Width="300" Height="50">  
                    <TextBlock Text="{x:Bind}" />  
                </StackPanel>  
            </DataTemplate>  
  
            <DataTemplate x:Key="SeparatorItemTemplate" x:DataType="x:String">  
                <StackPanel Background="Black" Width="300" Height="15"/>  
            </DataTemplate>  
  
            <local:MyDataTemplateSelector x:Key="MyDataTemplateSelector"   
                                      Normal="{StaticResource NormalItemTemplate}"  
                                      Separator="{StaticResource SeparatorItemTemplate}"/>  
  
        </StackPanel.Resources>  
  
        <ComboBox x:Name="FontsCombo" Header="Fonts" Height="88" Width="300"   
          ItemsSource="{x:Bind fonts}" ItemTemplateSelector="{StaticResource MyDataTemplateSelector}" />  
  
  
    </StackPanel>  

MainWindow

  public sealed partial class MainWindow : Window  
    {  
       public  ObservableCollection<string> fonts { get; set; }  
  
        public MainWindow()  
        {  
            this.InitializeComponent();  
            fonts= new ObservableCollection<string>();  
  
            fonts.Add("Arial");  
            fonts.Add("1");  
            fonts.Add("Courier New");  
            fonts.Add("Times New Roman");  
        }  
  
    }  
  
    public class MyDataTemplateSelector : DataTemplateSelector  
    {  
        public DataTemplate Normal { get; set; }  
        public DataTemplate Separator { get; set; }  
  
        protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)  
        {  
            if (item.Equals("1"))  
            {  
                return Separator;  
            }  
            else  
            {  
                return Normal;  
            }  
        }  
    }  

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.