How to disable an Item in listbox even when it has Multi-select mode in WPF?

Question

I am working on creating a header inside the listbox which will turn gray and will have a colon in it while the rest of the entries (listbox items) will be black.

What I am trying to do is that if the value matches one of the types in the list string then it will turn gray and become header. After it becomes a header, I would like to disable the itembox making it unclickable while the rest of the entries are clickable.

Here is my function:

private void PopulateItems(List<string> items, string groupName)
{
    listbx.Items.Clear();

    List<string> itemsList = items;
    string founditemtype = null;

    foreach (string item in items)
    {
        foreach (string itemtype in Type)
        {
            if(item == itemtype)
            {
                founditemtype = itemtype;
                Label label = new Label();
                label.Content = itemtype + ":";
                label.FontWeight = FontWeights.Bold;
                label.Foreground = Brushes.Gray;

                // Handle the PreviewMouseLeftButtonDown event to prevent the grayed text to be selected:
                label.PreviewMouseLeftButtonDown += (sender, e) =>
                {
                    if (label.Content.ToString().Contains(":"))
                    {
                        e.Handled = true;
                    }
                };

                listbx.Items.Add(label);
            }
        }

        if(item != founditemtype)
        {
            listbx.Items.Add(item);
        }
}

Here is the WPf of my listbox:

<ListBox x:Name="listbx" BorderBrush="Black" BorderThickness="2" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Left" Width="525" Height="200" SelectionMode="Multiple" />

However, every time I run the application the listbox always allows the user to select the items that should be greyed out making it clickable and selected. Even with the multi-selection mode turned on, it can still be selected when the user selects other items and by mistake selects the header item. What am I doing wrong here?

Answer 1

You should avoid working directly on the ItemsControl.Items property. Instead create a member variable that you can operate on.

Additionally, never add controls to an ItemsControl directly. This will drastically impair the performance (because doing so will disable UI virtuialization for the ListBox).

You can simplify your code by using the built-in behavior of all UIElement elements: when you set the UIElement.IsEnabled property on the ListBoxItem to false, the item container will be automatically disabled, means grayed out and not clickable.

To accomplish this you need access to the ListBoxItem.
Using a MultiBinding and a IMultiValueConverter can easily solve your problem, avoiding unnecessary iterations.

I also recommend to use data binding in general Microsoft Learn: Data binding overview in WPF.

If your original goal is to implement grouping, take a look at Microsoft Learn: Collection Views and grouping.
The ListBox is able to automatically create groups for.

ListBoxValueToHeaderConverter.cs

public class ListBoxValueToHeaderConverter : IMultiValueConverter
{
  public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture)
  {
    string currentItem = values
      .OfType<string>()
      .First();
    ListBoxItem currentItemContainer = values
      .OfType<ListBoxItem>()
      .First();
    IEnumerable<string> predicateCollection = values
      .OfType<IEnumerable<string>>()
      .First();
      
    if (predicateCollection.Contains(currentItem))
    {
      // Disable the item container to make it automatically not clickable
      // and to be rendered as grayed out
      currentItemContainer.IsEnabled = false;
      return ":";
    }

    return currentItem;
  }

  public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    => throw new NotSupportedException();
}

MainWindow.xaml.cs

partial class MainWindow : Window
{
  // You should assign a new collection if you want to modify it.
  // This will update the MultiBinding (in XAML). 
  // In general, when binding an ItemsCOntrol to a collection 
  // prefer to clear/replace the items to improve the performance of the control. 
  // Because this collection is not the binding source for a control 
  // replacing in this scenario is fine.
  public ObservableCollection<string> Type { get; private set; }

  // Declare this property as public if you want to bind to it
  private ObservableCollection<string> Items { get; }

  public MainWindow(TestViewModel dataContext, INavigator navigator)
  {
    InitializeComponent();

    this.Items = new ObservableCollection<string>();

    // It's generally recommended to use data binding instead of explicit assignment.
    this.ListBox.ItemsSource = this. Items;
  }

  private void PopulateItems(List<string> newItems, string groupName)
  {
    this.Items.Clear();
    newItems.ForEach(this.Items.Add);
  }
}

MainWindow.xaml

<Window>
  <Window.Resources>
    <local:ListBoxValueToHeaderConverter x:Key="ListBoxValueToHeaderConverter" />
  </Window.Resources>

  <ListBox x:Name="ListBox">
    <ListBox.ItemContainerStyle>
      <Style TargetType="ListBoxItem">
        <Setter Property="Content">
          <Setter.Value>
            <MultiBinding Converter="{StaticResource ListBoxValueToHeaderConverter}">

              <!-- The current item -->
              <Binding />

              <!-- The item container (ListBoxItem) -->
              <Binding RelativeSource="{RelativeSource Self}" />

              <!-- The filter predicate collection defined in the parent Window --> 
              <Binding RelativeSource="{RelativeSource AncestorType=Window}"
                       Path="Type" />
            </MultiBinding>
          </Setter.Value>
        </Setter>

        <Style.Triggers>
    
          <!-- Define a trigger to change the look of the disabled ListBoxItem -->
          <Trigger Property="IsEnabled"
                   Value="False">
            <Setter Property="FontWeight"
                    Value="Bold" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </ListBox.ItemContainerStyle>
  </ListBox>
</Window>

Answer 2

I'm not entirely sure that I understood correctly what you need. But check this code:

    private HashSet<string> Type = new() {/* Some string type names */};
    private void PopulateItems(List<string> items, string groupName)
    {
        listbx.Items.Clear();

        //List<string> itemsList = items;
        //string founditemtype = null;

        foreach (string item in items)
        {
            //foreach (string itemtype in Type)
            //{
                //if (item == itemtype)
                if (Type.Contains(item))
                {
                    //founditemtype = itemtype;
                    Label label = new Label();
                    //label.Content = itemtype + ":";
                    label.Content = item+ ":";
                    label.FontWeight = FontWeights.Bold;
                    label.Foreground = Brushes.Gray;

                    //// Handle the PreviewMouseLeftButtonDown event to prevent the grayed text to be selected:
                    //label.PreviewMouseLeftButtonDown += (sender, e) =>
                    //{
                    //    if (label.Content.ToString().Contains(":"))
                    //    {
                    //        e.Handled = true;
                    //    }
                    //};

                    listbx.Items.Add(new ListBoxItem()
                    {
                        Content = label,
                        IsEnabled = false
                    });
                }
            //}

            //if (item != founditemtype)
            else
            {
                listbx.Items.Add(item);
            }
        }
    }