Mutiple selection behavior

Eduardo Gomez 3,416 Reputation points
2023-05-05T00:35:26.4+00:00

I have a combo box, that display

WPF

Name (Email)

User's image

public class CreateRoomDaialogViewModel : ObservableObject {

        public List<User>? _peopleData { get; set; }

        public List<string>? _comboData { get; set; }


        public CreateRoomDaialogViewModel(List<User> PeopleData) {
            _peopleData = PeopleData;
            ComboData();
        }

        private void ComboData() {
            _comboData = new List<string>();

            foreach (var item in _peopleData!) {
                _comboData.Add($"{item.Name} ({item.Email})");
            }
        }

I want to accomplish something like this

User's image

Windows Presentation Foundation
Windows Presentation Foundation
A part of the .NET Framework that provides a unified programming model for building line-of-business desktop applications on Windows.
2,700 questions
{count} votes

Accepted answer
  1. Hui Liu-MSFT 47,176 Reputation points Microsoft Vendor
    2023-05-05T09:25:25.7833333+00:00

    Hi,@Eduardo Gomez. You could try to refer to the code here.

     <Window.Resources>
            <ControlTemplate x:Key="ComboboxToggleButton" TargetType="{x:Type ToggleButton}">
                <Grid Background="{Binding Background,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition />
                        <ColumnDefinition Width="35" />
                    </Grid.ColumnDefinitions>
                    <Border x:Name="Border" Grid.ColumnSpan="2" Background="Transparent"  BorderBrush="Black" BorderThickness="{Binding BorderThickness,RelativeSource={RelativeSource TemplatedParent}}"/>
                    <Path x:Name="Arrow" Grid.Column="1" Opacity="1" Stroke="Black" StrokeThickness="1.5" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0" />
                    <Path x:Name="Arrow_checked" Opacity="0" Grid.Column="1" Fill="Black" Stroke="Black" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0 Z" />
                    <ContentPresenter TextElement.FontFamily="Segoe Ui Dark" TextElement.FontSize="18" TextElement.Foreground="Black" VerticalAlignment="Center"  Grid.Column="0" Margin="10,0,0,0" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="True" />
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="ToggleButton.IsMouseOver" Value="true">
                        <Setter TargetName="Border" Property="Background" Value="Gray" />
                        <Setter TargetName="Border" Property="BorderThickness" Value="1.2" />
                    </Trigger>
                    <Trigger Property="IsChecked" Value="False">
                        <Setter Property="Opacity" Value="1" TargetName="Arrow"/>
                        <Setter Property="Opacity" Value="0" TargetName="Arrow_checked"/>
                    </Trigger>
                    <Trigger Property="ToggleButton.IsChecked" Value="true">
                        <Setter Property="Opacity" Value="0" TargetName="Arrow"/>
                        <Setter Property="Opacity" Value="1" TargetName="Arrow_checked"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Border" Property="Background" Value="Gray" />
                        <Setter TargetName="Border" Property="BorderBrush" Value="White" />
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
    
            <Style TargetType="{x:Type Expander}">
                <Setter Property="FontFamily" Value="Segoe Ui Dark"></Setter>
                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                <Setter Property="MaxHeight" Value="200"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Expander}">
                            <DockPanel>
                                <ToggleButton x:Name="HeaderSite" Height="35" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="Black"   FontStyle="{TemplateBinding FontStyle}"   FontFamily="Segoe UI Dark" 
                         IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"   Template="{StaticResource ComboboxToggleButton}" />
                                <Border  BorderThickness="0,4.5,0,0" BorderBrush="Transparent">
                                    <Border x:Name="bod" BorderBrush="Transparent" SnapsToDevicePixels="True" BorderThickness="1">
                                        <ContentPresenter x:Name="ExpandSite"  Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                    </Border>
                                </Border>
                            </DockPanel>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsExpanded" Value="true">
                                    <Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
                                    <Setter Property="BorderBrush" TargetName="bod" Value="Black"/>
                                </Trigger>
                                <Trigger Property="IsEnabled" Value="false">
                                    <Setter Property="Foreground" Value="Gray"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
    
            <Style x:Key="itemstyle"   TargetType="{x:Type ListBoxItem}">
                <Setter Property="SnapsToDevicePixels" Value="true" />
                <Setter Property="OverridesDefaultStyle"  Value="true" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid x:Name="Border"  Height="40"  SnapsToDevicePixels="true">
                                <Grid.Background>
                                    <SolidColorBrush Color="Transparent" />
                                </Grid.Background>
                                <ContentPresenter Name="cmb_name" TextElement.FontFamily="Segoe Ui Dark" TextElement.FontSize="18" TextElement.Foreground="Black" Margin="10,0,0,0" VerticalAlignment="Center"></ContentPresenter>
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter TargetName="Border" Property="Background" Value="Gray"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style TargetType="Control">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Border BorderBrush="Black" BorderThickness="1" Margin="1,2,2,2" >
                                            <Rectangle Fill="LightGray" Opacity="0.1"></Rectangle>
                                        </Border>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
    
            <Style  TargetType="CheckBox" >
                <Setter Property="SnapsToDevicePixels" Value="True"></Setter>
                <Setter Property="OverridesDefaultStyle" Value="True"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="CheckBox">
                            <Grid x:Name="ab" Background="Transparent">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="30"/>
                                    <ColumnDefinition/>
                                </Grid.ColumnDefinitions>
                                <Rectangle VerticalAlignment="Center" Height="20" Width="20"  Fill="White" HorizontalAlignment="Left"></Rectangle>
                                <Grid x:Name="checkGrid" VerticalAlignment="Center" Height="20" Width="20" Background="Black" HorizontalAlignment="Left">
                                    <Viewbox Height="13" Width="13">
                                        <Path x:Name="Check" SnapsToDevicePixels="True" UseLayoutRounding="True" Width="18.7969" Height="16.3094" Canvas.Left="0" Canvas.Top="1.52588e-005" Stretch="Fill" Fill="White" Data="F1 M 0.731262,8.75935L 0.106262,8.08437C 0.0354614,7.9948 0,7.8979 0,7.79375C 0,7.66875 0.0479736,7.5573 0.143799,7.45937L 1.94067,5.77187C 2.02606,5.69893 2.12708,5.66249 2.24377,5.66249C 2.30212,5.66249 2.36096,5.67397 2.42035,5.69685C 2.47974,5.71977 2.52814,5.75417 2.56567,5.79997L 7.5188,11.1406L 16.0438,0.165604C 16.1417,0.055191 16.2584,1.52588e-005 16.3938,1.52588e-005C 16.4979,1.52588e-005 16.5896,0.0322723 16.6688,0.0968475L 18.6313,1.60939C 18.6709,1.64272 18.7084,1.69011 18.7438,1.75154C 18.7792,1.813 18.7969,1.8698 18.7969,1.92189C 18.7969,2.03435 18.7646,2.1385 18.7,2.23439L 7.74377,16.3094L 0.731262,8.75935 Z " />
                                    </Viewbox>
                                </Grid>
                                <Grid Background="Transparent" Grid.Column="1" IsHitTestVisible="True" HorizontalAlignment="Stretch">
                                    <TextBlock VerticalAlignment="Center"  FontSize="18" FontFamily="Segoe Ui Dark" Foreground="Black"  TextTrimming="CharacterEllipsis">
                            <ContentPresenter></ContentPresenter>
                                    </TextBlock>
                                </Grid>
    
                            </Grid>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsChecked" Value="True">
                                    <Setter Property="Opacity" Value="1"  TargetName="Check"></Setter>
                                </Trigger>
                                <Trigger Property="IsChecked" Value="False">
                                    <Setter Property="Opacity" Value="0" TargetName="Check"></Setter>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
                <Setter Property="FocusVisualStyle">
                    <Setter.Value>
                        <Style TargetType="Control">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Border BorderBrush="Black" SnapsToDevicePixels="True" BorderThickness="1" Margin="-5,1,3,1" />
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Setter.Value>
                </Setter>
            </Style>
          
        </Window.Resources>
        <Grid>
            <ComboBox Name="combobox" Width="500" Height="200" ItemsSource="{Binding ComboBoxData}">
                <ComboBox.Style>
                    <Style TargetType="ComboBox">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate>
                                    <Grid x:Name="gd" >
                                        <Expander Width="500">
                                            <Expander.Header>
                                                <ListBox Background="Transparent" IsHitTestVisible="False" BorderBrush="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Hidden"
                                                 ScrollViewer.VerticalScrollBarVisibility="Disabled"  BorderThickness="0" ItemsSource="{Binding ElementName=lst,Path=SelectedItems}">
                                                    <ListBox.ItemsPanel>
                                                        <ItemsPanelTemplate>
                                                            <WrapPanel  Orientation="Horizontal"></WrapPanel>
                                                        </ItemsPanelTemplate>
                                                    </ListBox.ItemsPanel>
                                                    <ListBox.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal">
                                                                <TextBlock Text="{Binding Name}"/>
                                                                <TextBlock Text="{Binding Email}"/>
                                                            </StackPanel>
                                                            
                                                        </DataTemplate>
                                                    </ListBox.ItemTemplate>
                                                </ListBox>
                                            </Expander.Header>
                                            <Expander.Content>
                                                <ListBox  Background="Transparent" ItemContainerStyle="{StaticResource itemstyle}" HorizontalContentAlignment="Stretch" x:Name="lst"
                                                  SelectionMode="Multiple"
                                                  ItemsSource="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ComboBox}}, Path=ItemsSource}">
                                                    <ListBox.ItemTemplate>
                                                        <DataTemplate>
                                                            <StackPanel Orientation="Horizontal">
                                                                <CheckBox x:Name="checkBox"  
                                                                      IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}"
                                                              Content="{Binding Name}"/>
                                                                <TextBlock Text="{Binding Email}"/>
                                                            </StackPanel>
                                                            
                                                        </DataTemplate>
                                                    </ListBox.ItemTemplate>
                                                </ListBox>
                                            </Expander.Content>
                                        </Expander>
                                    </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
    
                    </Style>
                </ComboBox.Style>
            </ComboBox>
        </Grid>
    

    Codebedind:

     public partial class MainWindow : Window
        {
            ObservableCollection<User> users;
            public MainWindow()
            {
                InitializeComponent();
                users = new ObservableCollection<User>();
                for (int i = 1; i < 5; i++)
                {
                    users.Add(new User() { Name = $"name{i}", Email = $"email{i}" });
                }
                CreateRoomDaialogViewModel vm = new CreateRoomDaialogViewModel(users);
                DataContext = vm;
    
            }
    
        }
        public class CreateRoomDaialogViewModel : ObservableObject, INotifyPropertyChanged
        {
    
            private ObservableCollection<User> data;
            public ObservableCollection<User> ComboBoxData
            {
                get { return data; }
                set
                {
                    if (data != value)
                    {
                        data = value;
                        OnPropertyChanged("ComboBoxData");
                    }
                }
            }
            public CreateRoomDaialogViewModel(ObservableCollection<User> PeopleData)
            {
                ComboBoxData = new ObservableCollection<User>();
                ComboBoxData = PeopleData;
            }
            public event PropertyChangedEventHandler PropertyChanged;
            protected void OnPropertyChanged([CallerMemberName] string name = null)
            {
                PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
            }
        }
        public class User
        {
            public string Name { get; set; }
            public string Email { get; set; }
           
        }
    
    

    The result:

    5


    If the response is helpful, please click "Accept Answer" and upvote it.

    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.

    0 comments No comments

0 additional answers

Sort by: Most helpful